// frames.jsx — One component per style frame (1920×1080)
// Each frame is wrapped in a <div className="frame ..."> and labeled.

// ════════════════════════════════════════════════════════════
// 01 · COLD OPEN — "charter → code"
// Large, left-aligned with a caret cursor. Terminal-prompt energy
// but on cream paper, NOT a green terminal — the title still
// belongs to the human side of the world.
// ════════════════════════════════════════════════════════════
function FrameColdOpen() {
  return (
    <div className="frame frame--cream">
      <div className="frame-tag">01 · Cold open  ·  0:00–0:08</div>

      <div style={{
        position: 'absolute',
        left: 200, top: 440,
        fontFamily: 'var(--font-mono)',
        fontSize: 188,
        fontWeight: 700,
        color: 'var(--ink)',
        letterSpacing: '-0.01em',
        lineHeight: 1,
        zIndex: 2,
        display: 'flex',
        alignItems: 'center',
      }}>
        <span style={{ color: 'var(--ink)' }}>charter</span>
        <span style={{ color: 'var(--orange-hot)', margin: '0 36px', display: 'inline-block', transform: 'translateY(-6px)' }}>→</span>
        <span style={{ color: 'var(--ink)' }}>code</span>
        <span style={{
          display: 'inline-block',
          width: 76, height: 156,
          background: 'var(--ink)',
          marginLeft: 24,
          animation: 'caret-blink 1s steps(2,end) infinite',
        }} />
      </div>

      {/* tiny prompt-style preface above */}
      <div style={{
        position: 'absolute',
        left: 204, top: 380,
        fontFamily: 'var(--font-mono)',
        fontSize: 26,
        color: 'var(--ink-faint)',
        letterSpacing: '0.16em',
        textTransform: 'uppercase',
      }}>
        ~ a method for building software with claude
      </div>
    </div>
  );
}

// ════════════════════════════════════════════════════════════
// 02 · THE HOOK — single line + 6 pulsing circles
// ════════════════════════════════════════════════════════════
function FrameHook() {
  return (
    <div className="frame frame--cream">
      <div className="frame-tag">02 · The hook  ·  0:08–0:20</div>

      {/* Six paper sheets fanned across the screen */}
      <div style={{
        position: 'absolute',
        top: 280, left: 0, right: 0,
        display: 'flex', justifyContent: 'center',
        gap: 28,
      }}>
        {[
          { kind: 'paper', title: 'CHARTER', sub: 'why' },
          { kind: 'paper', title: 'BRD',     sub: 'what' },
          { kind: 'paper', title: 'FFD',     sub: 'how' },
          { kind: 'paper', title: 'MAPS',    sub: 'flow' },
          { kind: 'term',  title: 'CODE',    sub: 'build' },
          { kind: 'paper', title: 'UAT',     sub: 'verify' },
        ].map((s, i) => {
          const rot = (i - 2.5) * 1.6;
          const isTerm = s.kind === 'term';
          return (
            <div key={i} style={{
              width: 220, height: 300,
              transform: `rotate(${rot}deg) translateY(${Math.abs(i - 2.5) * 6}px)`,
              background: isTerm ? 'var(--term-bg)' : 'var(--cream-base)',
              border: `1.5px solid ${isTerm ? 'rgba(0,255,0,0.45)' : 'var(--cream-rule)'}`,
              boxShadow: '0 18px 40px -16px rgba(80,60,30,0.22)',
              padding: '28px 22px',
              fontFamily: 'var(--font-mono)',
              position: 'relative',
            }}>
              <div style={{
                fontSize: 14,
                color: isTerm ? 'rgba(0,255,0,0.5)' : 'var(--ink-faint)',
                letterSpacing: '0.18em',
              }}>0{i + 1}</div>
              <div style={{
                marginTop: 14,
                fontSize: 30, fontWeight: 700,
                color: isTerm ? 'var(--term-green)' : 'var(--orange)',
                letterSpacing: '0.06em',
              }}>{s.title}</div>
              <div style={{
                marginTop: 8,
                fontFamily: 'var(--font-serif)', fontStyle: 'italic',
                fontSize: 18,
                color: isTerm ? 'rgba(0,255,0,0.7)' : 'var(--ink-soft)',
              }}>{s.sub}</div>
              {/* fake content lines */}
              <div style={{ position: 'absolute', left: 22, right: 22, bottom: 28 }}>
                {[0, 1, 2, 3].map(k => (
                  <div key={k} style={{
                    height: 4, marginBottom: 10,
                    background: isTerm ? 'rgba(0,255,0,0.3)' : 'var(--cream-rule)',
                    width: `${[100, 80, 92, 60][k]}%`,
                  }} />
                ))}
              </div>
            </div>
          );
        })}
      </div>

      <div style={{
        position: 'absolute',
        top: 130, left: '50%', transform: 'translateX(-50%)',
        fontFamily: 'var(--font-mono)',
        fontSize: 56, fontWeight: 700,
        color: 'var(--ink)',
        letterSpacing: '-0.005em',
        textAlign: 'center',
      }}>
        Six artifacts. <span style={{ color: 'var(--orange)' }}>One method.</span>
      </div>
      <div style={{
        position: 'absolute',
        top: 220, left: '50%', transform: 'translateX(-50%)',
        fontFamily: 'var(--font-serif)', fontStyle: 'italic',
        fontSize: 28, color: 'var(--ink-soft)',
      }}>
        Each one a document. Each one feeds the next.
      </div>

      <Caption>Using Claude is easier than you think — if you follow a process.</Caption>
    </div>
  );
}

// ════════════════════════════════════════════════════════════
// 03 · THE PIPELINE REVEAL — six labeled phases + legend + loops
// ════════════════════════════════════════════════════════════
function FramePipeline() {
  return (
    <div className="frame frame--cream">
      <div className="frame-tag">03 · Pipeline reveal  ·  0:20–0:40</div>

      <div style={{
        position: 'absolute', top: 80, left: 96,
        fontFamily: 'var(--font-mono)',
        fontSize: 22,
        color: 'var(--ink-faint)',
        textTransform: 'uppercase',
        letterSpacing: '0.18em',
      }}>The pipeline</div>

      <PipelineHero />

      <Caption>Six steps. Three evaluation loops. One working app.</Caption>
    </div>
  );
}

// ════════════════════════════════════════════════════════════
// 04 · PHASE 1 INTRO — Notebook hero
// ════════════════════════════════════════════════════════════
function FrameCharterIntro() {
  return (
    <div className="frame frame--cream">
      <div className="frame-tag">04 · Charter intro  ·  0:40–0:50</div>

      <PipelineBar active={0} />

      <div style={{ position: 'absolute', top: 168, left: '50%', transform: 'translateX(-50%)' }}>
        <Notebook width={1280} height={780}>
          <NotebookHeader>HDF · Loan Portal · Project Notebook</NotebookHeader>

          <div style={{ marginTop: 80 }}>
            <PhaseHeader num="01" title="Project Charter" who="😍 Human only" big />
          </div>

          <div style={{
            position: 'absolute', bottom: 80, left: 80, right: 80,
            fontFamily: 'var(--font-serif)',
            fontSize: 28, fontStyle: 'italic',
            color: 'var(--ink-soft)', lineHeight: 1.5,
          }}>
            The charter answers one question:{' '}
            <span style={{ color: 'var(--orange)', fontStyle: 'normal', fontFamily: 'var(--font-mono)' }}>
              why are we building this?
            </span>
            <br />
            You write this yourself.
          </div>
        </Notebook>
      </div>

      <Caption>Phase 1 — The Charter. This one is all you.</Caption>
    </div>
  );
}

