// Five product layers — same micro-UI mocks, cleaner layout.
// No deck-borrowed flourishes; consistent type and spacing across all five.

const Module = ({ num, 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">/ Layer 0{num} of 04</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 — single visual language ─────────────────
const StudioMock = () => (
  <div>
    <div className="mock-head">
      <span>Dataset / v12</span>
      <span className="state">1,284 examples</span>
    </div>
    <div className="mock-row"><span className="id">#291</span><span className="lbl">Summarize Q3 board notes</span><span className="pill good">SFT</span></div>
    <div className="mock-row"><span className="id">#290</span><span className="lbl">Route escalation to ops</span><span className="pill good">SFT</span></div>
    <div className="mock-row"><span className="id">#289</span><span className="lbl">Compliance memo from diff</span><span className="pill">DPO</span></div>
    <div className="mock-row"><span className="id">#288</span><span className="lbl">Triage inbox by intent</span><span className="pill good">SFT</span></div>
    <div className="mock-row"><span className="id">#287</span><span className="lbl">Reviewer rejected the draft</span><span className="pill">NEG</span></div>
    <div className="mock-row"><span className="id">#286</span><span className="lbl">Convert clause to plain English</span><span className="pill good">SFT</span></div>
    <div className="mock-row"><span className="id">#285</span><span className="lbl">Reply with retention angle</span><span className="pill">DPO</span></div>
    <div style={{display:'flex', justifyContent:'space-between', fontSize:11, color:'var(--fg-dimmer)', fontFamily:'var(--mono)', marginTop:14, letterSpacing:'0.12em'}}>
      <span>TRAIN / EVAL · 90 / 10</span>
      <span>LINEAGE TRACKED</span>
    </div>
  </div>
);

const FineTuneMock = () => (
  <div>
    <div className="mock-head">
      <span>Runs</span>
      <span className="state">3 active</span>
    </div>
    <div className="run">
      <div className="run-head">
        <div>
          <div className="run-name">finance-v3 · sft</div>
          <div className="run-meta">base 8B · 1,284 ex</div>
        </div>
        <div className="run-state">RUNNING</div>
      </div>
      <div className="run-bar"><div style={{width:'68%'}} /></div>
      <div className="run-foot">
        <span>STEP 1,367 / 2,000</span>
        <span>LOSS 0.412 ↓</span>
        <span>ETA 14M</span>
      </div>
    </div>
    <div className="run" style={{opacity:0.65}}>
      <div className="run-head">
        <div>
          <div className="run-name">support-router-v2 · dpo</div>
          <div className="run-meta">preference pairs · 28K</div>
        </div>
        <div className="run-state">DONE</div>
      </div>
    </div>
    <div className="run" style={{opacity:0.5}}>
      <div className="run-head">
        <div>
          <div className="run-name">legal-extract-v1 · sft</div>
          <div className="run-meta">mini · 612 ex</div>
        </div>
        <div className="run-state">QUEUED</div>
      </div>
    </div>
  </div>
);

const EvalMock = () => (
  <div>
    <div className="mock-head">
      <span>Eval · owned vs wrapper</span>
      <span className="state">SHIP-READY</span>
    </div>
    {[
      { k: 'Task success',       a: '+13%' },
      { k: 'Format consistency', a: '+17%' },
      { k: 'Brand voice',        a: '+24%' },
      { k: 'Hallucination',      a: '−4.3%' },
      { 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 RouteMock = () => (
  <div>
    <div className="mock-head">
      <span>Router · live</span>
      <span className="state">1,247 req/min</span>
    </div>
    {[
      { type: 'Repeated workflow', arr: 'owned small model', share: 64 },
      { type: 'Complex reasoning', arr: 'frontier API', share: 18 },
      { type: 'Dynamic facts',     arr: 'RAG pipeline', share: 11 },
      { type: 'High-risk',         arr: 'human review', 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 FeedbackMock = () => (
  <div>
    <div className="mock-head">
      <span>Feedback · 24h</span>
      <span className="state">COLLECTING</span>
    </div>
    <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:8, marginBottom:18}}>
      <div style={{border:'1px solid var(--line)', borderRadius:10, padding:14}}>
        <div className="label">Positive</div>
        <div style={{fontSize:26, fontWeight:700, marginTop:6, letterSpacing:'-0.03em'}}>4,812</div>
        <div style={{fontSize:11, color:'var(--fg-dim)', fontFamily:'var(--mono)', marginTop:2, letterSpacing:'0.1em'}}>+18% D/D</div>
      </div>
      <div style={{border:'1px solid var(--line)', borderRadius:10, padding:14}}>
        <div className="label">Human edits</div>
        <div style={{fontSize:26, fontWeight:700, marginTop:6, letterSpacing:'-0.03em'}}>132</div>
        <div style={{fontSize:11, color:'var(--fg-dim)', fontFamily:'var(--mono)', marginTop:2, letterSpacing:'0.1em'}}>→ CANDIDATE SFT</div>
      </div>
    </div>
    <div className="mock-row"><span className="lbl">Better than baseline for our use case</span><span className="pill good">SFT</span></div>
    <div className="mock-row"><span className="lbl">Edit: shortened response by 30%</span><span className="pill">DPO</span></div>
    <div className="mock-row"><span className="lbl">Rejected: hallucinated entity</span><span className="pill">NEG</span></div>
    <div style={{marginTop:18, padding:14, border:'1px solid var(--line-2)', borderRadius:10, background:'rgba(178,100,255,0.08)'}}>
      <div style={{fontSize:13, fontWeight:600}}>v3 → v4 ready to train</div>
      <div style={{fontSize:12, color:'var(--fg-dim)', marginTop:4}}>1,043 new approved examples crossed the threshold.</div>
    </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</span>
        <h2>Four layers. One owned model.</h2>
        <p className="lede">
          A single runtime that takes production usage in &mdash; and ships an improving,
          monitored AI system out.
        </p>
      </div>
    </div>

    <div className="modules">
      <Module num={1}
        title={<>Training Data Studio</>}
        lede="Turn usage into training assets. Clean, label, version, and approve, with full lineage."
        tags={['Prompts','Conversations','Edits','Feedback','Lineage']}
        footer="Where product usage becomes proprietary model data."
        visual={<StudioMock />}
      />

      <Module num={2}
        title={<>Fine-Tuning Studio</>}
        lede="Train owned small models from approved behavior data. Pick a base, configure, launch."
        tags={['SFT','DPO','LoRA','Distillation']}
        footer="Curated behavior in, owned model versions out."
        visual={<FineTuneMock />}
      />

      <Module num={3}
        title={<>Eval Layer</>}
        lede="Prove the owned model beats the wrapper before it ships. Quality, economics, safety."
        tags={['Task success','Cost / req','Latency','Regressions','Risk cases']}
        footer="Fine-tuning creates the model. Eval decides whether it ships."
        visual={<EvalMock />}
      />

      <Module num={4}
        title={<>Feedback Loop</>}
        lede="Every interaction improves the next model. Observe, learn, retrain — automatically."
        tags={['Signals','Edits','Conversions','Retrain','Auto-deploy']}
        footer="Deployment is where the next version begins."
        visual={<FeedbackMock />}
      />
    </div>
  </div>
);

window.Product = Product;