// Six product modules

const Module = ({ num, total, title, lede, tags, footer, visual }) => (
  <div className="module" id={`module-${num}`} data-screen-label={`Module ${num}`}>
    <div className="wrap">
      <div className="module-row">
        <div className="col-l">
          <div className="module-num">/ Module 0{num} of 0{total}</div>
          <h3>{title}</h3>
          <p className="lede">{lede}</p>
          {tags && (
            <div className="tags">
              {tags.map((t, i) => <span className="tag" key={i}>{t}</span>)}
            </div>
          )}
          {footer && <div style={{marginTop:28, color:'var(--fg-dim)', fontSize:14}}>{footer}</div>}
        </div>
        <div className="module-vis">{visual}</div>
      </div>
    </div>
  </div>
);

// ─── Micro-UIs ────────────────────────────────────────────
const DataStudioMock = () => (
  <div>
    <div className="mock-head">
      <span>Training Data Studio</span>
      <span className="state">Active</span>
    </div>
    <div className="mock-row"><span className="id">#441</span><span className="lbl">Expert edit captured</span><span className="pill good">✓</span></div>
    <div className="mock-row"><span className="id">#440</span><span className="lbl">Accepted output logged</span><span className="pill good">✓</span></div>
    <div className="mock-row"><span className="id">#439</span><span className="lbl">Rejected — flagged for review</span><span className="pill">✗</span></div>
    <div className="mock-row"><span className="id">#438</span><span className="lbl">Preference signal recorded</span><span className="pill good">✓</span></div>
    <div className="mock-row"><span className="id">#437</span><span className="lbl">Escalation logged</span><span className="pill good">✓</span></div>
    <div className="mock-row"><span className="id">#436</span><span className="lbl">Conversion signal captured</span><span className="pill good">✓</span></div>
    <div style={{display:'flex', justifyContent:'space-between', fontSize:11, color:'var(--fg-dimmer)', fontFamily:'var(--mono)', marginTop:14, letterSpacing:'0.12em'}}>
      <span>DATA COLLECTED</span>
      <span>LINEAGE TRACKED</span>
    </div>
  </div>
);

const OwnedModelMock = () => (
  <div>
    <div className="mock-head">
      <span>Model Studio</span>
      <span className="state">3 active runs</span>
    </div>
    <div className="run">
      <div className="run-head">
        <div>
          <div className="run-name">legal-v4</div>
          <div className="run-meta">custom model · in training</div>
        </div>
        <div className="run-state">RUNNING</div>
      </div>
      <div className="run-bar"><div style={{width:'72%'}} /></div>
      <div className="run-foot">
        <span>72% complete</span>
        <span>ETA 11M</span>
      </div>
    </div>
    <div className="run" style={{opacity:0.65}}>
      <div className="run-head">
        <div>
          <div className="run-name">support-router-v3</div>
          <div className="run-meta">preference-aligned</div>
        </div>
        <div className="run-state">DONE</div>
      </div>
    </div>
    <div className="run" style={{opacity:0.45}}>
      <div className="run-head">
        <div>
          <div className="run-name">healthcare-triage-v1</div>
          <div className="run-meta">specialized model</div>
        </div>
        <div className="run-state">QUEUED</div>
      </div>
    </div>
  </div>
);

const EvalMock = () => (
  <div>
    <div className="mock-head">
      <span>Eval Gate · owned vs wrapper</span>
      <span className="state">SHIP-READY</span>
    </div>
    {[
      { k: 'Task success',       a: '+13%' },
      { k: 'Domain accuracy',    a: '+19%' },
      { k: 'Hallucination',      a: '−4.3%' },
      { k: 'Format consistency', a: '+17%' },
      { k: 'Cost per request',   a: '−96%' },
      { k: 'p95 latency',        a: '−74%' },
    ].map((r, i) => (
      <div className="metric-row" key={i}>
        <span>{r.k}</span>
        <span className="delta up">{r.a}</span>
      </div>
    ))}
    <div style={{marginTop:18, fontSize:11, color:'var(--fg-dim)', fontFamily:'var(--mono)', letterSpacing:'0.16em'}}>
      OWNED MODEL WINS 6 / 6 METRICS
    </div>
  </div>
);