// ════════════════════════════════════════════════════════════
// 05 · PHASE 1 — full charter page (problem + goal + VOC)
// ════════════════════════════════════════════════════════════
function FrameCharterFull() {
  return (
    <div className="frame frame--cream">
      <div className="frame-tag">05 · Charter (full page)  ·  0:50–1:32</div>

      <PipelineBar active={0} />

      <div style={{ position: 'absolute', top: 116, left: '50%', transform: 'translateX(-50%)' }}>
        <Notebook width={1480} height={920}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
            <NotebookHeader>HDF · Loan Portal Charter</NotebookHeader>
            <span className="tag">😍 Human</span>
          </div>

          {/* PROBLEM STATEMENT */}
          <SectionHead hint="What's the pain?">Problem Statement</SectionHead>
          <div style={{
            fontFamily: 'var(--font-serif)',
            fontSize: 26, lineHeight: 1.5,
            color: 'var(--ink)',
            marginBottom: 36,
            maxWidth: 1180,
          }}>
            Brokers run on a 60-day escrow clock. Every day of uncertainty is a day closer to a failed deal.
          </div>

          {/* GOAL */}
          <SectionHead hint="What does success look like?">Goal Statement</SectionHead>
          <div style={{
            fontFamily: 'var(--font-serif)',
            fontSize: 26, lineHeight: 1.5,
            color: 'var(--ink)',
            marginBottom: 32,
            maxWidth: 1180,
          }}>
            <strong style={{ color: 'var(--orange)', fontFamily: 'var(--font-mono)', fontStyle: 'normal' }}>Speed to Terms</strong>
            {' — '}
            deliver a credible term summary to the borrower as fast as possible.
          </div>

          {/* VOC */}
          <SectionHead hint="What do users actually say?">Voice of Customer</SectionHead>
          <div style={{ display: 'flex', gap: 24, marginTop: 8 }}>
            {[
              "I don't want to be asked for the same thing twice.",
              "Why did you go dark on me?",
              "Who has the ball right now?",
            ].map((q, i) => (
              <div key={i} className="quote-card" style={{ flex: 1, paddingTop: 30 }}>
                <span className="qmark">“</span>
                {q}
              </div>
            ))}
          </div>
        </Notebook>
      </div>

      <Caption>Real quotes from real users. These become features.</Caption>
    </div>
  );
}

// ════════════════════════════════════════════════════════════
// 06 · PHASE 1 — Avatars + handoff
// ════════════════════════════════════════════════════════════
function StickFigure({ stroke = 'var(--ink)' }) {
  return (
    <svg viewBox="0 0 100 140" width="100" height="140">
      {/* head */}
      <circle cx="50" cy="22" r="14" fill="none" stroke={stroke} strokeWidth="3" />
      {/* body */}
      <line x1="50" y1="36" x2="50" y2="92" stroke={stroke} strokeWidth="3" strokeLinecap="round" />
      {/* arms */}
      <line x1="50" y1="52" x2="22" y2="74" stroke={stroke} strokeWidth="3" strokeLinecap="round" />
      <line x1="50" y1="52" x2="78" y2="74" stroke={stroke} strokeWidth="3" strokeLinecap="round" />
      {/* legs */}
      <line x1="50" y1="92" x2="32" y2="128" stroke={stroke} strokeWidth="3" strokeLinecap="round" />
      <line x1="50" y1="92" x2="68" y2="128" stroke={stroke} strokeWidth="3" strokeLinecap="round" />
    </svg>
  );
}

function FrameCharterAvatars() {
  const facets = [
    { k: 'Role',         v: 'Commercial loan broker' },
    { k: 'Goal',         v: 'Close deals before escrow expires' },
    { k: 'Frustration',  v: 'Repeated doc requests, silent processes' },
    { k: 'Day-in-life',  v: '60+ emails, 3 portals, 2 phones' },
    { k: 'Tech comfort', v: 'Medium — uses CRM but not code' },
    { k: 'Wants',        v: 'One place to see status' },
  ];
  return (
    <div className="frame frame--cream">
      <div className="frame-tag">06 · Avatars + user stories  ·  1:24–1:40</div>
      <PipelineBar active={0} />

      <div style={{ position: 'absolute', top: 100, left: '50%', transform: 'translateX(-50%)' }}>
        <Notebook width={1620} height={920}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
            <NotebookHeader>HDF · Loan Portal Charter</NotebookHeader>
            <span className="tag">😍 Human</span>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '440px 1fr', gap: 60 }}>
            {/* LEFT — Avatar with facets */}
            <div>
              <SectionHead hint="Who specifically?">Avatar</SectionHead>
              <div style={{ display: 'flex', alignItems: 'center', gap: 22, marginBottom: 22 }}>
                <StickFigure />
                <div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 36, fontWeight: 700, color: 'var(--ink)' }}>Mike</div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 16, color: 'var(--orange)', textTransform: 'uppercase', letterSpacing: '0.14em', marginTop: 2 }}>The Broker</div>
                </div>
              </div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 17, lineHeight: 1.7 }}>
                {facets.map(f => (
                  <div key={f.k} style={{ display: 'grid', gridTemplateColumns: '140px 1fr', borderBottom: '1px dashed var(--cream-rule)', padding: '8px 0' }}>
                    <span style={{ color: 'var(--orange)', textTransform: 'uppercase', letterSpacing: '0.1em', fontSize: 13 }}>{f.k}</span>
                    <span style={{ color: 'var(--ink)' }}>{f.v}</span>
                  </div>
                ))}
              </div>
              <div style={{ marginTop: 18, fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 19, color: 'var(--ink-faint)' }}>
                + David (CIO), Sarah (Underwriter) get the same treatment.
              </div>
            </div>

            {/* RIGHT — User Story anatomy */}
            <div>
              <SectionHead hint="How does Mike's day get better?">User Story</SectionHead>
              <div style={{
                background: 'var(--cream-panel)', borderLeft: '3px solid var(--orange)',
                padding: '24px 28px', fontFamily: 'var(--font-serif)', fontSize: 24, lineHeight: 1.55, color: 'var(--ink)',
              }}>
                <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--orange)', textTransform: 'uppercase', fontSize: 15, letterSpacing: '0.14em', display: 'block', marginBottom: 4 }}>As a…</span>
                broker (Mike)
                <br /><br />
                <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--orange)', textTransform: 'uppercase', fontSize: 15, letterSpacing: '0.14em', display: 'block', marginBottom: 4 }}>I want…</span>
                one place to drop a deal, see what's missing, and watch it move
                <br /><br />
                <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--orange)', textTransform: 'uppercase', fontSize: 15, letterSpacing: '0.14em', display: 'block', marginBottom: 4 }}>So that…</span>
                I never have to call and ask "where are we?" again.
              </div>
              <div style={{ marginTop: 24, fontFamily: 'var(--font-mono)', fontSize: 16, color: 'var(--ink-soft)', lineHeight: 1.7 }}>
                <div style={{ color: 'var(--orange)', textTransform: 'uppercase', letterSpacing: '0.14em', fontSize: 13, marginBottom: 8 }}>Each story includes</div>
                <div>· Acceptance criteria — the testable yes/no list</div>
                <div>· Edge cases — what breaks the happy path</div>
                <div>· Priority — must / should / could</div>
                <div>· Trace back to the avatar that needs it</div>
              </div>
            </div>
          </div>
        </Notebook>
      </div>

      <Caption>Real people. Real stories. Every later requirement traces back here.</Caption>
    </div>
  );
}

