// scene-code.jsx — Phase 5 · Code (terminal-dominant + realistic app mock payoff)
// 0–3   pipeline pulse (active=4); top: 4 artifact chips animating into "CLAUDE CODE"
// 3–10  Terminal generates files left, ✓ list builds right, Day ticker advances
// 10–13 Cut/zoom: cream "DAY 4 →" banner
// 13–18 Realistic app mock fades in (dashboard with deal cards)
// 18–22 Brand under app: "Working software."

function SceneCode() {
  return (
    <Timeline duration={26800} sceneId="code" label="Phase 5 — Code">
      <CaptionScene>
        {/* Bg switches: dark for terminal portion, cream for payoff */}
        <CodeBg />

        <PhaseIntroCard
          from={0}
          num="05"
          name="Code"
          who="🤖 Claude Code + 😍 Human"
          tone="terminal"
          summary="Hand all four artifacts to Claude Code. It builds the working app."
        />

        <TimeShift offset={4800}>
          <CodePipelinePulse />
          <CodeArtifactsBar />
          <CodeTerminal />
          <CodeFilesList />
          <CodeAppMock />
          <CodeFinalLine />

          <SceneCaption text="You don't write code. You provide context." from={2000} typeDur={1700} hold={1600} terminal />
          <SceneCaption text="Charter. BRD. FFD. Maps. All loaded." from={5400} typeDur={1500} hold={1500} terminal />
          <SceneCaption text="All four artifacts. One handoff." from={11000} typeDur={1100} hold={1300} />
          <SceneCaption text="Working software." from={18800} typeDur={1100} hold={1900} />
        </TimeShift>
      </CaptionScene>
    </Timeline>
  );
}

function CodeBg() {
  const t = useT();
  // 0..12s terminal, 12.5..22 cream
  const terminalOp = t < 12000 ? 1 : Math.max(0, 1 - (t - 12000) / 600);
  const creamOp = t < 12200 ? 0 : Math.min(1, (t - 12200) / 600);
  return (
    <div className="scene-bg" style={{ position: 'absolute', inset: 0 }}>
      <div className="scene-terminal-bg" style={{ opacity: terminalOp }} />
      <div className="scene-cream-bg" style={{ opacity: creamOp }} />
    </div>
  );
}

function CodePipelinePulse() {
  const t = useT();
  if (t > 3500) return null;
  const op = t < 600 ? t / 600 : (t > 2900 ? 1 - (t - 2900) / 600 : 1);
  return (
    <div style={{ position: 'absolute', top: 36, left: 0, right: 0, opacity: op, zIndex: 5 }}>
      <PipelineBar active={4} />
    </div>
  );
}

