// 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"><span className="comp-yes">✓</span> {modelOS}</td>
    {others.map((o, i) => (
      <td key={i} className="comp-other">{o}</td>
    ))}
  </tr>
);

const CompetitivePositioning = () => (
  <section className="section" id="competitive" data-screen-label="11 Competitive">
    <div className="wrap">
      <div className="s-head">
        <span className="label">/ 06 — Competitive positioning</span>
        <h2>The market is moving beyond <span className="gradient">model access</span>.</h2>
        <p className="lede">
          The next category is not another model API. It is the operating layer that integrates
          model supply, benchmark, controlled execution, and supplier matching into one adaptive system.
        </p>
      </div>

      <div className="comp-thesis">
        <div className="comp-thesis-line">The winning system is not one model.</div>
        <div className="comp-thesis-line comp-thesis-accent gradient">It is the layer that integrates many.</div>
      </div>

      <div className="comp-diff-grid">
        {[
          { k: 'Performance-driven routing', d: 'Tasks are routed to the right model based on measured performance — not static rules.' },
          { k: 'Multi-model composition', d: 'Owned models, frontier APIs, and specialized adapters work together in governed workflows.' },
          { k: 'Controlled execution', d: 'Human oversight, deployment gates, and full operational control built into every run.' },
          { k: 'Demand and supply matching', d: 'Connects application needs to the right model capabilities across the ecosystem.' },
          { k: 'Compounding cost efficiency', d: 'Cost improves continuously as owned models mature — not a fixed API tax.' },
          { k: 'Continuous improvement', d: 'Production signals feed back into model quality. Every deployment makes the next one better.' },
        ].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-map-wrap">
        <div className="comp-map-label">/ Positioning map</div>
        <div className="comp-map">
          <div className="comp-map-axis comp-map-x">
            <span>Model Access</span>
            <div className="comp-map-axis-line" />
            <span>Model Operations</span>
          </div>
          <div className="comp-map-axis comp-map-y">
            <span>Production Control Layer</span>
            <div className="comp-map-axis-line comp-map-axis-line--v" />
            <span>Developer Tool</span>
          </div>
          <div className="comp-map-points">
            {[
              { label: 'Hugging Face', sub: 'Model repository / public supply', x: 12, y: 72 },
              { label: 'OpenRouter', sub: 'Model access / routing', x: 28, y: 62 },
              { label: 'LangChain / n8n', sub: 'Workflow framework', x: 44, y: 38 },
              { label: 'W&B / Arize', sub: 'Observability / eval', x: 56, y: 30 },
              { label: 'Fine-tuning tools', sub: 'Training & adaptation', x: 36, y: 50 },
            ].map(({ label, sub, x, y }) => (
              <div key={label} className="comp-map-dot comp-map-dot--other" style={{left:`${x}%`, top:`${y}%`}}>
                <div className="comp-dot-marker" />
                <div className="comp-dot-label">{label}</div>
                <div className="comp-dot-sub">{sub}</div>
              </div>
            ))}
            <div className="comp-map-dot comp-map-dot--mos" style={{left:'74%', top:'16%'}}>
              <div className="comp-dot-marker comp-dot-marker--mos" />
              <div className="comp-dot-label comp-dot-label--mos">Model OS</div>
              <div className="comp-dot-sub">Operating layer for model ecosystem</div>
            </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>
              <th>Hugging Face</th>
              <th>OpenRouter</th>
              <th>LangChain</th>
              <th>W&amp;B / Arize</th>
            </tr>
          </thead>
          <tbody>
            <CompRow label="Primary layer" modelOS="Operating layer" others={['Model repo','API layer','Framework','Observability']} />
            <CompRow label="Model supply depth" modelOS="Proprietary + public supply" others={['✓ Deep','Limited','None','None']} />
            <CompRow label="Performance-based selection" modelOS="✓ Core feature" others={['Partial','Limited','None','None']} />
            <CompRow label="Controlled execution" modelOS="✓ Built-in" others={['None','None','Partial','None']} />
            <CompRow label="Co-creation support" modelOS="✓ Integrated" others={['Partial','None','None','None']} />
            <CompRow label="Production feedback loop" modelOS="✓ Integrated" others={['None','None','None','Partial']} />
            <CompRow label="Model / data matchmaking" modelOS="✓ Core feature" others={['None','None','None','None']} />
          </tbody>
        </table>
      </div>

      <div className="comp-punch">
        <div className="cp-line">Model OS is not a model marketplace.</div>
        <div className="cp-line">Model OS is not just an API layer.</div>
        <div className="cp-line">Model OS is not one more product on top of models.</div>
        <div className="cp-line cp-accent gradient">Model OS is the operating layer that makes the model ecosystem usable.</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;