// ════════════════════════════════════════════════════════════
// 07 · BRD — handoff: split notebook ↘ terminal
// ════════════════════════════════════════════════════════════
function FrameBRDHandoff() {
  return (
    <div className="frame frame--cream">
      <div className="frame-tag">07 · Charter → BRD handoff  ·  1:40–1:50</div>
      <PipelineBar active={1} />

      {/* LEFT — full charter (all sections) */}
      <div style={{ position: 'absolute', top: 100, left: 60 }}>
        <Notebook width={840} height={920} ribbon={false} style={{ transform: 'rotate(-1.2deg)' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 16, color: 'var(--ink-faint)', textTransform: 'uppercase', letterSpacing: '0.14em' }}>
              Charter · v1.0 · Final
            </div>
            <span className="tag">😍</span>
          </div>
          <div style={{ marginTop: 12, fontFamily: 'var(--font-mono)', fontSize: 15, lineHeight: 1.55, color: 'var(--ink)' }}>
            <CharterSection label="PROBLEM">
              Brokers run on a 60-day escrow clock. Every day of uncertainty is a day closer to a failed deal.
            </CharterSection>
            <CharterSection label="GOAL">
              Speed to Terms — credible term summary to the borrower as fast as possible.
            </CharterSection>
            <CharterSection label="VOC">
              "Don't ask twice." · "Why did you go dark?" · "Who has the ball?"
            </CharterSection>
            <CharterSection label="AVATARS">
              Mike (broker) · David (CIO) · Sarah (underwriter) — each w/ goals + frustrations
            </CharterSection>
            <CharterSection label="USER STORIES">
              As Mike, I want one place to drop a deal, see what's missing, watch it move — so I never call to ask "where are we?".
              <br />As David, I want a QVP scoresheet — so bad deals never reach terms.
              <br />As Sarah, I want missing-doc auto-flags — so I stop hunting.
            </CharterSection>
            <CharterSection label="SCOPE">
              In: intake, QVP, terms send. Out: closing/funding ops.
            </CharterSection>
            <CharterSection label="SUCCESS METRIC">
              Time-to-terms median &lt; 5 business days.
            </CharterSection>
          </div>
        </Notebook>
      </div>

      {/* arrow handoff */}
      <div style={{
        position: 'absolute', top: 530, left: 920,
        fontFamily: 'var(--font-mono)', fontSize: 80, color: 'var(--orange-hot)', zIndex: 5,
      }}>→</div>

      {/* RIGHT — terminal with explicit "use this charter to make a BRD" prompt */}
      <div style={{ position: 'absolute', top: 124, right: 56 }}>
        <Terminal width={880} height={880} title="claude · ba mode · turn 1">
          <div style={{ fontSize: 22, lineHeight: 1.5 }}>
            <div className="dim" style={{ fontSize: 14, textTransform: 'uppercase', letterSpacing: '0.14em', marginBottom: 14 }}>↑ attached: charter-v1.0.md</div>
            <div className="prompt">You are a senior business analyst.</div>
            <div className="prompt" style={{ marginTop: 14 }}>Use this charter to write a BRD.</div>
            <div style={{ marginTop: 18, color: 'var(--term-green-dim)', paddingLeft: 14 }}>· Pull every requirement from the</div>
            <div style={{ color: 'var(--term-green-dim)', paddingLeft: 14 }}>  user stories &amp; goal statement.</div>
            <div style={{ color: 'var(--term-green-dim)', paddingLeft: 14 }}>· Number each one (FR-001, FR-002…)</div>
            <div style={{ color: 'var(--term-green-dim)', paddingLeft: 14 }}>· Each follows: "The system shall…"</div>
            <div style={{ color: 'var(--term-green-dim)', paddingLeft: 14 }}>· Each must be testable + traceable</div>
            <div style={{ color: 'var(--term-green-dim)', paddingLeft: 14 }}>  back to the charter.</div>
            <div style={{ marginTop: 22 }} className="prompt"><span className="term-block-cursor" /></div>
          </div>
        </Terminal>
      </div>

      <Caption terminal>Phase 2 — Hand the charter to Claude. Ask for a BRD.</Caption>
    </div>
  );
}

function CharterSection({ label, children }) {
  return (
    <div style={{ marginBottom: 12 }}>
      <div style={{ color: 'var(--orange)', fontFamily: 'var(--font-mono)', fontSize: 13, letterSpacing: '0.14em', fontWeight: 700 }}>{label}</div>
      <div style={{ fontFamily: 'var(--font-serif)', fontSize: 17, color: 'var(--ink)', lineHeight: 1.45, marginTop: 2 }}>{children}</div>
    </div>
  );
}

// ════════════════════════════════════════════════════════════
// 08 · BRD — Claude generating (terminal full bleed)
// ════════════════════════════════════════════════════════════
function FrameBRDGenerating() {
  return (
    <div className="frame frame--terminal">
      <div className="frame-tag frame-tag--terminal">08 · BRD generating  ·  1:50–2:00</div>
      <PipelineBar active={1} />

      <div style={{ position: 'absolute', top: 144, left: 96, right: 96 }}>
        <Terminal width={1728} height={780} title="claude · drafting brd · streaming"
          style={{ boxShadow: '0 0 0 1px rgba(0,255,0,0.12), 0 30px 80px rgba(0,255,0,0.06)' }}>
          <div className="prompt dim">drafting numbered BRD ...</div>
          <div style={{ marginTop: 18 }}>
            <div><span className="amber">FR-001</span>: The system shall capture property identification.</div>
            <div><span className="amber">FR-001a</span>: The property address shall be normalized to USPS format.</div>
            <div><span className="amber">FR-001b</span>: The property type shall be classified (multifamily / mixed-use).</div>
            <div><span className="amber">FR-014</span>: The system shall route incomplete docs to the broker queue.</div>
            <div><span className="amber">FR-018a</span>: The portal shall provide an automated QVP scoresheet.</div>
            <div><span className="amber">FR-022</span>: The system shall transition deal state on broker submit.</div>
            <div><span className="amber">FR-041</span>: The CIO shall review every deal above $5M before terms send.</div>
            <div><span className="amber">FR-062</span>: The AI Underwriter shall calculate DSCR and LTV.</div>
            <div className="dim">  ...</div>
            <div><span className="amber">FR-089</span>: Audit logs shall persist 7 years.</div>
            <div style={{ marginTop: 18 }} className="prompt">
              <span className="term-block-cursor" />
            </div>
          </div>
        </Terminal>
      </div>

      {/* What a BRD requirement IS, callout */}
      <div style={{
        position: 'absolute',
        bottom: 200, left: 96, right: 96,
        background: 'rgba(0,0,0,0.6)',
        border: '1px solid rgba(0,255,0,0.35)',
        padding: '20px 28px',
        fontFamily: 'var(--font-mono)',
        color: 'var(--term-green)',
        zIndex: 10,
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32,
      }}>
        <div>
          <div style={{ fontSize: 14, color: 'var(--term-amber)', textTransform: 'uppercase', letterSpacing: '0.14em' }}>Numbered</div>
          <div style={{ fontSize: 18, marginTop: 6, color: 'var(--term-green-dim)' }}>FR-001, FR-002… every requirement has a stable id you can point to.</div>
        </div>
        <div>
          <div style={{ fontSize: 14, color: 'var(--term-amber)', textTransform: 'uppercase', letterSpacing: '0.14em' }}>Testable</div>
          <div style={{ fontSize: 18, marginTop: 6, color: 'var(--term-green-dim)' }}>"The system shall…" — pass/fail, not opinion. Becomes UAT later.</div>
        </div>
        <div>
          <div style={{ fontSize: 14, color: 'var(--term-amber)', textTransform: 'uppercase', letterSpacing: '0.14em' }}>Traceable</div>
          <div style={{ fontSize: 18, marginTop: 6, color: 'var(--term-green-dim)' }}>Links back to the charter; later FFD &amp; code link forward to it.</div>
        </div>
      </div>

      <Caption terminal>Numbered. Testable. Traceable. This is what a BRD is for.</Caption>
    </div>
  );
}

