// Fourth Wall — screens
// Each screen is a self-contained component that receives the full app state.
// All inner-style names are unique to avoid global collisions.

// Sample script — shown in S.03 onward
const FW_SCRIPT = [
  { block: 'opening', sec: 6,  text: "Hi, I'm Maya. I saw your posting for the Senior PM role." },
  { block: 'middle',  sec: 9,  text: "I spent the last four years building product — most recently the billing surface at Notion, and before that, the first checkout flow at Square." },
  { block: 'middle',  sec: 8,  text: "I'm drawn to Stripe because the surface area is enormous and the rigor is real." },
  { block: 'middle',  sec: 10, text: "What I'd bring is a habit of writing things down — specs that get used, decisions that get remembered six months later." },
  { block: 'middle',  sec: 9,  text: "I lead with research and ship in small bites. I've broken a few things; I'm careful about why." },
  { block: 'middle',  sec: 11, text: "I'm not the loudest in the room, but I've shipped quietly with a lot of teams who liked working with me." },
  { block: 'close',   sec: 5,  text: "I'd love to talk." },
];

// ───────────────────────── O.04 / L.01 — Home (empty) ─────────────────────────
function ScreenHomeEmpty({ go }) {
  return (
    <div style={{
      height: '100%', background: fwTokens.paper,
      display: 'flex', flexDirection: 'column',
      padding: '64px 28px 40px',
    }}>
      {/* settings cog top-right, dot bottom-right */}
      <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
        <Micro>· · ·</Micro>
      </div>

      {/* logo + name centered, high but not top */}
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', gap: 28, paddingBottom: 40 }}>
        <FWMark size={44} stroke={9} color={fwTokens.ink} />
        <div style={{ textAlign: 'center' }}>
          <div style={{ fontFamily: fwTokens.serif, fontSize: 36, lineHeight: 1, letterSpacing: '-0.005em' }}>
            Fourth&nbsp;<em style={{ color: fwTokens.ink2 }}>Wall</em>
          </div>
        </div>

        <div style={{ textAlign: 'center', maxWidth: 280, marginTop: 16 }}>
          <Serif size={22} italic style={{ color: fwTokens.ink2, lineHeight: 1.25 }}>
            Start with the job you're applying for.
          </Serif>
          <div style={{
            marginTop: 12, color: fwTokens.ink2,
            fontFamily: fwTokens.sans, fontSize: 14.5, lineHeight: 1.55,
          }}>
            We'll build a script, then walk you through it one line at a time.
          </div>
        </div>
      </div>

      <div>
        <button
          onClick={() => go('S01')}
          style={{
            appearance: 'none',
            width: '100%',
            padding: '20px 18px',
            background: 'transparent',
            border: `1px solid ${fwTokens.ink}`,
            color: fwTokens.ink2,
            fontFamily: fwTokens.sans,
            fontSize: 15,
            fontWeight: 400,
            textAlign: 'left',
            cursor: 'pointer',
            display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          }}>
          <span>Paste a job posting</span>
          <span style={{ color: fwTokens.mute, fontSize: 14 }}>↵</span>
        </button>

        <div style={{ textAlign: 'center', marginTop: 22, marginBottom: 8 }}>
          <button onClick={() => go('S01')} style={{
            appearance: 'none', background: 'none', border: 0, cursor: 'pointer',
            fontFamily: fwTokens.sans, fontSize: 13.5,
            color: fwTokens.mute,
            textDecoration: 'underline', textDecorationColor: fwTokens.rule, textUnderlineOffset: 4,
          }}>or try a sample posting</button>
        </div>
      </div>
    </div>
  );
}

// ───────────────────────── S.01 — Paste JD ─────────────────────────
function ScreenPasteJD({ go, jdText, setJdText }) {
  const wordCount = jdText.trim() ? jdText.trim().split(/\s+/).length : 0;
  const sampleJD = "Senior Product Manager — Stripe\n\nStripe is looking for a Senior PM to join the Billing team. You'll partner with engineering, design, and go-to-market to ship the next generation of subscription tooling.\n\nWhat you'll do:\n• Own the roadmap for a high-impact billing surface used by hundreds of thousands of businesses.\n• Write specs that engineering and design can run with.\n• Talk to customers — small startups, mid-market, and enterprise — and turn what you hear into product decisions.\n• Partner with finance, support, and the broader Billing org.\n\nWe're looking for someone with 5+ years of PM experience shipping software products at scale, strong written communication, a calm hand under pressure, and the rigor to dig into a thorny technical area and emerge with an opinion.";
  return (
    <div style={{
      height: '100%', background: fwTokens.paper,
      display: 'flex', flexDirection: 'column',
      padding: '60px 28px 32px',
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>
        <button onClick={() => go('L01')} style={{ appearance: 'none', background: 'none', border: 0, cursor: 'pointer', padding: 0, display: 'flex', alignItems: 'center', gap: 8 }}>
          <ChevronBack />
          <span style={{ fontFamily: fwTokens.sans, fontSize: 14, color: fwTokens.ink }}>Back</span>
        </button>
        <Micro>New video</Micro>
      </div>

      <Serif size={28} style={{ marginTop: 8 }}>Paste the job <em style={{ color: fwTokens.ink2 }}>description.</em></Serif>

      <div style={{ marginTop: 14, color: fwTokens.ink2, fontFamily: fwTokens.sans, fontSize: 14.5, lineHeight: 1.5, maxWidth: 320 }}>
        We'll use this to draft your script. We don't send it anywhere else.
      </div>

      <div style={{ marginTop: 24, flex: 1, display: 'flex', flexDirection: 'column' }}>
        <textarea
          value={jdText}
          onChange={e => setJdText(e.target.value)}
          placeholder="Paste here…"
          style={{
            flex: 1,
            width: '100%',
            minHeight: 220,
            resize: 'none',
            padding: '16px 16px',
            background: fwTokens.paper2,
            border: `1px solid ${fwTokens.rule}`,
            borderRadius: 0,
            color: fwTokens.ink,
            fontFamily: fwTokens.sans,
            fontSize: 14.5,
            lineHeight: 1.55,
            outline: 'none',
          }}
        />
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          marginTop: 8,
        }}>
          <span style={{ fontFamily: fwTokens.mono, fontSize: 11, color: fwTokens.mute }}>
            {wordCount} / ~2000 words
          </span>
          <button
            onClick={() => setJdText(sampleJD)}
            style={{
              appearance: 'none', background: 'none', border: 0, cursor: 'pointer',
              fontFamily: fwTokens.mono, fontSize: 11, letterSpacing: '0.1em',
              textTransform: 'uppercase', color: fwTokens.mute, padding: 0,
            }}>Use sample →</button>
        </div>
      </div>

      <div style={{ marginTop: 20 }}>
        <FilledButton
          disabled={wordCount < 30}
          onClick={() => go('S02')}>
          Draft my script
        </FilledButton>
      </div>
    </div>
  );
}