function CodeArtifactsBar() {
  const t = useT();
  if (t < 600 || t > 12000) return null;
  const op = t < 1200 ? (t - 600) / 600 : (t > 11500 ? 1 - (t - 11500) / 500 : 1);
  const arts = [
    { name: 'CHARTER', sub: 'problem · goal · users' },
    { name: 'BRD',     sub: '89 FRs · testable' },
    { name: 'FFD',     sub: '247 form-fields' },
    { name: 'MAPS',    sub: 'states · transitions' },
  ];
  return (
    <div style={{
      position: 'absolute', top: 130, left: 0, right: 0,
      opacity: op, zIndex: 4,
      display: 'flex', flexDirection: 'column', alignItems: 'center',
    }}>
      <div style={{
        fontFamily: 'var(--font-mono)', fontSize: 16,
        color: 'rgba(0,255,0,0.5)', letterSpacing: '0.18em',
        textTransform: 'uppercase', marginBottom: 26,
      }}>context loaded into claude code</div>

      <div style={{
        display: 'flex', alignItems: 'stretch', gap: 28,
        width: 1640, justifyContent: 'center',
      }}>
        {/* 4 artifact stack */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: '1fr 1fr',
          gap: 14,
          flex: '0 0 auto',
        }}>
          {arts.map((a, i) => {
            const fromT = 1400 + i * 240;
            if (t < fromT) return null;
            const aop = Math.min(1, (t - fromT) / 280);
            return (
              <div key={a.name} style={{
                width: 320,
                padding: '18px 22px',
                background: 'rgba(0,255,0,0.05)',
                border: '1.5px solid rgba(0,255,0,0.5)',
                borderRadius: 4,
                fontFamily: 'var(--font-mono)',
                opacity: aop,
                transform: `translateX(${(1 - aop) * -16}px)`,
                position: 'relative',
              }}>
                {/* file-tab */}
                <div style={{
                  position: 'absolute', top: -1, left: 18, width: 60, height: 4,
                  background: 'var(--term-amber)',
                }} />
                <div style={{
                  fontSize: 26, color: 'var(--term-green)', letterSpacing: '0.08em',
                  fontWeight: 700,
                }}>{a.name}.md</div>
                <div style={{
                  fontSize: 14, color: 'var(--term-green-dim)',
                  letterSpacing: '0.06em', marginTop: 6,
                }}>{a.sub}</div>
              </div>
            );
          })}
        </div>

        {/* arrow column */}
        <Show from={2600} fadeIn={400}>
          <div style={{
            display: 'flex', flexDirection: 'column', alignItems: 'center',
            justifyContent: 'center', flex: '0 0 auto',
            width: 200,
          }}>
            <div style={{
              fontFamily: 'var(--font-mono)', fontSize: 13,
              color: 'rgba(0,255,0,0.45)',
              letterSpacing: '0.18em', textTransform: 'uppercase',
              marginBottom: 10,
            }}>handoff</div>
            <svg width="180" height="48" style={{ overflow: 'visible' }}>
              <DrawPath
                d="M 0 24 L 160 24"
                from={2600} duration={500}
                stroke="var(--term-green)" strokeWidth="3"
              />
              <DrawPath
                d="M 140 8 L 168 24 L 140 40"
                from={2900} duration={300}
                stroke="var(--term-green)" strokeWidth="3" fill="none"
              />
            </svg>
          </div>
        </Show>

        {/* CLAUDE CODE block */}
        <Show from={3000} fadeIn={400}>
          <div style={{
            flex: '0 0 auto', width: 360,
            padding: '32px 28px',
            background: '#0F0F0F',
            border: '2px solid var(--term-green)',
            borderRadius: 4,
            fontFamily: 'var(--font-mono)',
            color: 'var(--term-green)',
            display: 'flex', flexDirection: 'column',
            alignItems: 'center', justifyContent: 'center',
            boxShadow: '0 0 30px rgba(0,255,0,0.15)',
          }}>
            <div style={{
              fontSize: 14, color: 'var(--term-green-dim)',
              letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: 8,
            }}>$ run</div>
            <div style={{
              fontSize: 36, fontWeight: 700, letterSpacing: '0.06em',
              lineHeight: 1.1, textAlign: 'center',
            }}>CLAUDE CODE</div>
            <div style={{
              fontSize: 14, color: 'var(--term-green-dim)',
              letterSpacing: '0.06em', marginTop: 10, fontStyle: 'italic',
            }}>builds the working app</div>
          </div>
        </Show>
      </div>
    </div>
  );
}