// ════════════════════════════════════════════════════════════
// 09 · EVALUATION LOOP — three-card cycle
// ════════════════════════════════════════════════════════════
function FrameEvalLoop() {
  return (
    <div className="frame frame--cream">
      <div className="frame-tag">09 · Evaluation loop  ·  2:00–2:15</div>
      <PipelineBar active={1} />

      {/* loop badge */}
      <div style={{
        position: 'absolute',
        top: 132, left: '50%', transform: 'translateX(-50%)',
        fontFamily: 'var(--font-mono)',
        fontSize: 22,
        color: 'var(--orange)',
        letterSpacing: '0.14em',
        textTransform: 'uppercase',
      }}>
        ↻ Eval loop · how Claude grades its own work
      </div>

      {/* three cards in a row + arrow back */}
      <div style={{ position: 'absolute', top: 240, left: 96, right: 96, height: 600 }}>
        <svg width="1728" height="600" style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>
          {/* arrows between cards */}
          <defs>
            <marker id="ah" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="9" markerHeight="9" orient="auto-start-reverse">
              <path d="M 0 0 L 10 5 L 0 10 z" fill="var(--orange)" />
            </marker>
          </defs>
          <line x1="540" y1="240" x2="610" y2="240" stroke="var(--orange)" strokeWidth="3" markerEnd="url(#ah)" />
          <line x1="1118" y1="240" x2="1188" y2="240" stroke="var(--orange)" strokeWidth="3" markerEnd="url(#ah)" />
          {/* big curved return arrow underneath */}
          <path
            d="M 1456 460 C 1456 580, 240 580, 240 460"
            stroke="var(--orange)" strokeWidth="3" fill="none"
            markerEnd="url(#ah)"
          />
          <text x="848" y="568" fontFamily="var(--font-mono)" fontSize="20" fill="var(--orange)" textAnchor="middle">
            refined doc
          </text>
        </svg>

        {/* CARD 1 — BRD */}
        <EvalCard top={80} left={56} title="BRD v1.0" badge="DRAFT">
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 16, lineHeight: 1.7, color: 'var(--ink-soft)' }}>
            <div>FR-001 The system shall...</div>
            <div>FR-014 ... timely notice ...</div>
            <div>FR-022 ... state transition ...</div>
            <div className="dim" style={{ color: 'var(--ink-faint)' }}>+ 86 more</div>
          </div>
        </EvalCard>

        {/* CARD 2 — fresh eval chat */}
        <EvalCard top={80} left={624} title="New chat · eval protocol" badge="🤖 FRESH" terminal>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 16, lineHeight: 1.7 }}>
            <div className="prompt" style={{ color: 'var(--term-green)' }}>You are a senior reviewer.</div>
            <div style={{ color: 'var(--term-green-dim)' }}>Score each requirement against</div>
            <div style={{ color: 'var(--term-green-dim)' }}>the BRD evaluation rubric.</div>
            <div style={{ marginTop: 8, color: 'var(--term-green)' }}>↑ paste BRD v1.0</div>
          </div>
        </EvalCard>

        {/* CARD 3 — findings */}
        <EvalCard top={80} left={1192} title="Findings · 3 issues" badge="REVIEW">
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 17, lineHeight: 1.7 }}>
            <div style={{ color: 'var(--error-red)' }}>✗ FR-014 — ambiguous: define "timely"</div>
            <div style={{ color: 'var(--error-red)' }}>✗ FR-022 — missing state transition</div>
            <div style={{ color: 'var(--success-green)', marginTop: 10 }}>✓ 87/89 pass</div>
          </div>
        </EvalCard>
      </div>

      <Caption>Open a fresh chat. Let Claude grade its own work.</Caption>
    </div>
  );
}

function EvalCard({ top, left, title, badge, children, terminal }) {
  const isTerm = !!terminal;
  return (
    <div style={{
      position: 'absolute',
      top, left, width: 480, height: 320,
      background: isTerm ? 'var(--term-bg)' : 'var(--cream-base)',
      border: `1px solid ${isTerm ? 'rgba(0,255,0,0.4)' : 'var(--cream-rule)'}`,
      borderRadius: 6,
      boxShadow: '0 12px 30px -12px rgba(80,60,30,0.18)',
      overflow: 'hidden',
    }}>
      <div style={{
        height: 44,
        background: isTerm ? '#0F0F0F' : 'var(--cream-panel)',
        borderBottom: `1px solid ${isTerm ? 'rgba(0,255,0,0.18)' : 'var(--cream-rule)'}`,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '0 18px',
        fontFamily: 'var(--font-mono)',
        fontSize: 14,
        textTransform: 'uppercase',
        letterSpacing: '0.14em',
        color: isTerm ? 'rgba(0,255,0,0.7)' : 'var(--ink-faint)',
      }}>
        <span>{title}</span>
        <span className={'tag ' + (isTerm ? 'tag--terminal' : 'tag--orange')} style={{ fontSize: 12, padding: '4px 8px' }}>{badge}</span>
      </div>
      <div style={{ padding: 22, height: 276, position: 'relative' }}>
        {isTerm && (
          <div style={{
            position: 'absolute', inset: 0, pointerEvents: 'none',
            background: 'repeating-linear-gradient(to bottom, transparent 0, transparent 2px, rgba(0,0,0,0.18) 3px, rgba(0,0,0,0.18) 3px)',
            mixBlendMode: 'multiply',
          }} />
        )}
        {children}
      </div>
    </div>
  );
}

// ════════════════════════════════════════════════════════════
// 10 · BRD FINAL — typography-only ✓ FINAL
// ════════════════════════════════════════════════════════════
function FrameFinalStamp() {
  return (
    <div className="frame frame--cream">
      <div className="frame-tag">10 · BRD final  ·  2:15–2:20</div>
      <PipelineBar active={1} />

      <div style={{ position: 'absolute', top: 144, left: '50%', transform: 'translateX(-50%)' }}>
        <Notebook width={1280} height={860}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
            <NotebookHeader>BRD · v1.4</NotebookHeader>
            <span className="tag">😍+🤖</span>
          </div>

          <PhaseHeader num="02" title="Business Requirements" who="89 numbered, testable requirements" />

          <div style={{ marginTop: 48, fontFamily: 'var(--font-mono)', fontSize: 18, color: 'var(--ink-soft)', lineHeight: 1.9, maxWidth: 1080 }}>
            <div><span style={{ color: 'var(--orange)' }}>FR-001</span> The system shall capture property identification.</div>
            <div><span style={{ color: 'var(--orange)' }}>FR-014</span> The system shall send timely notice when documents are missing <em style={{ color: 'var(--ink-faint)' }}>(SLA: 4h)</em>.</div>
            <div><span style={{ color: 'var(--orange)' }}>FR-022</span> The deal state shall transition: DRAFT → QVP_PASSED → TAP_TERMS_SENT.</div>
            <div><span style={{ color: 'var(--orange)' }}>FR-062</span> The AI Underwriter shall calculate DSCR and LTV from inputs.</div>
            <div className="dim" style={{ color: 'var(--ink-faint)' }}>  + 85 more</div>
          </div>

          <div style={{
            position: 'absolute',
            bottom: 80, left: 80, right: 80,
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          }}>
            <FinalMark label="BRD v1.4 — FINAL" size={56} />
            <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--ink-faint)', fontSize: 18 }}>89/89 ↻ eval pass</span>
          </div>
        </Notebook>
      </div>

      <Caption>Fix what the eval flagged. Lock it down.</Caption>
    </div>
  );
}

