// The Application Layer Is Not Dead — its architecture is wrong.
// Left: streams lost into a vortex. Right: streams compounded into owned layers.

const WhyNow = () => (
  <section className="section" id="why" data-screen-label="03 Why Now">
    <div className="wrap">
      <div className="s-head">
        <span className="label">/ 02 — Why now</span>
        <h2>Companies no longer want to <span className="gradient">share their data</span>.</h2>
        <p className="lede">
          Frontier labs can use the data their customers share to build products that compete with them.
          It has already happened.
        </p>
      </div>

      <div className="vision-timeline">
        <div className="vt-item">
          <div className="vt-phase">Harvey → OpenAI</div>
          <div className="vt-desc">OpenAI launched its own legal AI.</div>
        </div>
        <div className="vt-connector" />
        <div className="vt-item">
          <div className="vt-phase">Figma → Anthropic</div>
          <div className="vt-desc">Anthropic launched Claude Design.</div>
        </div>
      </div>

      <div className="archviz-wrap">
        <ArchViz />
      </div>

      <div className="appnow-punch">
        Your data is your advantage.<br />
        <span className="gradient">It should train your model, not theirs.</span>
      </div>
    </div>
  </section>
);

window.WhyNow = WhyNow;