function CodeTerminal() {
  const t = useT();
  if (t < 3500 || t > 12000) return null;
  const op = t < 4000 ? (t - 3500) / 500 : (t > 11500 ? 1 - (t - 11500) / 500 : 1);

  return (
    <div style={{
      position: 'absolute', top: 480, left: 96, width: 1080, bottom: 60,
      background: 'rgba(255,255,255,0.02)',
      border: '1px solid rgba(0,255,0,0.25)',
      borderRadius: 6,
      padding: '32px 36px',
      fontFamily: 'var(--font-mono)',
      color: 'var(--term-green)',
      opacity: op,
    }}>
      <div style={{ fontSize: 14, color: 'var(--term-green-dim)', textTransform: 'uppercase', letterSpacing: '0.18em', marginBottom: 18 }}>
        claude code · plan · file 6 of 38
      </div>

      <div style={{ fontSize: 21, lineHeight: 1.55 }}>
        <Show from={4000}><div className="prompt"><Typewriter text="PROJECT: HDF Loan Doc Intake Portal" from={4000} duration={900} /></div></Show>
        <Show from={4900}><div style={{ color: 'var(--term-green-dim)', paddingLeft: 18 }}><Typewriter text="STACK: Next.js + PostgreSQL + Claude API" from={4900} duration={900} caret={false} /></div></Show>

        <Show from={5800}><div style={{ marginTop: 14 }} className="prompt"><Typewriter text="CONTEXT (from artifacts):" from={5800} duration={700} caret={false} /></div></Show>
        <Show from={6300}><div style={{ color: 'var(--term-green-dim)', paddingLeft: 18 }}>- charter.md → goal: Speed to Terms</div></Show>
        <Show from={6500}><div style={{ color: 'var(--term-green-dim)', paddingLeft: 18 }}>- brd.md → FR-062 (DSCR/LTV calc)</div></Show>
        <Show from={6700}><div style={{ color: 'var(--term-green-dim)', paddingLeft: 18 }}>- ffd.md → FF-062a/b/c spec</div></Show>
        <Show from={6900}><div style={{ color: 'var(--term-green-dim)', paddingLeft: 18 }}>- maps.md → state QVP_PASSED</div></Show>

        <Show from={7600}><div style={{ marginTop: 14 }} className="prompt"><Typewriter text="WHAT TO BUILD NOW:" from={7600} duration={700} caret={false} /></div></Show>
        <Show from={8200}><div style={{ color: 'var(--term-green-dim)', paddingLeft: 18 }}><Typewriter text="File 6: src/app/api/deals/ai/start/route.ts" from={8200} duration={1000} caret={false} /></div></Show>

        <Show from={9400}><div style={{ marginTop: 14 }} className="prompt"><Typewriter text="CRITICAL CONSTRAINTS:" from={9400} duration={700} caret={false} /></div></Show>
        <Show from={10000}><div style={{ color: 'var(--term-amber)', paddingLeft: 18 }}>- Prisma v5 pinned — do not upgrade</div></Show>
        <Show from={10300}><div style={{ color: 'var(--term-amber)', paddingLeft: 18 }}>- Do not modify FFD-locked routes</div></Show>

        <Show from={11000}><div style={{ marginTop: 18 }}><span className="prompt">_</span></div></Show>
      </div>
    </div>
  );
}

function CodeFilesList() {
  const t = useT();
  if (t < 4500 || t > 12000) return null;
  const op = t < 5000 ? (t - 4500) / 500 : (t > 11500 ? 1 - (t - 11500) / 500 : 1);
  const files = ['auth.ts','intake-form.tsx','qvp-workspace.tsx','ai-underwriter.ts','deals/route.ts','documents/route.ts','matrix/score.ts','tap/sender.ts'];
  return (
    <div style={{
      position: 'absolute', top: 480, right: 96, width: 540, bottom: 60,
      padding: '32px 24px',
      fontFamily: 'var(--font-mono)', color: 'var(--term-green)',
      opacity: op,
    }}>
      <div style={{ color: 'var(--term-green-dim)', textTransform: 'uppercase', letterSpacing: '0.14em', fontSize: 16, marginBottom: 18 }}>
        files written
      </div>
      {files.map((f, i) => {
        const fromT = 5400 + i * 450;
        if (t < fromT) return null;
        const fop = Math.min(1, (t - fromT) / 200);
        return (
          <div key={f} style={{ fontSize: 22, lineHeight: 1.7, opacity: fop }}>
            <span style={{ color: 'var(--success-green)' }}>✓</span>&nbsp;&nbsp;{f}
          </div>
        );
      })}
      <Show from={9100}>
        <div style={{ color: 'var(--term-green-dim)', marginTop: 8, fontSize: 18 }}>+ 22 more routes</div>
      </Show>
    </div>
  );
}