// ════════════════════════════════════════════════════════════
// 11 · BRD → eval → FFD transition (the loop in motion)
// ════════════════════════════════════════════════════════════
function FrameBRDtoFFD() {
  return (
    <div className="frame frame--cream">
      <div className="frame-tag">11 · BRD → eval loop → FFD  ·  2:20–2:35</div>
      <PipelineBar active={2} />

      <div style={{
        position: 'absolute', top: 116, left: 0, right: 0, textAlign: 'center',
        fontFamily: 'var(--font-mono)', fontSize: 22, color: 'var(--ink-faint)',
        textTransform: 'uppercase', letterSpacing: '0.18em',
      }}>The same pattern. Every phase.</div>

      {/* Three docs in a row with eval loops between */}
      <div style={{ position: 'absolute', top: 230, left: 96, right: 96, height: 620 }}>
        <svg width="1728" height="620" style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>
          <defs>
            <marker id="flow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="9" markerHeight="9" orient="auto-start-reverse">
              <path d="M 0 0 L 10 5 L 0 10 z" fill="var(--orange)" />
            </marker>
          </defs>
          {/* BRD → eval (eval cycle) → FFD */}
          <line x1="480" y1="260" x2="640" y2="260" stroke="var(--orange)" strokeWidth="3" markerEnd="url(#flow)" />
          <line x1="1080" y1="260" x2="1240" y2="260" stroke="var(--orange)" strokeWidth="3" markerEnd="url(#flow)" />
          {/* circular eval loop in the middle */}
          <path d="M 920 260 A 80 80 0 1 1 760 260" stroke="var(--orange)" strokeWidth="3" fill="none" markerEnd="url(#flow)" />
          <text x="840" y="160" fontFamily="var(--font-mono)" fontSize="20" fill="var(--orange)" textAnchor="middle" letterSpacing="1.2">↻ EVAL LOOP</text>
          <text x="840" y="186" fontFamily="var(--font-mono)" fontSize="15" fill="var(--ink-faint)" textAnchor="middle">fresh chat · review · refine</text>
        </svg>

        {/* BRD doc card */}
        <DocCard left={56} top={120} title="BRD v1.4 — FINAL" badge="WHAT" lines={['FR-001 The system shall…', 'FR-014 …timely notice…', 'FR-022 …state transition…', '+ 86 more']} />
        {/* eval pill */}
        <div style={{
          position: 'absolute', left: 760, top: 200,
          width: 160, height: 160, borderRadius: '50%',
          border: '3px solid var(--orange)',
          background: 'var(--cream-panel)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontFamily: 'var(--font-mono)', color: 'var(--orange)',
          textAlign: 'center', fontSize: 18, fontWeight: 700, letterSpacing: '0.08em',
        }}>
          PASS<br/>87 / 89
        </div>
        {/* FFD doc card */}
        <DocCard left={1240} top={120} title="FFD v1.0 — DRAFT" badge="HOW" lines={['FF-001a screen + form spec', 'FF-001b validation rules', 'FF-001c API contract', '… 1 requirement → ~3 features']} />
      </div>

      <div style={{
        position: 'absolute', bottom: 200, left: 0, right: 0, textAlign: 'center',
        fontFamily: 'var(--font-serif)', fontStyle: 'italic',
        fontSize: 26, color: 'var(--ink-soft)',
      }}>
        Each requirement fans out into ~3 buildable features. Then evaluated again.
      </div>

      <Caption>Phase 3 — FFD. One requirement becomes many features. Same eval loop.</Caption>
    </div>
  );
}

function DocCard({ left, top, title, badge, lines }) {
  return (
    <div style={{
      position: 'absolute', left, top, width: 480, height: 280,
      background: 'var(--cream-base)', border: '1.5px solid var(--cream-rule)',
      borderRadius: 6, boxShadow: '0 16px 36px -16px rgba(80,60,30,0.22)',
      overflow: 'hidden',
    }}>
      <div style={{
        height: 48, padding: '0 18px',
        background: 'var(--cream-panel)',
        borderBottom: '1px solid var(--cream-rule)',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        fontFamily: 'var(--font-mono)', fontSize: 14,
        textTransform: 'uppercase', letterSpacing: '0.14em',
        color: 'var(--ink-faint)',
      }}>
        <span>{title}</span>
        <span className="tag tag--orange" style={{ fontSize: 12, padding: '4px 10px' }}>{badge}</span>
      </div>
      <div style={{ padding: '20px 22px', fontFamily: 'var(--font-mono)', fontSize: 17, lineHeight: 1.8, color: 'var(--ink)' }}>
        {lines.map((l, i) => <div key={i}>{l}</div>)}
      </div>
    </div>
  );
}

// ════════════════════════════════════════════════════════════
// 11b · PHASE 4 — Process Maps swim lanes
function FrameProcessMaps() {
  return (
    <div className="frame frame--cream">
      <div className="frame-tag">11 · Process Maps  ·  2:45–3:10</div>
      <PipelineBar active={3} />

      <div style={{ position: 'absolute', top: 124, left: '50%', transform: 'translateX(-50%)' }}>
        <Notebook width={1640} height={900}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
            <NotebookHeader>Process Maps · Deal Intake → Terms</NotebookHeader>
            <span className="tag">😍+🤖</span>
          </div>

          <PhaseHeader num="04" title="Process Maps" who="Every state. Every transition. Every decision point." />

          <SwimLanes />
        </Notebook>
      </div>

      <Caption>Phase 4 — Process Maps. How does the app actually flow?</Caption>
    </div>
  );
}

function SwimLanes() {
  // Three lanes × five state boxes
  const lanes = ['Broker', 'System', 'CIO'];
  const states = [
    { lane: 0, label: 'DRAFT' },
    { lane: 1, label: 'QVP_IN_PROGRESS' },
    { lane: 1, label: 'QVP_PASSED' },
    { lane: 2, label: 'CIO_REVIEW' },
    { lane: 1, label: 'TAP_TERMS_SENT' },
  ];
  const W = 1480;
  const H = 460;
  const laneH = H / 3;
  const colW = W / 5;

  return (
    <div style={{ position: 'relative', width: W, height: H, marginTop: 32 }}>
      <svg width={W} height={H} style={{ position: 'absolute', inset: 0 }}>
        {/* lane separators */}
        {lanes.map((_, i) => (
          <line key={i} x1="0" y1={(i + 1) * laneH} x2={W} y2={(i + 1) * laneH}
            stroke="var(--cream-rule)" strokeWidth="1" />
        ))}
        {/* connectors */}
        {states.slice(0, -1).map((s, i) => {
          const next = states[i + 1];
          const x1 = i * colW + colW - 30;
          const y1 = s.lane * laneH + laneH / 2;
          const x2 = (i + 1) * colW + 30;
          const y2 = next.lane * laneH + laneH / 2;
          return (
            <path key={i}
              d={`M ${x1} ${y1} C ${x1 + 60} ${y1}, ${x2 - 60} ${y2}, ${x2} ${y2}`}
              stroke="var(--ink-faint)" strokeWidth="2" fill="none" />
          );
        })}
      </svg>

      {/* lane labels */}
      {lanes.map((l, i) => (
        <div key={l} style={{
          position: 'absolute', left: -8, top: i * laneH + laneH / 2 - 14,
          fontFamily: 'var(--font-mono)',
          textTransform: 'uppercase', letterSpacing: '0.14em',
          fontSize: 18, color: 'var(--ink-faint)',
          background: 'var(--cream-base)',
          padding: '4px 12px',
          border: '1px solid var(--cream-rule)',
          borderRadius: 4,
        }}>{l}</div>
      ))}

      {/* state boxes */}
      {states.map((s, i) => (
        <div key={i} style={{
          position: 'absolute',
          left: i * colW + 30,
          top: s.lane * laneH + laneH / 2 - 30,
          width: colW - 60, height: 60,
          background: 'var(--orange)',
          color: '#FFF8EE',
          fontFamily: 'var(--font-mono)',
          fontSize: 18, fontWeight: 700,
          letterSpacing: '0.06em',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          borderRadius: 4,
          boxShadow: '0 4px 14px rgba(184,92,56,0.32)',
        }}>{s.label}</div>
      ))}
    </div>
  );
}

