// Section 20-21 — Competitive Positioning + Long-Term Vision

const CompRow = ({ label, modelOS, others }) => (
  <tr className="comp-row">
    <td className="comp-dim">{label}</td>
    <td className="comp-mos">{modelOS === 'Yes' && <span className="comp-yes">✓</span>} {modelOS}</td>
    {others.map((o, i) => (
      <td key={i} className="comp-other">{o}</td>
    ))}
  </tr>
);

const COMP_COLS = ['Cloud Providers', 'Post-Training Firms', 'Open Source Platforms', 'Large Frontier Labs'];
const COMP_ROWS = [
  { label: 'Customization',       modelOS: 'Yes',   others: ['No', 'No', 'Yes', 'No'] },
  { label: 'Training',            modelOS: 'Yes',   others: ['No', 'Yes', 'Partial', 'No'] },
  { label: 'Privacy',             modelOS: 'Yes',   others: ['Partial', 'Partial', 'Yes', 'No'] },
  { label: 'Quality',             modelOS: 'Yes',   others: ['Yes', 'Yes', 'No', 'Yes'] },
  { label: 'Price',               modelOS: '$–$$',  others: ['$$', '$$$', '$$', '$$'] },
  { label: 'Continuous Learning', modelOS: 'Yes',   others: ['No', 'No', 'No', 'No'] },
];

const CompetitivePositioning = () => (
  <section className="section" id="competitive" data-screen-label="11 Competitive">
    <div className="wrap">
      <div className="s-head">
        <span className="label">/ 06 — Why Model OS</span>
        <h2>We make it easy to both <span className="gradient">customize &amp; repeatedly train</span> models.</h2>
        <p className="lede">
          Other options cover one part of the job. Model OS gives you customization, training, privacy,
          and quality in one place, and your models keep learning after launch.
        </p>
      </div>

      <div className="comp-thesis">
        <div className="comp-thesis-line">A platform,</div>
        <div className="comp-thesis-line comp-thesis-accent gradient">not a limited service provider.</div>
      </div>

      <div className="comp-diff-grid">
        {[
          { k: 'Platform', d: 'Build, train & run in one place, not a point tool.' },
          { k: 'Automated', d: 'Routing, retraining & evals run on autopilot.' },
          { k: 'End-to-end', d: 'One complete experience from data to deployment.' },
        ].map(({ k, d }, i) => (
          <div key={i} className="comp-diff-card">
            <div className="comp-diff-check">✓</div>
            <div>
              <div className="comp-diff-key">{k}</div>
              <div className="comp-diff-desc">{d}</div>
            </div>
          </div>
        ))}
      </div>

      <div className="comp-table-wrap">
        <table className="comp-table">
          <thead>
            <tr>
              <th></th>
              <th className="comp-mos-head">Model OS</th>
              {COMP_COLS.map((c) => <th key={c}>{c}</th>)}
            </tr>
          </thead>
          <tbody>
            {COMP_ROWS.map((r) => <CompRow key={r.label} {...r} />)}
          </tbody>
        </table>
      </div>

      <div className="comp-punch">
        <div className="cp-line">The platform enterprises use to build, own &amp; continuously improve their own AI models.</div>
        <div className="cp-line cp-accent gradient">Without handing proprietary data to frontier labs.</div>
      </div>
    </div>
  </section>
);

const LongTermVision = () => (
  <section className="section" id="vision" data-screen-label="12 Vision">
    <div className="wrap">
      <div className="s-head">
        <span className="label">/ 11 — Long-term vision</span>
        <h2>Where this goes: <span className="gradient">long-term vision</span>.</h2>
      </div>

      <div className="vision-body">
        <p className="vision-p">
          AI is evolving from static generation toward execution-native systems — models that operate
          interfaces, persist state, and improve from runtime signals.
        </p>
        <p className="vision-p">
          Model OS is positioned at the center of this shift: today we govern the model ecosystem.
          Long-term, we govern how intelligence runs, improves, and persists across the AI stack.
        </p>
      </div>

      <div className="vision-timeline">
        <div className="vt-item">
          <div className="vt-phase">Now</div>
          <div className="vt-desc">Model supply, routing, fine-tuning, eval, controlled execution, observability, feedback loop.</div>
        </div>
        <div className="vt-connector" />
        <div className="vt-item">
          <div className="vt-phase">Near term</div>
          <div className="vt-desc">Owned-model systems across every AI application vertical. Enterprise runtime as standard infrastructure.</div>
        </div>
        <div className="vt-connector" />
        <div className="vt-item">
          <div className="vt-phase">Long term</div>
          <div className="vt-desc">Execution-native intelligence. Models that persist state, improve from runtime signals, and operate autonomously within governed systems.</div>
        </div>
      </div>

      <div className="vision-punch">
        The next control point in AI is not one more model.<br />
        <span className="gradient">It is the layer that runs all of them.</span>
      </div>
    </div>
  </section>
);

window.CompetitivePositioning = CompetitivePositioning;
window.LongTermVision = LongTermVision;