const Traction = () => (
  <section className="section" id="traction" data-screen-label="06 Traction">
    <div className="wrap">
      <div className="s-head">
        <span className="label">/ 05 — Traction</span>
        <h2>Already shipping.</h2>
        <p className="lede">
          Model supply, fine-tuning infrastructure, routing, and observability &mdash;
          live across our network today.
        </p>
      </div>

      <div className="tract-stats">
        <div className="cell">
          <div className="num">2.5<span className="small">M</span></div>
          <div className="lbl">Monthly active users on the Router surface.</div>
        </div>
        <div className="cell">
          <div className="num">500<span className="small">+</span></div>
          <div className="lbl">Proprietary research models trained.</div>
        </div>
        <div className="cell">
          <div className="num">1.2<span className="small">M+</span></div>
          <div className="lbl">Routable models.</div>
        </div>
      </div>

      <div className="tract-grid">
        <div className="card">
          <span className="label">Research network</span>
          <h4>Built with frontier labs.</h4>
          <div className="chip-grid">
            {['CMU','Stanford','Berkeley','MIT','Harvard','Caltech','Penn','Columbia','Cornell','Duke'].map(l =>
              <div className="chip" key={l}>{l}</div>
            )}
          </div>
        </div>
        <div className="card">
          <span className="label">Infra alignment</span>
          <h4>Runs on every major cloud.</h4>
          <div className="chip-grid">
            {['Google','Azure','AWS','Cloudflare','OpenAI','Hugging Face','NVIDIA','Together'].map(l =>
              <div className="chip" key={l}>{l}</div>
            )}
          </div>
        </div>
      </div>

      <div className="cmu">
        <div>
          <span className="label">Initiative</span>
          <h3>The Model Dev Initiative.</h3>
          <p>
            A joint research ecosystem with CMU School of Computer Science &mdash;
            pioneering open intelligence and cost-effective model development.
          </p>
          <a href="https://www.cs.cmu.edu/~tianqinl/decentralize-Initiative.html" target="_blank" rel="noopener noreferrer" className="btn btn-ghost">
            Explore the initiative
            <span className="arrow">→</span>
          </a>
        </div>
        <div className="visual">
          <div className="marker">
            <span>CMU SCS</span>
            <span className="x">×</span>
            <span>Model OS</span>
          </div>
          <div className="stitch">
            Model Dev<br />
            Initiative<br />
            <span className="plus">×</span> CMU
          </div>
          <div className="marker">
            <span>Research</span>
            <span>2026 —</span>
          </div>
        </div>
      </div>
    </div>
  </section>
);

window.Traction = Traction;