// ════════════════════════════════════════════════════════════
// 12 · PHASE 5 — Code (terminal-dominant)
// ════════════════════════════════════════════════════════════
function FrameCodePhase() {
  return (
    <div className="frame frame--terminal">
      <div className="frame-tag frame-tag--terminal">12 · Phase 5 · Code · activate the artifacts  ·  3:10–3:35</div>
      <PipelineBar active={4} />

      {/* TOP STRIP — the 4 finalized artifacts feeding into Claude Code */}
      <div style={{ position: 'absolute', top: 100, left: 96, right: 96 }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 14, color: 'rgba(0,255,0,0.6)', letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: 10 }}>
          context loaded into claude code
        </div>
        <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
          {['CHARTER', 'BRD', 'FFD', 'MAPS'].map((a) => (
            <div key={a} style={{
              padding: '12px 20px',
              background: 'rgba(0,255,0,0.06)',
              border: '1px solid rgba(0,255,0,0.4)',
              fontFamily: 'var(--font-mono)', fontSize: 22,
              color: 'var(--term-green)', letterSpacing: '0.1em', fontWeight: 700,
              borderRadius: 4,
            }}>
              <span style={{ color: 'var(--term-amber)' }}>↑</span>&nbsp; {a}.md
            </div>
          ))}
          <div style={{ flex: 1, height: 2, background: 'rgba(0,255,0,0.4)', position: 'relative' }}>
            <div style={{ position: 'absolute', right: -1, top: -8, width: 0, height: 0, borderLeft: '14px solid var(--term-green)', borderTop: '9px solid transparent', borderBottom: '9px solid transparent' }} />
          </div>
          <div style={{ fontFamily: 'var(--font-mono)', color: 'var(--term-green)', fontSize: 20, letterSpacing: '0.08em' }}>
            CLAUDE CODE
          </div>
        </div>
      </div>

      <div style={{ position: 'absolute', top: 230, left: 96, right: 96, display: 'flex', gap: 32 }}>
        <Terminal width={1080} height={760} title="claude code · plan · file 6 of 38">
          <div style={{ fontSize: 21, lineHeight: 1.55 }}>
            <div className="prompt">PROJECT: HDF Loan Doc Intake Portal</div>
            <div className="dim" style={{ paddingLeft: 18 }}>STACK: Next.js + PostgreSQL + Claude API</div>
            <div style={{ marginTop: 14 }} className="prompt">CONTEXT (from artifacts):</div>
            <div className="dim" style={{ paddingLeft: 18 }}>- charter.md → goal: Speed to Terms</div>
            <div className="dim" style={{ paddingLeft: 18 }}>- brd.md → FR-062 (DSCR/LTV calc)</div>
            <div className="dim" style={{ paddingLeft: 18 }}>- ffd.md → FF-062a/b/c spec</div>
            <div className="dim" style={{ paddingLeft: 18 }}>- maps.md → state QVP_PASSED</div>
            <div style={{ marginTop: 14 }} className="prompt">WHAT TO BUILD NOW:</div>
            <div className="dim" style={{ paddingLeft: 18 }}>File 6: src/app/api/deals/ai/start/route.ts</div>
            <div className="dim" style={{ paddingLeft: 18 }}>- Build inputs from matrix config</div>
            <div className="dim" style={{ paddingLeft: 18 }}>- Store matrixSnapshot in AiScoreRecord</div>
            <div style={{ marginTop: 14 }} className="prompt">CRITICAL CONSTRAINTS:</div>
            <div className="amber" style={{ paddingLeft: 18 }}>- Prisma v5 pinned — do not upgrade</div>
            <div className="amber" style={{ paddingLeft: 18 }}>- Do not modify FFD-locked routes</div>
            <div style={{ marginTop: 14 }} className="prompt"><span className="term-block-cursor" /></div>
          </div>
        </Terminal>

        <div style={{ flex: 1, color: 'var(--term-green)', fontFamily: 'var(--font-mono)', fontSize: 22, lineHeight: 1.7 }}>
          <div style={{ color: 'var(--term-green-dim)', textTransform: 'uppercase', letterSpacing: '0.14em', fontSize: 16, marginBottom: 14 }}>
            files written
          </div>
          {['auth.ts','intake-form.tsx','qvp-workspace.tsx','ai-underwriter.ts','deals/route.ts','documents/route.ts','matrix/score.ts','tap/sender.ts'].map((f) => (
            <div key={f}><span style={{ color: 'var(--success-green)' }}>✓</span>&nbsp;&nbsp;{f}</div>
          ))}
          <div style={{ color: 'var(--term-green-dim)', marginTop: 8 }}>+ 22 more routes</div>
          <div style={{
            marginTop: 36, fontSize: 26, color: 'var(--term-amber)',
            border: '1px solid rgba(255,176,0,0.4)',
            padding: '16px 22px', background: 'rgba(255,176,0,0.06)', borderRadius: 6,
          }}>
            <div style={{ color: 'var(--term-green-dim)', fontSize: 14, textTransform: 'uppercase', letterSpacing: '0.14em', marginBottom: 6 }}>
              elapsed
            </div>
            Day 1 · Day 2 · Day 3 · <span style={{ fontWeight: 700 }}>Day 4</span>
          </div>
        </div>
      </div>

      <Caption terminal>Activate every artifact. You don't write code — you provide context.</Caption>
    </div>
  );
}