function CodeDayTicker() {
  const t = useT();
  if (t < 9600 || t > 12000) return null;
  const op = t < 10000 ? (t - 9600) / 400 : (t > 11500 ? 1 - (t - 11500) / 500 : 1);

  // Days 1..4 light up sequentially
  const days = [
    { from: 9700, label: 'Day 1' },
    { from: 10000, label: 'Day 2' },
    { from: 10300, label: 'Day 3' },
    { from: 10700, label: 'Day 4', highlight: true },
  ];
  return (
    <div style={{
      position: 'absolute', right: 96, bottom: 220, width: 540,
      padding: '20px 24px',
      border: '1px solid rgba(255,176,0,0.45)',
      background: 'rgba(255,176,0,0.06)',
      borderRadius: 6,
      fontFamily: 'var(--font-mono)',
      opacity: op,
    }}>
      <div style={{ color: 'var(--term-green-dim)', fontSize: 14, textTransform: 'uppercase', letterSpacing: '0.14em', marginBottom: 8 }}>
        elapsed
      </div>
      <div style={{ fontSize: 28, color: 'var(--term-amber)' }}>
        {days.map((d, i) => {
          if (t < d.from) return null;
          const dop = Math.min(1, (t - d.from) / 200);
          return (
            <span key={i} style={{
              opacity: dop,
              fontWeight: d.highlight ? 700 : 400,
              color: d.highlight ? '#FFD080' : undefined,
            }}>
              {d.label}{i < days.length - 1 ? ' · ' : ''}
            </span>
          );
        })}
      </div>
    </div>
  );
}