const RouterMock = () => (
  <div>
    <div className="mock-head">
      <span>Benchmark-Aware Router · live</span>
      <span className="state">1,842 req/min</span>
    </div>
    {[
      { type: 'Repeated workflow',    arr: 'owned small model', share: 62 },
      { type: 'Complex reasoning',    arr: 'frontier API',      share: 19 },
      { type: 'Dynamic facts',        arr: 'RAG pipeline',      share: 12 },
      { type: 'Human review needed',  arr: 'approval queue',    share: 5  },
      { type: 'Fallback',             arr: 'general-purpose',   share: 2  },
    ].map((r, i) => (
      <div className="r-row" key={i}>
        <div className="top">
          <div>
            <div className="ttl">{r.type}</div>
            <div className="arr">→ {r.arr}</div>
          </div>
          <div className="pct">{r.share}%</div>
        </div>
        <div className="bar"><div style={{width:`${r.share}%`}} /></div>
      </div>
    ))}
  </div>
);

const WorkflowMock = () => (
  <div>
    <div className="mock-head">
      <span>Workflow Runtime</span>
      <span className="state">RUNNING</span>
    </div>
    <div style={{display:'flex', flexDirection:'column', gap:8, margin:'12px 0'}}>
      {[
        { step: 'Planner', status: 'done', note: 'Task decomposed → 4 steps' },
        { step: 'Retriever', status: 'done', note: '12 docs · 3 sources' },
        { step: 'Router', status: 'active', note: 'legal-v4 selected' },
        { step: 'Verifier', status: 'queue', note: 'hallucination check' },
        { step: 'Human Approval', status: 'queue', note: 'awaiting review' },
      ].map((s, i) => (
        <div key={i} style={{display:'flex', justifyContent:'space-between', alignItems:'center', padding:'8px 12px', borderRadius:8, background: s.status === 'active' ? 'rgba(178,100,255,0.1)' : 'rgba(255,255,255,0.03)', border:`1px solid ${s.status === 'active' ? 'rgba(178,100,255,0.3)' : 'var(--line)'}`}}>
          <div>
            <div style={{fontSize:12, fontWeight:600}}>{s.step}</div>
            <div style={{fontSize:11, color:'var(--fg-dim)', fontFamily:'var(--mono)', letterSpacing:'0.08em', marginTop:2}}>{s.note}</div>
          </div>
          <div style={{fontSize:10, fontFamily:'var(--mono)', letterSpacing:'0.12em', color: s.status === 'done' ? 'rgba(96,180,96,0.9)' : s.status === 'active' ? 'rgba(178,100,255,0.9)' : 'var(--fg-dimmer)'}}>
            {s.status === 'done' ? '✓ DONE' : s.status === 'active' ? '● ACTIVE' : '○ QUEUED'}
          </div>
        </div>
      ))}
    </div>
  </div>
);

const ObserveMock = () => (
  <div>
    <div className="mock-head">
      <span>Session Trace · #8821</span>
      <span className="state">COMPLETE</span>
    </div>
    <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:8, marginBottom:12}}>
      {[
        { k: 'Model used', v: 'legal-v4' },
        { k: 'Tokens', v: '1,284' },
        { k: 'Cost', v: '$0.0004' },
        { k: 'Latency', v: '312ms' },
      ].map(({ k, v }) => (
        <div key={k} style={{padding:'10px 12px', borderRadius:8, border:'1px solid var(--line)', background:'rgba(255,255,255,0.02)'}}>
          <div style={{fontSize:10, color:'var(--fg-dimmer)', fontFamily:'var(--mono)', letterSpacing:'0.14em'}}>{k}</div>
          <div style={{fontSize:15, fontWeight:700, marginTop:4, letterSpacing:'-0.02em'}}>{v}</div>
        </div>
      ))}
    </div>
    <div className="mock-row"><span className="lbl">Tool call: contract_parse()</span><span className="pill good">OK</span></div>
    <div className="mock-row"><span className="lbl">Human approval: clause flagged</span><span className="pill">REVIEW</span></div>
    <div className="mock-row"><span className="lbl">Feedback: lawyer accepted output</span><span className="pill good">SFT</span></div>
  </div>
);