// ───────────────────────── S.02 — Drafting (box breathing) ─────────────────────────
function ScreenDrafting({ go }) {
  React.useEffect(() => {
    const t = setTimeout(() => go('S03'), 8500);
    return () => clearTimeout(t);
  }, []);
  return (
    <div style={{
      height: '100%', background: fwTokens.paper,
      display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center',
      padding: '60px 32px',
    }}>
      <Micro style={{ marginBottom: 80 }}>Drafting</Micro>
      <BreathingCanvas size={130} light label />
      <div style={{ maxWidth: 280, textAlign: 'center', marginTop: 80 }}>
        <div style={{ fontFamily: fwTokens.sans, fontSize: 14.5, color: fwTokens.ink2, lineHeight: 1.55 }}>
          Reading the posting. Writing a draft you'll edit.
        </div>
      </div>
    </div>
  );
}

// ───────────────────────── S.03 — Script generated ─────────────────────────
function ScreenScript({ go, tone, setTone }) {
  const totalSec = FW_SCRIPT.reduce((a, b) => a + b.sec, 0);
  // Group blocks
  const groups = [
    { label: 'Opening', filter: l => l.block === 'opening' },
    { label: 'Middle',  filter: l => l.block === 'middle' },
    { label: 'Close',   filter: l => l.block === 'close' },
  ];
  return (
    <div style={{
      height: '100%', background: fwTokens.paper,
      display: 'flex', flexDirection: 'column',
    }}>
      {/* top bar */}
      <div style={{ padding: '60px 28px 14px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <button onClick={() => go('S01')} style={{ appearance: 'none', background: 'none', border: 0, cursor: 'pointer', padding: 0 }}>
          <CloseGlyph />
        </button>
        <Micro>Script</Micro>
        <div style={{ width: 14 }} />
      </div>

      <div style={{ flex: 1, overflowY: 'auto', padding: '8px 28px 24px' }}>
        <Serif size={24} style={{ marginBottom: 2 }}>Senior PM <em style={{ color: fwTokens.ink2 }}>· Stripe</em></Serif>

        {/* tone + length controls */}
        <div style={{ marginTop: 22, display: 'grid', gap: 14 }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderBottom: `1px dashed ${fwTokens.rule}`, paddingBottom: 10 }}>
            <Micro>Tone</Micro>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontFamily: fwTokens.serif, fontStyle: 'italic', fontSize: 18, color: fwTokens.ink }}>
              <span>{tone}</span>
              <span style={{ fontSize: 11, color: fwTokens.mute }}>⌄</span>
            </div>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <Micro>Length</Micro>
            <span style={{ fontFamily: fwTokens.mono, fontSize: 13, color: fwTokens.ink2 }}>~ {totalSec}s · 7 lines</span>
          </div>
        </div>

        {/* script blocks */}
        <div style={{ marginTop: 28, display: 'grid', gap: 24 }}>
          {groups.map(g => {
            const lines = FW_SCRIPT.filter(g.filter);
            const sec = lines.reduce((a,b) => a + b.sec, 0);
            return (
              <div key={g.label}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
                  <Micro style={{ color: fwTokens.ink }}>{g.label}</Micro>
                  <div style={{ flex: 1, height: 1, background: fwTokens.rule }} />
                  <span style={{ fontFamily: fwTokens.mono, fontSize: 11, color: fwTokens.mute, letterSpacing: '0.05em' }}>{sec}s</span>
                  <button style={{ appearance: 'none', background: 'none', border: 0, cursor: 'pointer', padding: 0, color: fwTokens.mute, fontFamily: fwTokens.mono, fontSize: 13 }}>↻</button>
                </div>
                <div style={{ display: 'grid', gap: 10 }}>
                  {lines.map((l, i) => {
                    const idx = FW_SCRIPT.indexOf(l);
                    return (
                      <div key={idx} style={{
                        background: fwTokens.paper2,
                        border: `1px solid ${fwTokens.rule}`,
                        padding: '14px 16px',
                      }}>
                        <div style={{
                          fontFamily: fwTokens.serif, fontSize: 18, lineHeight: 1.35, color: fwTokens.ink,
                        }}>{l.text}</div>
                        <div style={{ marginTop: 8, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                          <span style={{ fontFamily: fwTokens.mono, fontSize: 10.5, color: fwTokens.mute, letterSpacing: '0.05em' }}>Line {idx + 1} · {l.sec}s</span>
                          <Micro style={{ color: fwTokens.mute, fontSize: 10 }}>Edit</Micro>
                        </div>
                      </div>
                    );
                  })}
                </div>
              </div>
            );
          })}
        </div>
      </div>

      <div style={{ padding: '16px 28px 32px', borderTop: `1px solid ${fwTokens.rule}`, background: fwTokens.paper }}>
        <FilledButton onClick={() => go('R01')}>Continue to record</FilledButton>
      </div>
    </div>
  );
}

// ───────────────────────── R.01 — Warmup ─────────────────────────
function ScreenWarmup({ go }) {
  const [secs, setSecs] = React.useState(60);
  React.useEffect(() => {
    const id = setInterval(() => setSecs(s => Math.max(0, s - 1)), 1000);
    return () => clearInterval(id);
  }, []);
  React.useEffect(() => {
    if (secs === 0) {
      const t = setTimeout(() => go('R02'), 600);
      return () => clearTimeout(t);
    }
  }, [secs]);
  return (
    <div style={{
      height: '100%', background: fwTokens.ink3,
      color: fwTokens.paper,
      display: 'flex', flexDirection: 'column',
      padding: '60px 32px 40px',
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <Micro color="rgba(253,246,227,0.4)">Warmup · {String(secs).padStart(2,'0')}s</Micro>
        <button onClick={() => go('R02')} style={{
          appearance: 'none', background: 'none', border: 0, cursor: 'pointer',
          fontFamily: fwTokens.sans, fontSize: 13, color: 'rgba(253,246,227,0.4)',
          padding: 0,
        }}>Skip ›</button>
      </div>

      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', gap: 36 }}>
        <BreathingCanvas size={150} color="rgba(253,246,227,0.85)" />
      </div>

      <div style={{ textAlign: 'center', marginBottom: 8 }}>
        <Serif size={22} italic color="rgba(253,246,227,0.85)" style={{ lineHeight: 1.35 }}>
          You don't have to be ready.<br/>You just have to start.
        </Serif>
      </div>
    </div>
  );
}

// ───────────────────────── R.02 — Countdown ─────────────────────────
function ScreenCountdown({ go }) {
  const [n, setN] = React.useState(3);
  React.useEffect(() => {
    if (n === 0) {
      const t = setTimeout(() => go('R03'), 700);
      return () => clearTimeout(t);
    }
    const id = setTimeout(() => setN(x => x - 1), 1000);
    return () => clearTimeout(id);
  }, [n]);
  return (
    <div style={{
      height: '100%', background: fwTokens.ink3,
      color: fwTokens.paper,
      display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center',
      padding: 32,
    }}>
      <Micro color="rgba(253,246,227,0.4)" style={{ marginBottom: 60 }}>Line 1 of 7 · in</Micro>
      <div style={{
        fontFamily: fwTokens.serif,
        fontSize: 220, lineHeight: 1,
        letterSpacing: '-0.02em',
        color: n === 0 ? fwTokens.oxblood : fwTokens.paper,
        transition: 'color 200ms cubic-bezier(0.32,0.72,0,1)',
      }}>{n === 0 ? '·' : n}</div>
      <Micro color="rgba(253,246,227,0.4)" style={{ marginTop: 60 }}>
        {n === 0 ? 'Begin when ready' : 'A soft tone, not a beep'}
      </Micro>
    </div>
  );
}

// ───────────────────────── R.03 — Recording (the screen that decides the app) ─────────────────────────
function ScreenRecord({ go, currentLine, setCurrentLine, lineStates, setLineStates, selfHidden, setSelfHidden, isRecording, setIsRecording, recordSecs, setRecordSecs }) {
  const total = FW_SCRIPT.length;
  const line = FW_SCRIPT[currentLine - 1];
  const prevLine = currentLine > 1 ? FW_SCRIPT[currentLine - 2] : null;
  const nextLine = currentLine < total ? FW_SCRIPT[currentLine] : null;

  React.useEffect(() => {
    if (!isRecording) return;
    const id = setInterval(() => setRecordSecs(s => s + 0.1), 100);
    return () => clearInterval(id);
  }, [isRecording]);

  const onRecord = () => {
    if (!isRecording) {
      setIsRecording(true);
      setRecordSecs(0);
    } else {
      setIsRecording(false);
      // mark line as recorded
      const next = [...lineStates];
      next[currentLine - 1] = 'recorded';
      setLineStates(next);
      go('R04');
    }
  };

  // Self-view canvas: drifting gradient OR a faux preview rectangle
  const SelfView = () => (
    selfHidden ? (
      <div style={{
        width: '100%', aspectRatio: '4/3',
        background: `linear-gradient(135deg, ${fwTokens.oxblood}, ${fwTokens.ink2})`,
        position: 'relative', overflow: 'hidden',
        display: 'grid', placeItems: 'center',
      }}>
        <div style={{
          position: 'absolute', inset: '-20%',
          background: `radial-gradient(circle at var(--x,30%) var(--y,40%), rgba(253,246,227,0.18), transparent 60%)`,
          animation: 'fwDrift 15s ease-in-out infinite',
        }} />
        <div style={{ position: 'relative', zIndex: 2, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12 }}>
          <AudioMeter dark active />
          <Micro color="rgba(253,246,227,0.6)">Mic on. We can hear you.</Micro>
        </div>
      </div>
    ) : (
      <div style={{
        width: '100%', aspectRatio: '4/3',
        background: `linear-gradient(160deg, #2a2520, #1a1714 70%)`,
        position: 'relative', overflow: 'hidden',
      }}>
        {/* faux silhouette */}
        <div style={{
          position: 'absolute', inset: 0,
          background: `radial-gradient(ellipse 35% 45% at 50% 58%, rgba(180,150,130,0.35), transparent 60%),
                       radial-gradient(ellipse 30% 25% at 50% 38%, rgba(200,170,150,0.45), transparent 60%)`,
        }} />
        <div style={{ position: 'absolute', bottom: 10, left: 10 }}>
          <AudioMeter dark active={isRecording} />
        </div>
        {isRecording && (
          <div style={{
            position: 'absolute', top: 12, right: 12,
            display: 'flex', alignItems: 'center', gap: 6,
            fontFamily: fwTokens.mono, fontSize: 11, letterSpacing: '0.1em',
            color: fwTokens.paper, textTransform: 'uppercase',
          }}>
            <span style={{ width: 8, height: 8, background: fwTokens.oxblood, animation: 'fwBlink 1.4s ease-in-out infinite' }} />
            REC {recordSecs.toFixed(1)}s
          </div>
        )}
      </div>
    )
  );

  return (
    <div style={{
      height: '100%', background: fwTokens.ink3, color: fwTokens.paper,
      display: 'flex', flexDirection: 'column',
      padding: '60px 24px 28px',
    }}>
      {/* HUD */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <button onClick={() => go('R06')} style={{ appearance: 'none', background: 'none', border: 0, cursor: 'pointer', padding: 0 }}>
          <CloseGlyph color="rgba(253,246,227,0.65)" />
        </button>
        <Micro color="rgba(253,246,227,0.55)">Line {currentLine} / {total}</Micro>
        <button onClick={() => go('R05')} style={{ appearance: 'none', background: 'none', border: 0, cursor: 'pointer', padding: 0, fontFamily: fwTokens.mono, fontSize: 11, color: 'rgba(253,246,227,0.55)', letterSpacing: '0.1em', textTransform: 'uppercase' }}>Map</button>
      </div>

      {/* hide-self affordance + preview */}
      <div style={{ position: 'relative', marginTop: 18 }}>
        <button onClick={() => setSelfHidden(s => !s)} style={{
          appearance: 'none', background: 'rgba(20,17,14,0.7)',
          border: '0.5px solid rgba(253,246,227,0.2)',
          backdropFilter: 'blur(8px)', WebkitBackdropFilter: 'blur(8px)',
          color: 'rgba(253,246,227,0.85)',
          fontFamily: fwTokens.sans, fontSize: 12,
          padding: '6px 10px', cursor: 'pointer',
          position: 'absolute', top: 10, left: 10, zIndex: 4,
          display: 'inline-flex', alignItems: 'center', gap: 6,
        }}>
          <span style={{ fontSize: 13 }}>{selfHidden ? '◑' : '◐'}</span>
          {selfHidden ? 'show self' : 'hide self'}
        </button>
        <SelfView />
      </div>

      {/* teleprompter — three lines */}
      <div style={{ marginTop: 26, flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 16, padding: '0 4px' }}>
        <div style={{
          fontFamily: fwTokens.serif, fontSize: 15,
          color: 'rgba(253,246,227,0.32)',
          fontStyle: 'italic', lineHeight: 1.35,
          minHeight: 22,
        }}>
          {prevLine ? prevLine.text.slice(-50) + '…' : '—'}
        </div>
        <div style={{
          fontFamily: fwTokens.serif, fontSize: 24,
          color: fwTokens.paper, lineHeight: 1.3,
          fontWeight: 400,
        }}>
          {line.text}
        </div>
        <div style={{
          fontFamily: fwTokens.serif, fontSize: 15,
          color: 'rgba(253,246,227,0.32)',
          fontStyle: 'italic', lineHeight: 1.35,
          minHeight: 22,
        }}>
          {nextLine ? nextLine.text.slice(0, 60) + '…' : '—'}
        </div>
      </div>

      {/* record cluster */}
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14, marginTop: 12 }}>
        <button onClick={onRecord} style={{
          appearance: 'none', border: 0, padding: 0, cursor: 'pointer', background: 'transparent',
        }}>
          <div style={{
            width: 76, height: 76,
            background: fwTokens.oxblood,
            display: 'grid', placeItems: 'center',
            transform: isRecording ? 'scale(0.92)' : 'scale(1)',
            transition: 'transform 80ms cubic-bezier(0.32,0.72,0,1)',
            position: 'relative',
          }}>
            {isRecording ? (
              <div style={{ width: 22, height: 22, background: fwTokens.paper }} />
            ) : (
              <div style={{ width: 24, height: 24, borderRadius: '50%', background: fwTokens.paper }} />
            )}
          </div>
        </button>
        <span style={{ fontFamily: fwTokens.sans, fontSize: 14, color: 'rgba(253,246,227,0.7)', letterSpacing: '0.02em' }}>
          {isRecording ? 'stop' : 'record'}
        </span>
      </div>

      {/* satellite controls */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 14, padding: '0 12px' }}>
        <button
          onClick={() => {
            if (currentLine > 1) setCurrentLine(currentLine - 1);
          }}
          style={{ appearance: 'none', background: 'none', border: 0, cursor: 'pointer', padding: 0,
            fontFamily: fwTokens.sans, fontSize: 13, color: 'rgba(253,246,227,0.55)', display: 'flex', alignItems: 'center', gap: 6 }}>
          ◁ prev
        </button>
        <button
          onClick={() => {
            const next = [...lineStates];
            next[currentLine - 1] = 'skipped';
            setLineStates(next);
            if (currentLine < total) setCurrentLine(currentLine + 1);
            else go('R05');
          }}
          style={{ appearance: 'none', background: 'none', border: 0, cursor: 'pointer', padding: 0,
            fontFamily: fwTokens.sans, fontSize: 13, color: 'rgba(253,246,227,0.55)', display: 'flex', alignItems: 'center', gap: 6 }}>
          skip ▷
        </button>
      </div>

      {/* keyframes injected once */}
      <style>{`
        @keyframes fwDrift {
          0%   { --x: 30%; --y: 40%; transform: translate(0,0); }
          50%  { --x: 70%; --y: 60%; transform: translate(2%, -1%); }
          100% { --x: 30%; --y: 40%; transform: translate(0,0); }
        }
        @keyframes fwBlink { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
      `}</style>
    </div>
  );
}

// ───────────────────────── R.04 — Take review ─────────────────────────
function ScreenTakeReview({ go, currentLine, setCurrentLine, takeNumber, setTakeNumber, lineStates }) {
  const total = FW_SCRIPT.length;
  const line = FW_SCRIPT[currentLine - 1];
  const onKeep = () => {
    setTakeNumber(1);
    if (currentLine < total) {
      setCurrentLine(currentLine + 1);
      go('R03');
    } else {
      go('R05');
    }
  };
  const onRetry = () => {
    setTakeNumber(t => t + 1);
    go('R03');
  };
  return (
    <div style={{
      height: '100%', background: fwTokens.paper,
      display: 'flex', flexDirection: 'column',
      padding: '60px 28px 32px',
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <button onClick={() => go('R03')} style={{ appearance: 'none', background: 'none', border: 0, cursor: 'pointer', padding: 0, display: 'flex', alignItems: 'center', gap: 6 }}>
          <ChevronBack /> <span style={{ fontFamily: fwTokens.sans, fontSize: 14, color: fwTokens.ink }}>Back</span>
        </button>
        <Micro>Line {currentLine} / {total}</Micro>
        <div style={{ width: 14 }} />
      </div>

      <div style={{ marginTop: 28 }}>
        <Micro style={{ color: fwTokens.ink2, marginBottom: 10 }}>Your take</Micro>
        {/* playback box */}
        <div style={{ background: fwTokens.paper2, border: `1px solid ${fwTokens.rule}`, padding: '18px 18px' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <div style={{
              width: 36, height: 36, background: fwTokens.ink, color: fwTokens.paper,
              display: 'grid', placeItems: 'center', flexShrink: 0,
            }}>
              <div style={{ width: 0, height: 0, borderTop: '6px solid transparent', borderBottom: '6px solid transparent', borderLeft: `9px solid ${fwTokens.paper}`, marginLeft: 3 }} />
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: fwTokens.mono, fontSize: 11, color: fwTokens.mute, marginBottom: 6 }}>0:00 / 0:0{line.sec}</div>
              {/* waveform */}
              <div style={{ display: 'flex', alignItems: 'center', gap: 2, height: 18 }}>
                {Array.from({ length: 38 }).map((_, i) => {
                  const h = 4 + ((Math.sin(i * 1.3) + 1) * 0.5) * 12 + (i % 3) * 2;
                  return <div key={i} style={{ width: 2, height: h, background: i < 8 ? fwTokens.ink : fwTokens.rule }} />;
                })}
              </div>
            </div>
          </div>
        </div>

        <div style={{ marginTop: 18 }}>
          <Serif size={20} italic style={{ color: fwTokens.ink, lineHeight: 1.35 }}>
            "{line.text}"
          </Serif>
        </div>

        {takeNumber > 1 && (
          <div style={{ marginTop: 14, fontFamily: fwTokens.mono, fontSize: 11, color: fwTokens.mute, letterSpacing: '0.05em' }}>
            Take {takeNumber} of this line
          </div>
        )}
      </div>

      <div style={{ flex: 1 }} />

      {/* CTAs */}
      <div style={{ display: 'grid', gap: 12, marginBottom: takeNumber > 1 ? 20 : 0 }}>
        <FilledButton onClick={onKeep}>Keep &amp; continue</FilledButton>
        <OutlineButton onClick={onRetry}>↻ &nbsp;Try this line again</OutlineButton>
        <button style={{
          appearance: 'none', background: 'none', border: 0, padding: '6px 0', cursor: 'pointer',
          fontFamily: fwTokens.sans, fontSize: 13, color: fwTokens.mute, textAlign: 'center',
        }}>⌄ &nbsp;Compare with take 1</button>
      </div>

      {takeNumber > 1 && (
        <div style={{ textAlign: 'center', maxWidth: 280, margin: '0 auto', paddingTop: 12, borderTop: `1px dashed ${fwTokens.rule}` }}>
          <div style={{ fontFamily: fwTokens.sans, fontSize: 14, color: fwTokens.ink2, lineHeight: 1.55 }}>
            Most people use their second take. You're doing fine.
          </div>
        </div>
      )}
    </div>
  );
}

// ───────────────────────── R.05 — Sentence map ─────────────────────────
function ScreenSentenceMap({ go, lineStates, setCurrentLine, setLineStates }) {
  const allRecorded = lineStates.every(s => s === 'recorded' || s === 'skipped');
  return (
    <div style={{ height: '100%', background: fwTokens.paper, display: 'flex', flexDirection: 'column', padding: '60px 28px 32px' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <button onClick={() => go('R03')} style={{ appearance: 'none', background: 'none', border: 0, cursor: 'pointer', padding: 0, display: 'flex', alignItems: 'center', gap: 6 }}>
          <ChevronBack /> <span style={{ fontFamily: fwTokens.sans, fontSize: 14, color: fwTokens.ink }}>Recording</span>
        </button>
        <Micro>Sentence map</Micro>
        <div style={{ width: 14 }} />
      </div>

      <Serif size={26} style={{ marginTop: 20 }}>{lineStates.filter(s => s === 'recorded').length} of {FW_SCRIPT.length} <em style={{ color: fwTokens.ink2 }}>recorded.</em></Serif>
      <div style={{ marginTop: 8, fontFamily: fwTokens.sans, fontSize: 14, color: fwTokens.ink2, lineHeight: 1.5, maxWidth: 320 }}>
        Tap any line to re-record. Nothing is lost.
      </div>

      <div style={{ marginTop: 22, flex: 1, overflowY: 'auto', display: 'grid', gap: 8 }}>
        {FW_SCRIPT.map((l, i) => {
          const state = lineStates[i] || 'idle';
          const dot =
            state === 'recorded' ? <span style={{ width: 8, height: 8, background: fwTokens.ink, display: 'inline-block' }} /> :
            state === 'skipped'  ? <span style={{ width: 8, height: 1, background: fwTokens.mute, display: 'inline-block', marginTop: 4 }} /> :
                                   <span style={{ width: 7, height: 7, border: `1px solid ${fwTokens.mute}`, display: 'inline-block' }} />;
          return (
            <button
              key={i}
              onClick={() => { setCurrentLine(i + 1); go('R03'); }}
              style={{
                appearance: 'none', background: state === 'recorded' ? fwTokens.paper2 : 'transparent',
                border: `1px solid ${fwTokens.rule}`,
                padding: '14px 14px', textAlign: 'left', cursor: 'pointer',
                display: 'grid', gridTemplateColumns: '40px 1fr auto', gap: 12, alignItems: 'baseline',
              }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 10 }}>{dot}</span>
                <Micro style={{ color: fwTokens.mute }}>0{i+1}</Micro>
              </div>
              <div style={{ fontFamily: fwTokens.serif, fontSize: 16, color: fwTokens.ink, lineHeight: 1.3 }}>
                {l.text.length > 64 ? l.text.slice(0, 64) + '…' : l.text}
              </div>
              <span style={{ fontFamily: fwTokens.mono, fontSize: 10, color: fwTokens.mute, letterSpacing: '0.06em' }}>{state}</span>
            </button>
          );
        })}
      </div>

      <div style={{ marginTop: 16 }}>
        <FilledButton
          disabled={!allRecorded}
          onClick={() => go('V01')}>
          {allRecorded ? 'Stitch the video' : `${lineStates.filter(s => s !== 'recorded' && s !== 'skipped').length} lines to go`}
        </FilledButton>
      </div>
    </div>
  );
}

// ───────────────────────── R.06 — Pause / exit sheet ─────────────────────────
function ScreenPauseExit({ go }) {
  return (
    <div style={{ height: '100%', background: 'rgba(20,17,14,0.55)', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end' }}>
      <div style={{ background: fwTokens.paper, padding: '32px 28px 36px', position: 'relative' }}>
        <div style={{ width: 36, height: 3, background: fwTokens.rule, margin: '0 auto 22px' }} />
        <Serif size={22}>Pause and <em style={{ color: fwTokens.ink2 }}>come back later?</em></Serif>
        <div style={{ marginTop: 12, fontFamily: fwTokens.sans, fontSize: 14, color: fwTokens.ink2, lineHeight: 1.55, maxWidth: 320 }}>
          Your script and the takes you've recorded so far are saved as a draft. You can pick up on any line.
        </div>
        <div style={{ marginTop: 24, display: 'grid', gap: 10 }}>
          <FilledButton onClick={() => go('L02')}>Save draft &amp; exit</FilledButton>
          <OutlineButton onClick={() => go('R03')}>Keep recording</OutlineButton>
        </div>
      </div>
    </div>
  );
}

// ───────────────────────── V.01 — Stitching ─────────────────────────
function ScreenStitching({ go }) {
  React.useEffect(() => {
    const t = setTimeout(() => go('V02'), 8500);
    return () => clearTimeout(t);
  }, []);
  return (
    <div style={{
      height: '100%', background: fwTokens.paper,
      display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center',
      padding: 32,
    }}>
      <Micro style={{ marginBottom: 80 }}>Stitching · this takes a moment</Micro>
      <BreathingCanvas size={130} light />
      <div style={{ maxWidth: 280, textAlign: 'center', marginTop: 80 }}>
        <div style={{ fontFamily: fwTokens.sans, fontSize: 14, color: fwTokens.ink2, lineHeight: 1.55 }}>
          Joining your takes. Trimming the long pauses. Leveling the room.
        </div>
      </div>
    </div>
  );
}

// ───────────────────────── V.02 — Polish review ─────────────────────────
function ScreenPolish({ go, polishEdits, setPolishEdits }) {
  const toggle = (k) => setPolishEdits({ ...polishEdits, [k]: !polishEdits[k] });
  const edits = [
    { k: 'fillers', label: 'Removed 4 filler words', meta: '4 instances · "um," "you know"' },
    { k: 'pauses',  label: 'Trimmed 2 long pauses',  meta: 'over 1.2s each' },
    { k: 'level',   label: 'Leveled audio',          meta: '−3 dB peak, +2 LUFS' },
    { k: 'hiss',    label: 'Reduced background hiss',meta: 'optional · off by default' },
  ];
  return (
    <div style={{ height: '100%', background: fwTokens.paper, display: 'flex', flexDirection: 'column' }}>
      <div style={{ padding: '60px 28px 14px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <button onClick={() => go('R05')} style={{ appearance: 'none', background: 'none', border: 0, cursor: 'pointer', padding: 0, display: 'flex', alignItems: 'center', gap: 6 }}>
          <ChevronBack /> <span style={{ fontFamily: fwTokens.sans, fontSize: 14, color: fwTokens.ink }}>Back</span>
        </button>
        <Micro>Polish</Micro>
        <span style={{ fontFamily: fwTokens.mono, fontSize: 13, color: fwTokens.mute }}>⋯</span>
      </div>

      <div style={{ flex: 1, overflowY: 'auto', padding: '8px 28px 24px' }}>
        {/* embedded preview */}
        <div style={{ background: fwTokens.ink3, aspectRatio: '9/12', position: 'relative', overflow: 'hidden', marginBottom: 22 }}>
          {/* faux thumbnail with subtle person silhouette */}
          <div style={{
            position: 'absolute', inset: 0,
            background: `radial-gradient(ellipse 38% 48% at 50% 58%, rgba(180,150,130,0.4), transparent 65%),
                         radial-gradient(ellipse 32% 28% at 50% 36%, rgba(200,170,150,0.5), transparent 60%),
                         linear-gradient(160deg, #2a2520, #1a1714 70%)`,
          }} />
          <div style={{
            position: 'absolute', top: 0, left: 0, right: 0,
            height: 2, background: fwTokens.oxblood,
            transform: 'scaleX(0.32)', transformOrigin: 'left',
          }} />
          <div style={{ position: 'absolute', bottom: 14, left: 14, right: 14, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <div style={{
              width: 36, height: 36, background: 'rgba(253,246,227,0.95)',
              display: 'grid', placeItems: 'center', cursor: 'pointer',
            }}>
              <div style={{ width: 0, height: 0, borderTop: '6px solid transparent', borderBottom: '6px solid transparent', borderLeft: `9px solid ${fwTokens.ink}`, marginLeft: 3 }} />
            </div>
            <div style={{ fontFamily: fwTokens.mono, fontSize: 11, color: fwTokens.paper, letterSpacing: '0.05em' }}>0:00 / 0:58</div>
          </div>
        </div>

        <SectionHeader label="Edits we made" />
        <div style={{ display: 'grid', gap: 2, marginTop: 4 }}>
          {edits.map(e => (
            <button key={e.k} onClick={() => toggle(e.k)} style={{
              appearance: 'none', background: 'transparent', border: 0,
              padding: '14px 0', cursor: 'pointer', textAlign: 'left',
              borderBottom: `1px dashed ${fwTokens.rule}`,
              display: 'grid', gridTemplateColumns: '20px 1fr', gap: 14, alignItems: 'baseline',
            }}>
              <span style={{ marginTop: 6 }}>
                {polishEdits[e.k]
                  ? <span style={{ display: 'inline-block', width: 10, height: 10, background: fwTokens.ink }} />
                  : <span style={{ display: 'inline-block', width: 10, height: 10, border: `1px solid ${fwTokens.mute}` }} />}
              </span>
              <div>
                <div style={{ fontFamily: fwTokens.serif, fontSize: 17, color: fwTokens.ink, lineHeight: 1.3 }}>{e.label}</div>
                <div style={{ marginTop: 2, fontFamily: fwTokens.mono, fontSize: 10.5, color: fwTokens.mute, letterSpacing: '0.05em' }}>{e.meta}</div>
              </div>
            </button>
          ))}
        </div>

        <div style={{ marginTop: 14, fontFamily: fwTokens.sans, fontSize: 13, color: fwTokens.mute, lineHeight: 1.5 }}>
          Tap any edit to turn it off or hear before / after.
        </div>

        <button onClick={() => go('R05')} style={{
          marginTop: 22, appearance: 'none', background: 'transparent',
          border: `1px solid ${fwTokens.rule}`, padding: '14px 16px', cursor: 'pointer',
          width: '100%', textAlign: 'left', display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        }}>
          <span style={{ fontFamily: fwTokens.serif, fontSize: 17, color: fwTokens.ink }}>Swap a sentence</span>
          <span style={{ fontFamily: fwTokens.mono, fontSize: 13, color: fwTokens.mute }}>›</span>
        </button>
      </div>

      <div style={{ padding: '16px 28px 32px', borderTop: `1px solid ${fwTokens.rule}` }}>
        <FilledButton onClick={() => go('E01')}>Export this video</FilledButton>
      </div>
    </div>
  );
}

// ───────────────────────── E.01 — Export sheet ─────────────────────────
function ScreenExportSheet({ go, exportFormat, setExportFormat, exportLength, setExportLength }) {
  return (
    <div style={{ height: '100%', background: 'rgba(20,17,14,0.55)', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end' }}>
      <div style={{ background: fwTokens.paper, padding: '28px 28px 36px', position: 'relative' }}>
        <div style={{ width: 36, height: 3, background: fwTokens.rule, margin: '0 auto 22px' }} />
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
          <Serif size={24}>Export</Serif>
          <button onClick={() => go('V02')} style={{ appearance: 'none', background: 'none', border: 0, cursor: 'pointer', padding: 0 }}>
            <CloseGlyph />
          </button>
        </div>
        <div style={{ marginTop: 14, height: 1, background: fwTokens.rule }} />

        <div style={{ marginTop: 22 }}>
          <Micro style={{ marginBottom: 12, color: fwTokens.ink2 }}>Format</Micro>
          {[
            { v: '9:16', label: 'Vertical 9:16', meta: 'Most replies are sent on a phone' },
            { v: '16:9', label: 'Horizontal 16:9', meta: 'For desktop email and ATS uploads' },
          ].map(opt => (
            <button key={opt.v} onClick={() => setExportFormat(opt.v)} style={{
              appearance: 'none', background: 'transparent', border: 0, cursor: 'pointer',
              padding: '10px 0', display: 'grid', gridTemplateColumns: '24px 1fr', gap: 12,
              alignItems: 'center', width: '100%', textAlign: 'left',
              borderBottom: `1px dashed ${fwTokens.rule}`,
            }}>
              <span>
                {exportFormat === opt.v
                  ? <span style={{ width: 12, height: 12, background: fwTokens.ink, display: 'inline-block', borderRadius: '50%' }} />
                  : <span style={{ width: 11, height: 11, border: `1px solid ${fwTokens.mute}`, display: 'inline-block', borderRadius: '50%' }} />}
              </span>
              <div>
                <div style={{ fontFamily: fwTokens.serif, fontSize: 17, color: fwTokens.ink }}>{opt.label}</div>
                <div style={{ fontFamily: fwTokens.sans, fontSize: 12.5, color: fwTokens.mute, marginTop: 2 }}>{opt.meta}</div>
              </div>
            </button>
          ))}
        </div>

        <div style={{ marginTop: 22 }}>
          <Micro style={{ marginBottom: 12, color: fwTokens.ink2 }}>Length</Micro>
          <div style={{ display: 'flex', gap: 8 }}>
            {['30s','60s','90s'].map(len => (
              <button key={len} onClick={() => setExportLength(len)} style={{
                appearance: 'none', flex: 1, padding: '10px 0',
                background: exportLength === len ? fwTokens.ink : 'transparent',
                color: exportLength === len ? fwTokens.paper : fwTokens.ink,
                border: `1px solid ${exportLength === len ? fwTokens.ink : fwTokens.rule}`,
                cursor: 'pointer',
                fontFamily: fwTokens.mono, fontSize: 13, letterSpacing: '0.05em',
              }}>{len}</button>
            ))}
          </div>
          <div style={{ marginTop: 8, fontFamily: fwTokens.sans, fontSize: 12, color: fwTokens.mute }}>
            Recommended: 60s · matches your script length
          </div>
        </div>

        <div style={{ marginTop: 26, display: 'grid', gap: 10 }}>
          <FilledButton onClick={() => go('E03')}>Copy share link</FilledButton>
          <OutlineButton onClick={() => go('E03')}>Save MP4 to phone</OutlineButton>
          <div style={{ textAlign: 'center', marginTop: 8 }}>
            <button style={{
              appearance: 'none', background: 'none', border: 0, padding: 0, cursor: 'pointer',
              fontFamily: fwTokens.mono, fontSize: 11, color: fwTokens.mute,
              letterSpacing: '0.1em', textTransform: 'uppercase',
            }}>⋯ &nbsp; Share via…</button>
          </div>
        </div>
      </div>
    </div>
  );
}

// ───────────────────────── E.03 — Link ready ─────────────────────────
function ScreenLinkReady({ go }) {
  const [copied, setCopied] = React.useState(false);
  const link = 'fourthwall.app/v/m4y4-stripe-pm';
  return (
    <div style={{ height: '100%', background: 'rgba(20,17,14,0.55)', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end' }}>
      <div style={{ background: fwTokens.paper, padding: '28px 28px 36px', position: 'relative' }}>
        <div style={{ width: 36, height: 3, background: fwTokens.rule, margin: '0 auto 22px' }} />
        <Serif size={24}>Your link is <em style={{ color: fwTokens.ink2 }}>ready.</em></Serif>
        <div style={{ marginTop: 12, fontFamily: fwTokens.sans, fontSize: 14, color: fwTokens.ink2, lineHeight: 1.55 }}>
          Anyone with this link can watch it once. No comments, no algorithm.
        </div>

        {/* link card preview */}
        <div style={{ marginTop: 22, background: fwTokens.paper2, border: `1px solid ${fwTokens.rule}`, padding: '14px 14px', display: 'flex', alignItems: 'center', gap: 12 }}>
          <div style={{ width: 64, height: 64, background: fwTokens.ink3, position: 'relative', overflow: 'hidden', flexShrink: 0 }}>
            <div style={{
              position: 'absolute', inset: 0,
              background: `radial-gradient(ellipse 40% 50% at 50% 60%, rgba(180,150,130,0.5), transparent 65%),
                           radial-gradient(ellipse 35% 30% at 50% 35%, rgba(200,170,150,0.6), transparent 60%),
                           linear-gradient(160deg, #2a2520, #1a1714 70%)`,
            }} />
            <div style={{ position: 'absolute', bottom: 4, right: 4, fontFamily: fwTokens.mono, fontSize: 9, color: fwTokens.paper }}>0:58</div>
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontFamily: fwTokens.serif, fontSize: 16, color: fwTokens.ink }}>Maya · Senior PM</div>
            <div style={{ fontFamily: fwTokens.mono, fontSize: 11, color: fwTokens.mute, marginTop: 2, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{link}</div>
          </div>
        </div>

        <div style={{ marginTop: 22, display: 'grid', gap: 10 }}>
          <FilledButton onClick={() => { setCopied(true); setTimeout(() => setCopied(false), 2500); }}>
            {copied ? '✓  Link copied' : 'Copy link'}
          </FilledButton>
          <OutlineButton onClick={() => go('P01')}>Share via…</OutlineButton>
        </div>

        <div style={{ marginTop: 16, textAlign: 'center' }}>
          <button onClick={() => go('P01')} style={{
            appearance: 'none', background: 'none', border: 0, padding: 0, cursor: 'pointer',
            fontFamily: fwTokens.sans, fontSize: 13, color: fwTokens.mute,
          }}>Done</button>
        </div>
      </div>
    </div>
  );
}

// ───────────────────────── P.01 — Soft paywall ─────────────────────────
function ScreenPaywall({ go }) {
  return (
    <div style={{ height: '100%', background: 'rgba(20,17,14,0.55)', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end' }}>
      <div style={{ background: fwTokens.paper, padding: '28px 28px 32px', position: 'relative', maxHeight: '92%', overflowY: 'auto' }}>
        <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
          <button onClick={() => go('L02')} style={{ appearance: 'none', background: 'none', border: 0, cursor: 'pointer', padding: 0 }}>
            <CloseGlyph color={fwTokens.ink2} />
          </button>
        </div>
        <div style={{ marginTop: 8 }}>
          <Serif size={30} style={{ lineHeight: 1.05 }}>You just finished <em style={{ color: fwTokens.ink2 }}>your first one.</em></Serif>
        </div>
        <div style={{ marginTop: 14, fontFamily: fwTokens.sans, fontSize: 14, color: fwTokens.ink2, lineHeight: 1.55, maxWidth: 320 }}>
          The first video is on us. If you're in a job search, here's how to keep going.
        </div>

        <div style={{ marginTop: 22, display: 'grid', gap: 14 }}>
          {/* Pro card */}
          <div style={{ border: `1px solid ${fwTokens.ink}`, padding: '20px 18px', background: fwTokens.paper }}>
            <Micro style={{ color: fwTokens.ink }}>Pro</Micro>
            <Serif size={20} style={{ marginTop: 6 }}>Unlimited videos. <em style={{ color: fwTokens.ink2 }}>No watermark.</em></Serif>
            <div style={{ marginTop: 10, fontFamily: fwTokens.sans, fontSize: 13.5, color: fwTokens.ink2, lineHeight: 1.5 }}>
              For people who'll record more than two of these a month.
            </div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginTop: 12 }}>
              <span style={{ fontFamily: fwTokens.mono, fontSize: 22, color: fwTokens.ink, letterSpacing: '-0.02em' }}>$9.99</span>
              <span style={{ fontFamily: fwTokens.mono, fontSize: 11, color: fwTokens.mute, letterSpacing: '0.05em' }}>/MO · OR $79/YR</span>
            </div>
            <div style={{ marginTop: 16 }}>
              <FilledButton onClick={() => go('L02')}>Start Pro</FilledButton>
            </div>
          </div>

          {/* Pack card */}
          <div style={{ border: `1px solid ${fwTokens.rule}`, padding: '20px 18px', background: fwTokens.paper2 }}>
            <Micro>30-day pack</Micro>
            <Serif size={20} style={{ marginTop: 6 }}>Unlimited for <em style={{ color: fwTokens.ink2 }}>a job search.</em></Serif>
            <div style={{ marginTop: 10, fontFamily: fwTokens.sans, fontSize: 13.5, color: fwTokens.ink2, lineHeight: 1.5 }}>
              One-time. No subscription. Most people use this.
            </div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginTop: 12 }}>
              <span style={{ fontFamily: fwTokens.mono, fontSize: 22, color: fwTokens.ink, letterSpacing: '-0.02em' }}>$24.99</span>
              <span style={{ fontFamily: fwTokens.mono, fontSize: 11, color: fwTokens.mute, letterSpacing: '0.05em' }}>ONE-TIME</span>
            </div>
            <div style={{ marginTop: 16 }}>
              <OutlineButton onClick={() => go('L02')}>Get the pack</OutlineButton>
            </div>
          </div>
        </div>

        <div style={{ marginTop: 20, textAlign: 'center' }}>
          <button onClick={() => go('L02')} style={{
            appearance: 'none', background: 'none', border: 0, padding: 6, cursor: 'pointer',
            fontFamily: fwTokens.sans, fontSize: 14, color: fwTokens.mute,
            textDecoration: 'underline', textDecorationColor: fwTokens.rule, textUnderlineOffset: 4,
          }}>Keep free plan</button>
        </div>
      </div>
    </div>
  );
}

// ───────────────────────── L.02 — Home with videos (return state) ─────────────────────────
function ScreenHomeFull({ go }) {
  const drafts = [
    { role: 'Senior PM', co: 'Stripe', progress: '5 of 7 recorded' },
  ];
  const finished = [
    { role: 'Maya · Senior PM', co: 'Stripe',  dur: '0:58', when: 'just now', live: true },
    { role: 'UX Lead',          co: 'Notion', dur: '0:58', when: 'May 22' },
    { role: 'Product Designer', co: 'Linear', dur: '1:02', when: 'May 18' },
  ];
  return (
    <div style={{ height: '100%', background: fwTokens.paper, display: 'flex', flexDirection: 'column' }}>
      <div style={{ padding: '60px 28px 0', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <FWMark size={20} stroke={9} />
          <span style={{ fontFamily: fwTokens.serif, fontSize: 22, color: fwTokens.ink }}>
            Fourth <em style={{ color: fwTokens.ink2 }}>Wall</em>
          </span>
        </div>
        <Micro>· · ·</Micro>
      </div>

      <div style={{ flex: 1, overflowY: 'auto', padding: '24px 28px 24px' }}>
        {/* drafts */}
        <SectionHeader label="Draft" />
        <div style={{ display: 'grid', gap: 12, marginBottom: 28 }}>
          {drafts.map((d, i) => (
            <button key={i} onClick={() => go('R03')} style={{
              appearance: 'none', background: fwTokens.paper2, border: `1px solid ${fwTokens.rule}`,
              padding: '14px 14px', cursor: 'pointer', textAlign: 'left',
              display: 'grid', gridTemplateColumns: '76px 1fr', gap: 14, alignItems: 'center',
            }}>
              <div style={{ width: 76, height: 76, background: fwTokens.paper3, position: 'relative', overflow: 'hidden' }}>
                <div style={{ position: 'absolute', inset: 0, background: `linear-gradient(135deg, ${fwTokens.paper3}, ${fwTokens.rule})` }} />
                <div style={{ position: 'absolute', bottom: 4, left: 4, fontFamily: fwTokens.mono, fontSize: 9, color: fwTokens.ink, letterSpacing: '0.05em' }}>DRAFT</div>
              </div>
              <div>
                <div style={{ fontFamily: fwTokens.serif, fontSize: 18, color: fwTokens.ink, lineHeight: 1.25 }}>{d.role}</div>
                <div style={{ fontFamily: fwTokens.sans, fontSize: 13, color: fwTokens.ink2, marginTop: 2 }}>· {d.co}</div>
                <div style={{ fontFamily: fwTokens.mono, fontSize: 10.5, color: fwTokens.mute, marginTop: 6, letterSpacing: '0.05em' }}>{d.progress}</div>
              </div>
            </button>
          ))}
        </div>

        {/* finished */}
        <SectionHeader label="Finished" />
        <div style={{ display: 'grid', gap: 12 }}>
          {finished.map((f, i) => (
            <div key={i} style={{
              background: f.live ? fwTokens.paper2 : 'transparent',
              border: `1px solid ${fwTokens.rule}`,
              padding: '14px 14px', cursor: 'pointer',
              display: 'grid', gridTemplateColumns: '76px 1fr', gap: 14, alignItems: 'center',
            }}>
              <div style={{ width: 76, height: 76, background: fwTokens.ink3, position: 'relative', overflow: 'hidden' }}>
                <div style={{
                  position: 'absolute', inset: 0,
                  background: `radial-gradient(ellipse 40% 50% at 50% 60%, rgba(180,150,130,${i === 0 ? 0.5 : 0.3}), transparent 65%),
                               radial-gradient(ellipse 35% 30% at 50% 35%, rgba(200,170,150,${i === 0 ? 0.6 : 0.35}), transparent 60%),
                               linear-gradient(160deg, #2a2520, #1a1714 70%)`,
                }} />
                <div style={{ position: 'absolute', bottom: 4, left: 4, fontFamily: fwTokens.mono, fontSize: 9, color: fwTokens.paper, letterSpacing: '0.05em' }}>▶ {f.dur}</div>
              </div>
              <div>
                <div style={{ fontFamily: fwTokens.serif, fontSize: 18, color: fwTokens.ink, lineHeight: 1.25 }}>{f.role}</div>
                <div style={{ fontFamily: fwTokens.sans, fontSize: 13, color: fwTokens.ink2, marginTop: 2 }}>· {f.co}</div>
                <div style={{ fontFamily: fwTokens.mono, fontSize: 10.5, color: fwTokens.mute, marginTop: 6, letterSpacing: '0.05em' }}>{f.when}</div>
              </div>
            </div>
          ))}
        </div>
      </div>

      <div style={{ padding: '16px 28px 32px', borderTop: `1px solid ${fwTokens.rule}` }}>
        <FilledButton onClick={() => go('S01')}>Start a new video</FilledButton>
      </div>
    </div>
  );
}

Object.assign(window, {
  FW_SCRIPT,
  ScreenHomeEmpty, ScreenPasteJD, ScreenDrafting, ScreenScript,
  ScreenWarmup, ScreenCountdown, ScreenRecord, ScreenTakeReview,
  ScreenSentenceMap, ScreenPauseExit, ScreenStitching, ScreenPolish,
  ScreenExportSheet, ScreenLinkReady, ScreenPaywall, ScreenHomeFull,
});