// 12.5–18s — realistic app mock fades in on cream
function CodeAppMock() {
  const t = useT();
  if (t < 12500 || t > 22000) return null;
  const op = t < 13200 ? (t - 12500) / 700 : 1;
  const scale = 0.96 + 0.04 * Math.min(1, (t - 12500) / 1800);

  return (
    <div style={{
      position: 'absolute', inset: 0,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      opacity: op,
    }}>
      <div style={{
        width: 1500, height: 820,
        background: '#FFF',
        border: '1px solid var(--cream-rule)',
        borderRadius: 12,
        boxShadow: '0 40px 100px -36px rgba(80,60,30,0.35), 0 4px 12px rgba(80,60,30,0.08)',
        overflow: 'hidden',
        transform: `scale(${scale})`,
        transformOrigin: 'center',
        display: 'flex',
      }}>
        {/* Sidebar */}
        <div style={{
          width: 240, background: '#1A1A1A', color: '#EEE',
          padding: '28px 22px', fontFamily: 'var(--font-mono)',
        }}>
          <div style={{ fontSize: 18, color: 'var(--orange)', fontWeight: 700, letterSpacing: '0.06em', marginBottom: 32 }}>HDF</div>
          {['Pipeline', 'My Deals', 'Underwriting', 'Terms', 'Settings'].map((it, i) => (
            <div key={it} style={{
              padding: '10px 14px', marginBottom: 4,
              fontSize: 14,
              background: i === 0 ? 'rgba(184,92,56,0.18)' : 'transparent',
              color: i === 0 ? 'var(--orange)' : '#AAA',
              borderRadius: 4,
              fontWeight: i === 0 ? 700 : 400,
            }}>{it}</div>
          ))}
        </div>

        {/* Main */}
        <div style={{ flex: 1, padding: '32px 40px', fontFamily: 'var(--font-serif)' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 28 }}>
            <div>
              <div style={{ fontSize: 13, color: '#888', letterSpacing: '0.12em', textTransform: 'uppercase', fontFamily: 'var(--font-mono)' }}>Pipeline</div>
              <div style={{ fontSize: 32, fontWeight: 700, color: '#222' }}>14 active deals</div>
            </div>
            <div style={{
              padding: '10px 20px', background: 'var(--orange)', color: '#FFF',
              fontFamily: 'var(--font-mono)', fontSize: 14, fontWeight: 700,
              borderRadius: 4, letterSpacing: '0.06em',
            }}>+ NEW DEAL</div>
          </div>

          {/* Stats row */}
          <div style={{ display: 'flex', gap: 16, marginBottom: 28 }}>
            {[
              { k: 'AVG TIME TO TERMS', v: '4.2 hr' },
              { k: 'QVP PASS RATE',     v: '87%' },
              { k: 'AT CIO REVIEW',     v: '3' },
              { k: 'TERMS SENT TODAY',  v: '6' },
            ].map((s) => (
              <div key={s.k} style={{
                flex: 1, padding: '14px 16px',
                border: '1px solid #E8E2D8',
                borderRadius: 6,
                background: '#FBF8F2',
              }}>
                <div style={{ fontSize: 11, color: '#888', letterSpacing: '0.14em', textTransform: 'uppercase', fontFamily: 'var(--font-mono)' }}>{s.k}</div>
                <div style={{ fontSize: 26, fontWeight: 700, color: '#222', marginTop: 4 }}>{s.v}</div>
              </div>
            ))}
          </div>

          {/* Deal table */}
          <div style={{
            border: '1px solid #E8E2D8',
            borderRadius: 6,
            overflow: 'hidden',
          }}>
            <div style={{
              display: 'grid', gridTemplateColumns: '120px 1fr 140px 140px 100px 100px',
              padding: '12px 18px', background: '#FBF8F2',
              fontFamily: 'var(--font-mono)', fontSize: 11,
              color: '#888', letterSpacing: '0.12em', textTransform: 'uppercase',
              fontWeight: 700,
            }}>
              <div>DEAL ID</div><div>BORROWER</div><div>AMOUNT</div><div>STATE</div><div>SCORE</div><div>OWNER</div>
            </div>
            {[
              { id: 'HDF-2241', bw: 'Westgate Holdings LLC',     amt: '$2.4M', st: 'QVP_PASSED',      sc: 'A-',  ow: 'JK', stColor: 'var(--success-green)' },
              { id: 'HDF-2240', bw: 'Riverbend Property Group',   amt: '$1.1M', st: 'CIO_REVIEW',     sc: 'B+',  ow: 'AM', stColor: 'var(--orange)' },
              { id: 'HDF-2239', bw: 'Sunrise Capital Partners',   amt: '$3.8M', st: 'QVP_IN_PROGRESS',sc: '—',   ow: 'JK', stColor: '#888' },
              { id: 'HDF-2238', bw: 'Magnolia Realty',            amt: '$870K', st: 'TAP_TERMS_SENT', sc: 'A',   ow: 'RT', stColor: 'var(--success-green)' },
              { id: 'HDF-2237', bw: 'Beacon Hill Group',          amt: '$1.6M', st: 'DRAFT',          sc: '—',   ow: 'AM', stColor: '#888' },
            ].map((r, i) => (
              <div key={r.id} style={{
                display: 'grid', gridTemplateColumns: '120px 1fr 140px 140px 100px 100px',
                padding: '14px 18px', borderTop: '1px solid #F0EAE0',
                fontFamily: 'var(--font-serif)', fontSize: 16, color: '#333',
                alignItems: 'center',
              }}>
                <div style={{ fontFamily: 'var(--font-mono)', color: '#888', fontSize: 13 }}>{r.id}</div>
                <div>{r.bw}</div>
                <div style={{ fontFamily: 'var(--font-mono)', fontWeight: 700 }}>{r.amt}</div>
                <div style={{
                  fontFamily: 'var(--font-mono)', fontSize: 11,
                  color: r.stColor, fontWeight: 700, letterSpacing: '0.06em',
                }}>{r.st}</div>
                <div style={{ fontFamily: 'var(--font-mono)', fontWeight: 700 }}>{r.sc}</div>
                <div>
                  <span style={{
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    width: 30, height: 30, borderRadius: 30,
                    background: '#E8E2D8', fontSize: 12, fontWeight: 700,
                    color: '#666', fontFamily: 'var(--font-mono)',
                  }}>{r.ow}</span>
                </div>
              </div>
            ))}
          </div>

          {/* Tiny corner badge */}
          <div style={{
            position: 'absolute', bottom: 24, right: 32,
            fontFamily: 'var(--font-mono)', fontSize: 11,
            color: '#999', letterSpacing: '0.12em', textTransform: 'uppercase',
          }}>
            Built by Claude Code
          </div>
        </div>
      </div>
    </div>
  );
}

function CodeFinalLine() {
  // Empty — caption handles it; placeholder for symmetry with other scenes.
  return null;
}

window.SceneCode = SceneCode;