// Section 5: What Model OS Is + Flywheels

const Flywheels = () => (
  <section className="section" id="flywheel" data-screen-label="04 Architecture">
    <div className="wrap">
      <div className="s-head">
        <span className="label">/ 05 — How it works</span>
        <h2>Anyone can build their own AI with <span className="gradient">Model OS</span>.</h2>
        <p className="lede">
          The Model OS development platform enables enterprises to build, optimize, and deploy
          proprietary AI models without the cost of building an AI stack from scratch. Start from
          10K+ open-source models ready to be fine-tuned, or use a custom AI.
        </p>
      </div>

      <div className="incubation-cols">
        <div className="incol">
          <div className="incol-icon">
            <svg viewBox="0 0 40 40" fill="none" width="28" height="28">
              <circle cx="20" cy="20" r="18" stroke="rgba(96,128,255,0.5)" strokeWidth="1.5" />
              <circle cx="20" cy="20" r="8" fill="rgba(96,128,255,0.2)" stroke="rgba(96,128,255,0.8)" strokeWidth="1" />
              {[0,60,120,180,240,300].map((deg, i) => {
                const r = deg * Math.PI / 180;
                const x1 = 20 + 9 * Math.cos(r);
                const y1 = 20 + 9 * Math.sin(r);
                const x2 = 20 + 17 * Math.cos(r);
                const y2 = 20 + 17 * Math.sin(r);
                return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke="rgba(96,128,255,0.4)" strokeWidth="0.8" />;
              })}
            </svg>
          </div>
          <div className="incol-head">Build</div>
          <div className="incol-sub">Pick the right model for your custom AI, then manage and clean up your data.</div>
          <div className="incol-tags">
            {['01 Solution Generator','02 Training Data Studio','03 Data Generation'].map(t =>
              <span key={t} className="incol-tag">{t}</span>
            )}
          </div>
        </div>

        <div className="incol-arrow">
          <svg viewBox="0 0 60 120" fill="none" width="60" height="120">
            <defs>
              <linearGradient id="iarrow" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stopColor="rgba(178,100,255,0.1)" />
                <stop offset="50%" stopColor="rgba(178,100,255,0.8)" />
                <stop offset="100%" stopColor="rgba(178,100,255,0.1)" />
              </linearGradient>
            </defs>
            <line x1="30" y1="10" x2="30" y2="100" stroke="url(#iarrow)" strokeWidth="1.5" strokeDasharray="4 3" />
            <polygon points="30,110 22,94 38,94" fill="rgba(178,100,255,0.7)" />
          </svg>
        </div>

        <div className="incol incol--mid">
          <div className="incol-icon">
            <svg viewBox="0 0 40 40" fill="none" width="28" height="28">
              <rect x="4" y="10" width="32" height="20" rx="4" stroke="rgba(178,100,255,0.6)" strokeWidth="1.5" />
              <rect x="10" y="16" width="20" height="8" rx="2" fill="rgba(178,100,255,0.2)" stroke="rgba(178,100,255,0.5)" strokeWidth="1" />
              <line x1="20" y1="4" x2="20" y2="10" stroke="rgba(178,100,255,0.4)" strokeWidth="1.2" />
              <line x1="20" y1="30" x2="20" y2="36" stroke="rgba(178,100,255,0.4)" strokeWidth="1.2" />
            </svg>
          </div>
          <div className="incol-head">Train</div>
          <div className="incol-sub">Fine-tune and optimize your model, then benchmark and compare its performance.</div>
          <div className="incol-tags">
            {['04 Fine-Tuning Studio','05 Evaluation Studio'].map(t =>
              <span key={t} className="incol-tag incol-tag--mid">{t}</span>
            )}
          </div>
        </div>

        <div className="incol-arrow">
          <svg viewBox="0 0 60 120" fill="none" width="60" height="120">
            <defs>
              <linearGradient id="iarrow2" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stopColor="rgba(255,111,191,0.1)" />
                <stop offset="50%" stopColor="rgba(255,111,191,0.8)" />
                <stop offset="100%" stopColor="rgba(255,111,191,0.1)" />
              </linearGradient>
            </defs>
            <line x1="30" y1="10" x2="30" y2="100" stroke="url(#iarrow2)" strokeWidth="1.5" strokeDasharray="4 3" />
            <polygon points="30,110 22,94 38,94" fill="rgba(255,111,191,0.7)" />
          </svg>
        </div>

        <div className="incol">
          <div className="incol-icon">
            <svg viewBox="0 0 40 40" fill="none" width="28" height="28">
              <rect x="4" y="4" width="32" height="32" rx="5" stroke="rgba(255,111,191,0.5)" strokeWidth="1.5" />
              <circle cx="20" cy="20" r="7" stroke="rgba(255,111,191,0.7)" strokeWidth="1" />
              <line x1="20" y1="4" x2="20" y2="13" stroke="rgba(255,111,191,0.4)" strokeWidth="1.2" />
              <line x1="20" y1="27" x2="20" y2="36" stroke="rgba(255,111,191,0.4)" strokeWidth="1.2" />
              <line x1="4" y1="20" x2="13" y2="20" stroke="rgba(255,111,191,0.4)" strokeWidth="1.2" />
              <line x1="27" y1="20" x2="36" y2="20" stroke="rgba(255,111,191,0.4)" strokeWidth="1.2" />
            </svg>
          </div>
          <div className="incol-head">Run & Learn</div>
          <div className="incol-sub">Manage and run AI across the enterprise. Every deployed model keeps improving from real usage.</div>
          <div className="incol-tags">
            {['06 Deployment','07 Runtime Studio','Real-time feedback','Continual learning'].map(t =>
              <span key={t} className="incol-tag incol-tag--ops">{t}</span>
            )}
          </div>
        </div>
      </div>

    </div>
  </section>
);