const Product = () => (
  <div id="product" data-screen-label="05 Product">
    <div style={{padding:'0 var(--pad)', maxWidth:'var(--maxw)', margin:'0 auto', paddingTop:'clamp(96px, 14vw, 180px)'}}>
      <div className="s-head">
        <span className="label">/ 04 — Product modules</span>
        <h2>One platform to incubate, operate, and <span className="gradient">improve</span> models.</h2>
        <p className="lede">
          From data capture to hosted execution — every layer of the model ownership stack,
          connected and compounding.
        </p>
      </div>
    </div>

    <div className="modules">
      <Module num={1} total={6}
        title="Training Data Studio"
        lede="Automatically turn production usage, expert corrections, accepted and rejected outputs, workflow traces, and business outcomes into proprietary training and evaluation assets."
        tags={['Production signals','Expert corrections','Preference data','Eval cases','Dataset lineage']}
        footer="Where every production interaction becomes model-grade data."
        visual={<DataStudioMock />}
      />

      <Module num={2} total={6}
        title="Model Studio"
        lede="Automatically train, register, compare, and manage specialized model versions using approved production data."
        tags={['Owned models','Specialized versions','Model registry','Continuous iteration']}
        footer="Prompt engineering changes outputs. Model ownership creates assets."
        visual={<OwnedModelMock />}
      />

      <Module num={3} total={6}
        title="Eval Gate"
        lede="No model goes live until it earns it. Automatically compare every candidate across quality, task success, domain accuracy, safety, reliability, cost, latency, and business outcomes."
        tags={['Quality benchmarks','Task success','Cost efficiency','Human review']}
        footer="Training creates candidates. Eval decides production."
        visual={<EvalMock />}
      />

      <Module num={4} total={6}
        title="Intelligent Router"
        lede="Automatically route every task to the right model, workflow, or fallback path based on measured quality, cost, latency, context, reliability, and deployment requirements."
        tags={['Performance-based routing','Cost optimization','Fallback control']}
        footer="Routing is not model selection. Routing is production intelligence."
        visual={<RouterMock />}
      />

      <Module num={5} total={6}
        title="Workflow Runtime"
        lede="Turn models, agents, tools, retrieval, memory, and human approvals into controlled, auditable production workflows."
        tags={['Controlled execution','Multi-step orchestration','Human oversight','Audit trail']}
        footer="The future AI app is a governed workflow."
        visual={<WorkflowMock />}
      />

      <Module num={6} total={6}
        title="Deployment & Observability"
        lede="Deploy, monitor, and govern models and AI workflows across managed, private, and customer-controlled environments."
        tags={['Deployment','Cost visibility','Behavioral monitoring','Operational control']}
        footer="No visibility, no control. No control, no ownership."
        visual={<ObserveMock />}
      />
    </div>

    {/* Production Learning Loop */}
    <div style={{padding:'clamp(80px,12vw,140px) var(--pad)', borderTop:'1px solid var(--line)'}}>
      <div style={{maxWidth:'var(--maxw)', margin:'0 auto'}}>
        <span className="label" style={{display:'block', marginBottom:28}}>/ Compounding intelligence</span>
        <h3 style={{marginBottom:48, maxWidth:'22ch'}}>Every production interaction improves the next model version.</h3>
        <div className="loop-cols">
          <div className="loop-col">
            <div className="loop-num">Observe</div>
            <div className="loop-tags">
              {['Cost','Quality','Behavior','Outcomes'].map(t =>
                <span key={t} className="loop-tag">{t}</span>
              )}
            </div>
          </div>
          <div className="loop-arrow">→</div>
          <div className="loop-col">
            <div className="loop-num">Learn</div>
            <div className="loop-tags">
              {['Expert signals','Outcome feedback','Behavioral patterns'].map(t =>
                <span key={t} className="loop-tag">{t}</span>
              )}
            </div>
          </div>
          <div className="loop-arrow">→</div>
          <div className="loop-col">
            <div className="loop-num">Improve</div>
            <div className="loop-tags">
              {['Owned data grows','Model improves','New version ships'].map(t =>
                <span key={t} className="loop-tag">{t}</span>
              )}
            </div>
          </div>
        </div>
        <div className="loop-punch">
          Every production interaction is a signal.<br />
          Every signal compounds the model.<br />
          <span className="gradient">Every version is better than the last.</span>
        </div>
      </div>
    </div>
  </div>
);

window.Product = Product;