// ════════════════════════════════════════════════════════════
// 13 · PHASE 6 — UAT test script
// ════════════════════════════════════════════════════════════
function FrameUAT() {
  return (
    <div className="frame frame--cream">
      <div className="frame-tag">13 · Phase 6 · UAT  ·  3:35–3:50</div>
      <PipelineBar active={5} />

      <div style={{ position: 'absolute', top: 124, left: '50%', transform: 'translateX(-50%)' }}>
        <Notebook width={1280} height={900}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
            <NotebookHeader>UAT · Test Script</NotebookHeader>
            <span className="tag">😍 Human</span>
          </div>

          <PhaseHeader num="06" title="User Acceptance Testing" who="Walk through as every user. Find what the method missed." />

          <div style={{ marginTop: 48, fontFamily: 'var(--font-mono)', fontSize: 24, lineHeight: 2 }}>
            {[
              { n: 1, label: 'Broker submits a deal',     pass: true  },
              { n: 2, label: 'CIO reviews QVP',            pass: true  },
              { n: 3, label: 'Terms alignment',            pass: true  },
              { n: 4, label: 'AI Underwriter',             pass: false, note: 'hallucinated loan amount' },
              { n: 5, label: 'Hard minimum violation',     pass: true  },
            ].map((t) => (
              <div key={t.n} style={{ display: 'flex', alignItems: 'center', gap: 24, color: 'var(--ink)' }}>
                <span style={{ width: 80, color: 'var(--ink-faint)' }}>TEST {String(t.n).padStart(2, '0')}</span>
                <span style={{ flex: 1 }}>{t.label}</span>
                <span style={{ color: t.pass ? 'var(--success-green)' : 'var(--error-red)', fontSize: 28, fontWeight: 700 }}>
                  {t.pass ? '✓' : '✗'}
                </span>
                <span style={{ width: 320, fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 20, color: 'var(--ink-faint)' }}>
                  {t.note ? `— ${t.note}` : ''}
                </span>
              </div>
            ))}
          </div>

          <div style={{ position: 'absolute', bottom: 76, left: 80, right: 80, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <span style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', color: 'var(--ink-soft)', fontSize: 22 }}>
              Test 4 → fix in code → re-run → ✓
            </span>
            <FinalMark label="SHIPPED" size={42} />
          </div>
        </Notebook>
      </div>

      <Caption>Phase 6 — UAT. Find what the method missed. Fix it.</Caption>
    </div>
  );
}

// ════════════════════════════════════════════════════════════
// 14 · XKCD COMIC — 4 panels
// ════════════════════════════════════════════════════════════
function FrameXKCD() {
  return (
    <div className="frame frame--cream">
      <div className="frame-tag">14 · XKCD close (panels 1–4)  ·  3:50–4:08</div>

      <div style={{
        position: 'absolute',
        top: 80, left: '50%', transform: 'translateX(-50%)',
        fontFamily: 'var(--font-hand)', fontSize: 56,
        color: 'var(--ink)',
      }}>same AI. better process.</div>

      <div style={{
        position: 'absolute',
        top: 220, left: 96, right: 96,
        display: 'grid',
        gridTemplateColumns: 'repeat(4, 1fr)',
        gap: 36,
      }}>
        <ComicPanel n="1" caption='"Claude, build me an app."'>
          <ComicScene scene="ask" />
        </ComicPanel>
        <ComicPanel n="2" caption='Garbage in, garbage out.'>
          <ComicScene scene="chaos" />
        </ComicPanel>
        <ComicPanel n="3" caption='With a charter, BRD, FFD, maps...'>
          <ComicScene scene="handoff" />
        </ComicPanel>
        <ComicPanel n="4" caption='Working app. Calm coffee.'>
          <ComicScene scene="win" />
        </ComicPanel>
      </div>

      <div style={{
        position: 'absolute',
        bottom: 64, left: '50%', transform: 'translateX(-50%)',
        fontFamily: 'var(--font-hand)', fontSize: 42,
        color: 'var(--ink-soft)',
        fontStyle: 'italic',
      }}>"The computer hasn't changed. You did."</div>
    </div>
  );
}

function ComicPanel({ n, caption, children }) {
  return (
    <div className="comic-panel" style={{ height: 600, display: 'flex', flexDirection: 'column' }}>
      <div style={{ flex: 1, position: 'relative', overflow: 'hidden' }}>{children}</div>
      <div style={{
        borderTop: '2px solid var(--ink)',
        padding: '14px 18px',
        textAlign: 'center',
        background: 'var(--cream-base)',
      }}>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 16, color: 'var(--ink-faint)', marginRight: 10 }}>0{n}</span>
        <span className="comic-caption" style={{ fontSize: 28 }}>{caption}</span>
      </div>
    </div>
  );
}