// ToB + ToC Flywheels

const FlywheelStep = ({ num, title, body }) => (
  <div className="fw-step">
    <div className="fw-step-num">{num}</div>
    <div className="fw-step-content">
      <div className="fw-step-title">{title}</div>
      <div className="fw-step-body">{body}</div>
    </div>
  </div>
);

const ToBToC = () => (
  <section className="section" id="flywheels" data-screen-label="07 Flywheels">
    <div className="wrap">
      <div className="s-head">
        <span className="label">/ 06 — Flywheels</span>
        <h2>Two flywheels. One compounding <span className="gradient">intelligence system</span>.</h2>
        <p className="lede">
          Enterprise product usage becomes training data. Fine-tuned models enter the router.
          Real-world signals improve the next model version.
        </p>
      </div>

      <div className="fw-grid">
        <div className="fw-card">
          <div className="fw-card-label">Solution — To B Flywheel</div>
          <h3 className="fw-card-title">Enterprise product usage becomes owned intelligence.</h3>
          <p className="fw-card-sub">Every production workflow becomes training data, evaluated model versions, and deployed owned intelligence.</p>
          <div className="fw-steps">
            <FlywheelStep num="1" title="Connect a production workflow" body="Support, legal, sales, coding, healthcare." />
            <FlywheelStep num="2" title="Capture usage and feedback" body="Interactions, corrections, outcomes." />
            <FlywheelStep num="3" title="Create approved training assets" body="Datasets ready for training." />
            <FlywheelStep num="4" title="Train and evaluate model versions" body="Owned, evaluated model versions." />
            <FlywheelStep num="5" title="Deploy, route, and continuously improve" body="Runtime signals compound quality." />
          </div>
          <div className="fw-verticals">
            {['Sales / GTM AI','Legal AI','Healthcare Intake','Customer Support'].map(v => (
              <span key={v} className="fw-vertical">{v}</span>
            ))}
          </div>
        </div>

        <div className="fw-card fw-card--toc">
          <div className="fw-card-label">Solution — Runtime Learning Loop</div>
          <h3 className="fw-card-title">Every production deployment improves the next model version.</h3>
          <p className="fw-card-sub">Production traffic, runtime traces, and feedback become new datasets and better model versions — automatically.</p>
          <div className="fw-steps">
            <FlywheelStep num="1" title="Production traffic is routed" body="" />
            <FlywheelStep num="2" title="Runtime traces are captured" body="" />
            <FlywheelStep num="3" title="Failures and feedback are identified" body="" />
            <FlywheelStep num="4" title="New datasets are generated" body="" />
            <FlywheelStep num="5" title="Candidate model versions are trained" body="" />
            <FlywheelStep num="6" title="The best version returns to production" body="" />
          </div>
        </div>
      </div>

      <div className="fw-fde">
        <div className="fw-fde-head">
          <span className="label">/ FDE Is the Symptom</span>
          <h3>Forward-deployed AI works.<br /><span className="gradient">Model OS makes it scalable.</span></h3>
          <p style={{color:'var(--fg-dim)', fontSize:16, lineHeight:1.7, marginTop:16, maxWidth:'56ch'}}>
            Frontier AI companies rely on forward-deployed teams to discover workflows, integrate private data,
            build evaluations, deploy models, and continuously improve production systems. Model OS turns that
            expert lifecycle into repeatable software.
          </p>
          <div className="fw-fde-stat">
            Forward-deployed engineering job postings grew <strong>729%</strong> year over year from April 2025 to April 2026.
            <span className="fw-fde-source"> — Business Insider / Indeed, May 2026</span>
          </div>
        </div>
        <div className="fw-fde-compare">
          <div className="fw-fde-col">
            <div className="fw-fde-col-label">Manual FDE Motion</div>
            {['Workflow discovery','Custom integration','Eval','Guardrails','Deployment monitoring','Customer-by-customer work'].map(item => (
              <div key={item} className="fw-fde-item fw-fde-item--manual">
                <span className="fw-fde-x">✗</span> {item}
              </div>
            ))}
          </div>
          <div className="fw-fde-vs">vs</div>
          <div className="fw-fde-col">
            <div className="fw-fde-col-label">Model OS Productized Layer</div>
            {['Training data automation','Model versioning','Automated evaluation','Controlled rollout','Routing & runtime','Observability','Continuous learning','Repeatable infra'].map(item => (
              <div key={item} className="fw-fde-item fw-fde-item--mos">
                <span className="fw-fde-check">✓</span> {item}
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  </section>
);

window.Flywheels = Flywheels;
window.ToBToC = ToBToC;