const Traction = () => (
  <section className="section" id="traction" data-screen-label="06 Traction">
    <div className="wrap">
      <div className="s-head">
        <span className="label">/ 05 — Platform today</span>
        <h2>Model OS is already <span className="gradient">taking shape</span>.</h2>
        <p className="lede">
          We already have the building blocks of Model OS: model supply, workflow surfaces,
          fine-tuning infrastructure, routing, and observability.
        </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 — distribution surface for model discovery, usage, and feedback.</div>
        </div>
        <div className="cell">
          <div className="num">500<span className="small">+</span></div>
          <div className="lbl">Proprietary research models across vision, language, safety, provenance, eval, and agentic workflows.</div>
        </div>
        <div className="cell">
          <div className="num">1.2<span className="small">M+</span></div>
          <div className="lbl">Public models indexed into a discoverable, routable, evaluable operating surface.</div>
        </div>
      </div>

      <div className="tract-grid">
        <div className="card">
          <span className="label">Model Supply</span>
          <h4>500+ research models. 1.2M+ public supply.</h4>
          <p style={{fontSize:14, color:'var(--fg-dim)', marginTop:12, lineHeight:1.6}}>
            500+ proprietary research models and 1.2M+ public supply, with cards, papers, benchmark signals, and use cases. Covers purpose, use cases, category, pricing, traction, reviews, and public ownership percentage.
          </p>
          <div className="chip-grid" style={{marginTop:16}}>
            {['Auto Router','Controlled Execution','Co-Creation Layer','Fine-Tuning Studio','Eval Gate','Observability'].map(l =>
              <div className="chip" key={l}>{l}</div>
            )}
          </div>
        </div>
        <div className="card">
          <span className="label">Research &amp; Ecosystem Context</span>
          <h4>Built with frontier research institutions.</h4>
          <div className="logo-grid-5" style={{marginTop:16}}>
            {[
              { src: 'assets/images/logos/cmu.jpeg', alt: 'CMU' },
              { src: 'assets/images/logos/Stanford.png', alt: 'Stanford' },
              { src: 'assets/images/logos/mit.png', alt: 'MIT' },
              { src: 'assets/images/logos/Harvard.png', alt: 'Harvard' },
              { src: 'assets/images/logos/caltech.svg', alt: 'Caltech' },
              { src: 'assets/images/logos/Google.png', alt: 'Google' },
              { src: 'assets/images/logos/investor_logo/Microsoft_Logo_0.svg', alt: 'Microsoft' },
              { src: 'assets/images/logos/investor_logo/cloudflare.png', alt: 'Cloudflare' },
              { src: 'assets/images/logos/amazon.png', alt: 'AWS' },
              { src: 'assets/images/logos/berkeley.png', alt: 'Berkeley' },
            ].map(l => (
              <div className="logo-cell" key={l.alt}>
                <img src={l.src} alt={l.alt} />
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="cmu">
        <div>
          <span className="label">/ Model Dev Initiative</span>
          <h3>Model Dev Initiative.</h3>
          <p>
            A model incubation initiative connected to CMU research collaboration and the broader Model OS ecosystem.
            The Model Dev Initiative supports research collaboration, enterprise integration, ecosystem distribution,
            and hardware / device alignment — connecting research, model supply, benchmarks, and real-world deployment.
          </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 className="x">×</span>
            <span>Model OS</span>
          </div>
          <div className="stitch">
            Model Dev<br />
            Initiative<br />
            <img src="assets/images/logos/cmu.jpeg" alt="CMU" className="stitch-logo" />
          </div>
          <div className="cmu-blocks">
            {['Research Collaboration','Enterprise Integration','Ecosystem Distribution','Hardware & Device Alignment'].map(item => (
              <div key={item} className="cmu-block">{item}</div>
            ))}
          </div>
        </div>
      </div>
    </div>
  </section>
);

window.Traction = Traction;