// Hand-drawn-feeling SVG vignettes for each panel
function ComicScene({ scene }) {
  const ink = 'var(--ink)';
  const sw = 3;
  const cap = 'round';
  if (scene === 'ask') {
    return (
      <svg viewBox="0 0 400 480" width="100%" height="100%">
        {/* desk */}
        <line x1="40" y1="380" x2="360" y2="380" stroke={ink} strokeWidth={sw} strokeLinecap={cap} />
        {/* monitor */}
        <rect x="120" y="180" width="200" height="140" fill="none" stroke={ink} strokeWidth={sw} />
        <line x1="220" y1="320" x2="220" y2="360" stroke={ink} strokeWidth={sw} />
        <line x1="180" y1="380" x2="260" y2="380" stroke={ink} strokeWidth={sw} />
        {/* claude prompt on screen */}
        <text x="135" y="220" fontFamily="var(--font-hand)" fontSize="22" fill={ink}>Claude,</text>
        <text x="135" y="248" fontFamily="var(--font-hand)" fontSize="22" fill={ink}>build me</text>
        <text x="135" y="276" fontFamily="var(--font-hand)" fontSize="22" fill={ink}>an app.</text>
        {/* stick figure */}
        <circle cx="60" cy="240" r="18" fill="none" stroke={ink} strokeWidth={sw} />
        <line x1="60" y1="258" x2="60" y2="320" stroke={ink} strokeWidth={sw} strokeLinecap={cap} />
        <line x1="60" y1="280" x2="100" y2="290" stroke={ink} strokeWidth={sw} strokeLinecap={cap} />
        <line x1="60" y1="280" x2="32" y2="296" stroke={ink} strokeWidth={sw} strokeLinecap={cap} />
        <line x1="60" y1="320" x2="44" y2="380" stroke={ink} strokeWidth={sw} strokeLinecap={cap} />
        <line x1="60" y1="320" x2="76" y2="380" stroke={ink} strokeWidth={sw} strokeLinecap={cap} />
        {/* thought bubble: gleaming app */}
        <ellipse cx="290" cy="100" rx="80" ry="48" fill="none" stroke={ink} strokeWidth={sw} />
        <circle cx="220" cy="150" r="6" fill="none" stroke={ink} strokeWidth={sw} />
        <circle cx="200" cy="170" r="3" fill="none" stroke={ink} strokeWidth={sw} />
        <text x="248" y="96" fontFamily="var(--font-hand)" fontSize="22" fill={ink}>my dream</text>
        <text x="252" y="120" fontFamily="var(--font-hand)" fontSize="22" fill={ink}>app ✨</text>
      </svg>
    );
  }
  if (scene === 'chaos') {
    return (
      <svg viewBox="0 0 400 480" width="100%" height="100%">
        <line x1="40" y1="380" x2="360" y2="380" stroke={ink} strokeWidth={sw} strokeLinecap={cap} />
        <rect x="120" y="180" width="200" height="140" fill="none" stroke={ink} strokeWidth={sw} />
        <line x1="220" y1="320" x2="220" y2="360" stroke={ink} strokeWidth={sw} />
        <line x1="180" y1="380" x2="260" y2="380" stroke={ink} strokeWidth={sw} />
        {/* chaos lines coming off screen */}
        {[20, 50, 80, 110, 150].map((a, i) => (
          <line key={i}
            x1={220 - 30 + i * 12} y1="180"
            x2={220 + Math.cos(a) * 70} y2={170 - Math.sin(a) * 70}
            stroke={ink} strokeWidth={sw} strokeLinecap={cap} />
        ))}
        {/* error junk */}
        <text x="130" y="220" fontFamily="var(--font-mono)" fontSize="14" fill={ink}>{'{err: undefined}'}</text>
        <text x="135" y="248" fontFamily="var(--font-mono)" fontSize="14" fill={ink}>NaN NaN NaN</text>
        <text x="138" y="276" fontFamily="var(--font-mono)" fontSize="14" fill={ink}>404 ??? 500</text>
        {/* stick figure with hair up */}
        <circle cx="60" cy="240" r="18" fill="none" stroke={ink} strokeWidth={sw} />
        <line x1="50" y1="222" x2="46" y2="208" stroke={ink} strokeWidth={sw} strokeLinecap={cap} />
        <line x1="60" y1="220" x2="60" y2="200" stroke={ink} strokeWidth={sw} strokeLinecap={cap} />
        <line x1="70" y1="222" x2="74" y2="208" stroke={ink} strokeWidth={sw} strokeLinecap={cap} />
        {/* eyes - little x */}
        <text x="48" y="244" fontFamily="var(--font-hand)" fontSize="20" fill={ink}>x  x</text>
        <line x1="60" y1="258" x2="60" y2="320" stroke={ink} strokeWidth={sw} strokeLinecap={cap} />
        <line x1="60" y1="278" x2="32" y2="262" stroke={ink} strokeWidth={sw} strokeLinecap={cap} />
        <line x1="60" y1="278" x2="100" y2="262" stroke={ink} strokeWidth={sw} strokeLinecap={cap} />
        <line x1="60" y1="320" x2="44" y2="380" stroke={ink} strokeWidth={sw} strokeLinecap={cap} />
        <line x1="60" y1="320" x2="76" y2="380" stroke={ink} strokeWidth={sw} strokeLinecap={cap} />
      </svg>
    );
  }
  if (scene === 'handoff') {
    return (
      <svg viewBox="0 0 400 480" width="100%" height="100%">
        <line x1="40" y1="380" x2="360" y2="380" stroke={ink} strokeWidth={sw} strokeLinecap={cap} />
        <rect x="200" y="200" width="160" height="120" fill="none" stroke={ink} strokeWidth={sw} />
        <line x1="280" y1="320" x2="280" y2="360" stroke={ink} strokeWidth={sw} />
        <line x1="240" y1="380" x2="320" y2="380" stroke={ink} strokeWidth={sw} />
        {/* stick figure holding stack of papers */}
        <circle cx="80" cy="220" r="18" fill="none" stroke={ink} strokeWidth={sw} />
        <line x1="80" y1="238" x2="80" y2="320" stroke={ink} strokeWidth={sw} strokeLinecap={cap} />
        {/* arms holding stack out */}
        <line x1="80" y1="260" x2="120" y2="270" stroke={ink} strokeWidth={sw} strokeLinecap={cap} />
        <line x1="80" y1="260" x2="56" y2="276" stroke={ink} strokeWidth={sw} strokeLinecap={cap} />
        <line x1="80" y1="320" x2="64" y2="380" stroke={ink} strokeWidth={sw} strokeLinecap={cap} />
        <line x1="80" y1="320" x2="96" y2="380" stroke={ink} strokeWidth={sw} strokeLinecap={cap} />
        {/* paper stack with labels */}
        <rect x="118" y="244" width="78" height="14" fill="none" stroke={ink} strokeWidth={2} />
        <rect x="120" y="258" width="78" height="14" fill="none" stroke={ink} strokeWidth={2} />
        <rect x="118" y="272" width="78" height="14" fill="none" stroke={ink} strokeWidth={2} />
        <rect x="120" y="286" width="78" height="14" fill="none" stroke={ink} strokeWidth={2} />
        <text x="124" y="255" fontFamily="var(--font-mono)" fontSize="9" fill={ink}>CHARTER</text>
        <text x="126" y="269" fontFamily="var(--font-mono)" fontSize="9" fill={ink}>BRD</text>
        <text x="124" y="283" fontFamily="var(--font-mono)" fontSize="9" fill={ink}>FFD</text>
        <text x="126" y="297" fontFamily="var(--font-mono)" fontSize="9" fill={ink}>MAPS</text>
        {/* arrow into computer */}
        <line x1="200" y1="270" x2="195" y2="262" stroke={ink} strokeWidth={sw} strokeLinecap={cap} />
        <line x1="200" y1="270" x2="195" y2="278" stroke={ink} strokeWidth={sw} strokeLinecap={cap} />
      </svg>
    );
  }
  if (scene === 'win') {
    return (
      <svg viewBox="0 0 400 480" width="100%" height="100%">
        <line x1="40" y1="380" x2="360" y2="380" stroke={ink} strokeWidth={sw} strokeLinecap={cap} />
        <rect x="200" y="200" width="160" height="120" fill="none" stroke={ink} strokeWidth={sw} />
        <line x1="280" y1="320" x2="280" y2="360" stroke={ink} strokeWidth={sw} />
        <line x1="240" y1="380" x2="320" y2="380" stroke={ink} strokeWidth={sw} />
        {/* tidy app inside screen */}
        <line x1="210" y1="215" x2="350" y2="215" stroke={ink} strokeWidth={2} />
        <rect x="212" y="225" width="60" height="36" fill="none" stroke={ink} strokeWidth={2} />
        <rect x="278" y="225" width="60" height="36" fill="none" stroke={ink} strokeWidth={2} />
        <rect x="212" y="270" width="126" height="14" fill="none" stroke={ink} strokeWidth={2} />
        <rect x="212" y="290" width="126" height="14" fill="none" stroke={ink} strokeWidth={2} />
        {/* stick figure with coffee */}
        <circle cx="80" cy="240" r="18" fill="none" stroke={ink} strokeWidth={sw} />
        {/* smile */}
        <path d="M 70 244 Q 80 252, 90 244" fill="none" stroke={ink} strokeWidth={2} strokeLinecap={cap} />
        <line x1="80" y1="258" x2="80" y2="320" stroke={ink} strokeWidth={sw} strokeLinecap={cap} />
        {/* arm holding coffee mug */}
        <line x1="80" y1="280" x2="116" y2="262" stroke={ink} strokeWidth={sw} strokeLinecap={cap} />
        <rect x="112" y="248" width="20" height="18" fill="none" stroke={ink} strokeWidth={2} />
        <path d="M 132 252 Q 142 256, 132 264" fill="none" stroke={ink} strokeWidth={2} />
        {/* steam */}
        <path d="M 116 240 Q 120 232, 116 224 Q 112 216, 116 208" fill="none" stroke={ink} strokeWidth={1.5} />
        <path d="M 124 240 Q 128 232, 124 224" fill="none" stroke={ink} strokeWidth={1.5} />
        {/* other arm */}
        <line x1="80" y1="280" x2="56" y2="296" stroke={ink} strokeWidth={sw} strokeLinecap={cap} />
        <line x1="80" y1="320" x2="64" y2="380" stroke={ink} strokeWidth={sw} strokeLinecap={cap} />
        <line x1="80" y1="320" x2="96" y2="380" stroke={ink} strokeWidth={sw} strokeLinecap={cap} />
      </svg>
    );
  }
  return null;
}

// ════════════════════════════════════════════════════════════
// 15 · END CARD — URL + logo
// ════════════════════════════════════════════════════════════
function FrameEndCard() {
  return (
    <div className="frame frame--cream">
      <div className="frame-tag">15 · End card  ·  4:08–4:10</div>

      <div style={{
        position: 'absolute',
        top: '50%', left: '50%', transform: 'translate(-50%, -50%)',
        textAlign: 'center',
      }}>
        <div style={{
          fontFamily: 'var(--font-mono)', fontSize: 30,
          color: 'var(--ink-faint)',
          textTransform: 'uppercase', letterSpacing: '0.18em',
          marginBottom: 36,
        }}>~ a method for building software with claude</div>

        <div style={{
          fontFamily: 'var(--font-mono)', fontSize: 140, fontWeight: 700,
          color: 'var(--ink)', letterSpacing: '-0.01em', lineHeight: 1,
        }}>
          charter <span style={{ color: 'var(--orange-hot)' }}>→</span> code
        </div>

        <div style={{
          marginTop: 80,
          fontFamily: 'var(--font-mono)', fontSize: 36,
          color: 'var(--orange)',
          letterSpacing: '0.04em',
        }}>charter-to-code.vercel.app</div>

        <div style={{
          marginTop: 28,
          width: 240, height: 1,
          background: 'var(--cream-rule)',
          margin: '28px auto 0',
        }} />
      </div>
    </div>
  );
}

// expose all frames
Object.assign(window, {
  FrameColdOpen, FrameHook, FramePipeline,
  FrameCharterIntro, FrameCharterFull, FrameCharterAvatars,
  FrameBRDHandoff, FrameBRDGenerating,
  FrameEvalLoop, FrameFinalStamp, FrameBRDtoFFD,
  FrameProcessMaps, FrameCodePhase, FrameUAT,
  FrameXKCD, FrameEndCard,
});