// Sections 2–4: Live Demo terminal, One-Liner, Use-case cards

// ─── LIVE DEMO ────────────────────────────────────────────────────
function LiveDemo() {
  const script = [
    { t: 0,    k:'user', v:'find fabrications in tuesday\'s time report' },
    { t: 280,  k:'sys',  v:'CR · classify → audit.cross_ref' },
    { t: 520,  k:'sys',  v:'he’s planning · 4 steps · 2 workers · 3 tools' },
    { t: 900,  k:'tool', v:'fs.read("reports/2026-04-14.json") ↳ 47 entries' },
    { t: 1200, k:'tool', v:'excel.open("timesheets.xlsx", sheet="Apr")' },
    { t: 1600, k:'brain',v:'he is cross-referencing 47 × 47 → 44 match, 3 diverge' },
    { t: 2100, k:'out',  v:'↳ 09:15–10:30  "design review"   not on calendar' },
    { t: 2350, k:'out',  v:'↳ 13:00–14:30  "client call"     no meeting record' },
    { t: 2600, k:'out',  v:'↳ 16:00–17:00  "deploy"          no git activity' },
    { t: 3000, k:'brain',v:'confidence 0.89 · he’s logging this as rule #1,429' },
    { t: 3400, k:'sys',  v:'✓ done in 4.2s' },
  ];
  const [elapsed, setElapsed] = React.useState(0);
  const [speed, setSpeed] = React.useState(1);
  const [playing, setPlaying] = React.useState(true);
  const rafRef = React.useRef();
  const lastRef = React.useRef();

  React.useEffect(() => {
    if (!playing) return;
    lastRef.current = performance.now();
    const loop = (now) => {
      const dt = now - lastRef.current; lastRef.current = now;
      setElapsed(e => {
        const next = e + dt * speed;
        const max = script[script.length-1].t + 1200;
        return next > max ? 0 : next; // loop
      });
      rafRef.current = requestAnimationFrame(loop);
    };
    rafRef.current = requestAnimationFrame(loop);
    return () => cancelAnimationFrame(rafRef.current);
  }, [playing, speed]);

  const visible = script.filter(l => l.t <= elapsed);
  const colorOf = { user: FONGOS.cyanSoft, sys: FONGOS.inkDim, tool: FONGOS.inkDim, brain: FONGOS.purpleSoft, out: FONGOS.ink };
  const prefixOf= { user: '›', sys: '·', tool: '→', brain: '◆', out: '  ' };

  return (
    <section id="demo" style={{
      padding: '120px 40px', borderBottom: `1px solid ${FONGOS.line}`, position: 'relative',
    }}>
      <div style={{ maxWidth: 1080, margin: '0 auto' }}>
        <SectionLabel num="02" name="Live demo"/>
        <div className="fg-demo-head" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', gap: 40, marginBottom: 40, flexWrap: 'wrap' }}>
          <Headline size={56}>Watch Fongos work. No cuts. No edits.</Headline>
          <p style={{ fontSize: 14, color: FONGOS.inkDim, maxWidth: 360, margin: 0, lineHeight: 1.55 }}>
            A real session. You speak a task — he classifies, plans, dispatches, runs, lands a result. 4.2 seconds end-to-end.
          </p>
        </div>

        {/* Terminal */}
        <div style={{
          background: 'rgba(10,10,18,0.8)',
          border: `1px solid ${FONGOS.line}`,
          boxShadow: `0 30px 80px rgba(0,0,0,0.5), 0 0 0 1px ${FONGOS.line}`,
          borderRadius: 4, overflow: 'hidden',
        }}>
          {/* Chrome */}
          <div style={{
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            padding: '12px 16px', borderBottom: `1px solid ${FONGOS.line}`,
            fontFamily: FONGOS.mono, fontSize: 10, letterSpacing: '0.18em',
            color: FONGOS.inkFaint, textTransform: 'uppercase',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <span style={{ width: 8, height: 8, borderRadius: '50%', background: FONGOS.cyan, boxShadow: `0 0 8px ${FONGOS.cyan}` }}/>
              session · audit · worker 03
            </div>
            <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
              <span>{(elapsed/1000).toFixed(1)}s / 4.6s</span>
              <div style={{ display: 'flex', gap: 4 }}>
                {[0.5, 1, 2].map(s => (
                  <button key={s} onClick={()=>setSpeed(s)} style={{
                    background: speed===s ? FONGOS.ink : 'transparent',
                    color: speed===s ? FONGOS.bg : FONGOS.inkDim,
                    border: `1px solid ${FONGOS.line}`,
                    fontFamily: FONGOS.mono, fontSize: 10, padding: '3px 7px',
                    cursor: 'pointer', letterSpacing: '0.1em',
                  }}>{s}×</button>
                ))}
              </div>
              <button onClick={()=>setPlaying(p=>!p)} style={{
                background: 'transparent', color: FONGOS.inkDim,
                border: `1px solid ${FONGOS.line}`, fontFamily: FONGOS.mono,
                fontSize: 10, padding: '3px 9px', cursor: 'pointer', letterSpacing: '0.1em',
              }}>{playing ? '❚❚ pause' : '▶ play'}</button>
              <button onClick={()=>setElapsed(0)} style={{
                background: 'transparent', color: FONGOS.inkDim,
                border: `1px solid ${FONGOS.line}`, fontFamily: FONGOS.mono,
                fontSize: 10, padding: '3px 9px', cursor: 'pointer', letterSpacing: '0.1em',
              }}>↻ replay</button>
            </div>
          </div>
          {/* Content */}
          <div style={{
            padding: '24px 28px', fontFamily: FONGOS.mono, fontSize: 13,
            lineHeight: 1.95, minHeight: 360,
          }}>
            {visible.map((l, i) => (
              <div key={i} style={{ display: 'flex', gap: 12, color: colorOf[l.k] }}>
                <span style={{ color: FONGOS.inkFaint, width: 14 }}>{prefixOf[l.k]}</span>
                <span>{l.v}</span>
              </div>
            ))}
            <div style={{ display:'flex', gap: 12, marginTop: 4 }}>
              <span style={{ color: FONGOS.inkFaint }}>›</span>
              <span style={{ width: 8, height: 15, background: FONGOS.ink, animation: 'fongosBlink 1s step-end infinite' }}/>
            </div>
          </div>
        </div>
        <p style={{
          textAlign: 'center', fontFamily: FONGOS.mono, fontSize: 11,
          letterSpacing: '0.2em', color: FONGOS.inkFaint, textTransform: 'uppercase',
          marginTop: 24,
        }}>real log · real timestamps · every tool call visible</p>
      </div>
    </section>
  );
}

// ─── ONE-LINER ────────────────────────────────────────────────────
function OneLiner() {
  const [active, setActive] = React.useState('acts');
  const items = [
    { k: 'watches',   t: 'He watches.',   sub: 'sees what\u2019s on your screen, in real-time', detail: 'He sees every window, every dialog, every change as it happens. Quietly, in the background. He doesn\u2019t store your screen \u2014 he builds a picture of what you\u2019re doing.' },
    { k: 'remembers', t: 'He remembers.', sub: '18,525 conversations persist across sessions', detail: 'Every conversation. Every lesson. Every task, success, and failure. For as long as you want him to. Cross-referenced: he pulls last Tuesday against three weeks ago without being asked.' },
    { k: 'acts',      t: 'He acts.',      sub: 'forms his own goals, runs them, tells you what he did', detail: 'He synthesizes goals without prompting. Dispatches workers. Writes files. Runs code. Opens what you need. You find out he\u2019s already done \u2014 and he\u2019ll undo it if you say so.' },
  ];
  return (
    <section style={{
      padding: '140px 40px', position: 'relative',
      borderBottom: `1px solid ${FONGOS.line}`,
      background: `radial-gradient(ellipse at center, ${FONGOS.purple}0a 0%, transparent 60%)`,
    }}>
      <div style={{ maxWidth: 1080, margin: '0 auto', textAlign: 'center' }}>
        <SectionLabel num="03" name="The premise"/>
        <div className="fg-oneliner" style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', gap: '0 28px' }}>
          {items.map((it, i) => (
            <React.Fragment key={it.k}>
              <span
                onMouseEnter={()=>setActive(it.k)}
                onClick={()=>setActive(it.k)}
                style={{
                  fontSize: 84, fontWeight: 200, letterSpacing: '-0.04em',
                  lineHeight: 1.1, cursor: 'pointer',
                  color: active === it.k ? FONGOS.ink : FONGOS.inkGhost,
                  transition: 'color 0.3s ease',
                  textShadow: active === it.k ? `0 0 40px ${FONGOS.purple}55` : 'none',
                }}
              >{it.t}</span>
            </React.Fragment>
          ))}
        </div>
        {/* Underline marker */}
        <div style={{ height: 28 }}/>
        <div style={{
          maxWidth: 640, margin: '0 auto', minHeight: 110,
          padding: '24px 28px', border: `1px solid ${FONGOS.line}`,
          background: FONGOS.surface, position: 'relative',
        }}>
          <div style={{
            fontFamily: FONGOS.mono, fontSize: 10, letterSpacing: '0.22em',
            color: FONGOS.purpleSoft, textTransform: 'uppercase', marginBottom: 10,
          }}>
            {items.find(x=>x.k===active).sub}
          </div>
          <div style={{ fontSize: 15, color: FONGOS.inkDim, lineHeight: 1.55, textAlign: 'left' }}>
            {items.find(x=>x.k===active).detail}
          </div>
        </div>
        <p style={{ fontFamily: FONGOS.mono, fontSize: 10, letterSpacing: '0.2em', color: FONGOS.inkFaint, marginTop: 20, textTransform: 'uppercase' }}>
          hover or tap a word
        </p>
      </div>
    </section>
  );
}

// ─── USE CASE CARDS ───────────────────────────────────────────────
function UseCases() {
  const cards = [
    {
      tag: 'engineering', t: 'NEMA 23 motor mount in 5 min',
      p: 'Modeled the assembly, ran stress analysis, exported STEP. Fongos classified the task, picked CAD tools, verified the FEA converged.',
      trace: 'trace · 04-11 14:22 · 5m 08s',
      visual: 'cad',
    },
    {
      tag: 'data', t: 'Found 3 fabrications in a time report',
      p: 'Cross-referenced a JSON time log against the Excel source of truth. Flagged entries with no calendar or git evidence. Logged the audit as a reusable rule.',
      trace: 'trace · 04-14 09:15 · 4.2s',
      visual: 'chart',
    },
    {
      tag: 'self-improvement', t: 'Debugged its own eval system',
      p: 'Noticed a regression in its own accuracy metrics. Diagnosed the scoring bug, proposed the patch, wrote the test, waited for approval.',
      trace: 'trace · 04-07 02:34 · 11m',
      visual: 'commit',
    },
    {
      tag: 'research', t: 'First autonomous newsletter',
      p: 'Stitched three conversations and a week of observed work into a 600-word brief. No prompt. Wrote, re-read, revised twice.',
      trace: 'trace · 04-02 07:00 · 2m 14s',
      visual: 'text',
    },
    {
      tag: 'creative', t: 'Redesigned its own web intro',
      p: 'The old intro page shipped a 14-part 3D scene. Fongos observed it crash on mobile, proposed a lighter version, shipped the replacement.',
      trace: 'trace · 04-18 23:11 · 47m',
      visual: 'design',
    },
    {
      tag: 'business', t: 'Runs where you want. $0/mo.',
      p: 'Local by default — fast, private, no API floor. Cloud when you want the ceiling. Fongos decides per task; your data only leaves the box if you tell it to.',
      trace: 'spec · local + optional cloud',
      visual: 'cost',
    },
  ];

  const Thumb = ({ kind }) => {
    const common = { width: '100%', height: 140, background: FONGOS.bg2, borderBottom: `1px solid ${FONGOS.line}`, position: 'relative', overflow: 'hidden' };
    if (kind === 'cad') return (
      <div style={common}>
        <svg viewBox="0 0 200 100" style={{ width:'100%', height:'100%' }}>
          {[...Array(10)].map((_,i) => <line key={i} x1={20+i*16} y1="20" x2={20+i*16} y2="80" stroke={FONGOS.line} strokeWidth="0.5"/>)}
          {[...Array(5)].map((_,i) => <line key={'h'+i} x1="20" y1={20+i*15} x2="180" y2={20+i*15} stroke={FONGOS.line} strokeWidth="0.5"/>)}
          <polygon points="60,30 140,30 150,45 150,75 70,75 50,60 50,45" fill="none" stroke={FONGOS.purpleSoft} strokeWidth="1"/>
          <polygon points="50,45 70,30 140,30 150,45 130,60 50,60" fill={FONGOS.purple} fillOpacity="0.1" stroke={FONGOS.purpleSoft} strokeWidth="1"/>
          <circle cx="75" cy="48" r="5" fill="none" stroke={FONGOS.cyanSoft}/>
          <circle cx="125" cy="48" r="5" fill="none" stroke={FONGOS.cyanSoft}/>
        </svg>
      </div>
    );
    if (kind === 'chart') return (
      <div style={common}>
        <svg viewBox="0 0 200 100" style={{ width:'100%', height:'100%' }}>
          {[...Array(12)].map((_,i) => {
            const h = 15 + ((i*37)%55);
            const flag = i===3 || i===7 || i===10;
            return <rect key={i} x={10+i*15} y={90-h} width="10" height={h} fill={flag ? FONGOS.bad : FONGOS.cyan} opacity={flag?0.9:0.4}/>;
          })}
          <line x1="0" y1="90" x2="200" y2="90" stroke={FONGOS.line}/>
        </svg>
      </div>
    );
    if (kind === 'commit') return (
      <div style={{...common, padding: 16, fontFamily: FONGOS.mono, fontSize: 10, color: FONGOS.inkDim, lineHeight: 1.6 }}>
        <div style={{ color: FONGOS.bad }}>- score = correct / total</div>
        <div style={{ color: FONGOS.good }}>+ score = correct / max(total, 1)</div>
        <div style={{ color: FONGOS.inkFaint, marginTop: 8 }}>@@ eval.py @@</div>
        <div style={{ color: FONGOS.purpleSoft }}>rule #1,387 proposed</div>
        <div style={{ color: FONGOS.inkFaint }}>awaiting review ·</div>
      </div>
    );
    if (kind === 'text') return (
      <div style={{...common, padding: 16 }}>
        {[100,96,88,100,72,100,92,80].map((w,i) => (
          <div key={i} style={{ height: 4, width: `${w}%`, background: i<2 ? FONGOS.ink : FONGOS.inkGhost, marginBottom: 6 }}/>
        ))}
      </div>
    );
    if (kind === 'design') return (
      <div style={common}>
        <svg viewBox="0 0 200 100" style={{ width:'100%', height:'100%' }}>
          <rect x="20" y="15" width="80" height="70" fill="none" stroke={FONGOS.line} strokeDasharray="3 3"/>
          <text x="60" y="55" textAnchor="middle" fontFamily={FONGOS.mono} fontSize="8" fill={FONGOS.inkFaint}>v1 (heavy)</text>
          <text x="105" y="52" fontFamily={FONGOS.mono} fontSize="10" fill={FONGOS.purpleSoft}>→</text>
          <rect x="120" y="15" width="60" height="70" fill="none" stroke={FONGOS.purpleSoft}/>
          <circle cx="150" cy="50" r="12" fill="none" stroke={FONGOS.cyan}/>
          <text x="150" y="80" textAnchor="middle" fontFamily={FONGOS.mono} fontSize="8" fill={FONGOS.cyanSoft}>v2 (light)</text>
        </svg>
      </div>
    );
    if (kind === 'cost') return (
      <div style={{...common, display:'flex', alignItems:'center', justifyContent:'center', flexDirection:'column' }}>
        <div style={{ fontFamily: FONGOS.mono, fontSize: 36, color: FONGOS.ink, fontWeight: 300 }}>$0</div>
        <div style={{ fontFamily: FONGOS.mono, fontSize: 10, letterSpacing: '0.2em', color: FONGOS.inkFaint, textTransform: 'uppercase', marginTop: 6 }}>api floor · month</div>
      </div>
    );
    return <div style={common}/>;
  };

  return (
    <section style={{
      padding: '120px 40px', borderBottom: `1px solid ${FONGOS.line}`,
    }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <SectionLabel num="04" name="What Fongos does"/>
        <Headline size={56} style={{ marginBottom: 56, maxWidth: 700 }}>
          Six things it did this month.<br/>
          <span style={{ color: FONGOS.inkDim }}>Nobody asked it to.</span>
        </Headline>

        <div className="fg-cases" style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1,
          background: FONGOS.line, border: `1px solid ${FONGOS.line}`,
        }}>
          {cards.map((c) => (
            <div key={c.t} style={{
              background: FONGOS.bg, padding: 0, position: 'relative',
              transition: 'background 0.2s ease',
            }} className="fg-case">
              <Thumb kind={c.visual}/>
              <div style={{ padding: '22px 24px 24px' }}>
                <div style={{
                  fontFamily: FONGOS.mono, fontSize: 10, letterSpacing: '0.2em',
                  color: FONGOS.purpleSoft, textTransform: 'uppercase', marginBottom: 12,
                }}>{c.tag}</div>
                <div style={{ fontSize: 20, color: FONGOS.ink, fontWeight: 400, lineHeight: 1.25, letterSpacing: '-0.015em', marginBottom: 12 }}>
                  {c.t}
                </div>
                <p style={{ fontSize: 13.5, color: FONGOS.inkDim, lineHeight: 1.6, margin: '0 0 18px' }}>{c.p}</p>
                <div style={{
                  display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                  fontFamily: FONGOS.mono, fontSize: 10, letterSpacing: '0.12em',
                  color: FONGOS.inkFaint, textTransform: 'uppercase',
                  paddingTop: 14, borderTop: `1px solid ${FONGOS.line}`,
                }}>
                  <span>{c.trace}</span>
                  <span style={{ color: FONGOS.cyanSoft, fontSize: 10, letterSpacing: '0.12em' }}>caught by fongos</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { LiveDemo, OneLiner, UseCases });