/* Slides 12-15 for Entrepreneurs Cockpit — rebuilt May 2026 */

// === Slide 17: Natural Progression Pyramid ===
function Slide17() {
  const r = React.useRef();
  const { active, idx } = useIsActiveSlide(r);
  const step = useStepReveal(9, active, idx);

  // Top of pyramid (narrow / advanced) → bottom (wide / foundation)
  const levels = [
    { label: 'Your Custom Cockpit', sub: 'Where your agents live + work', tier: 'apex', s: 9 },
    { label: 'OpenClaw + Telegram', sub: 'Autonomous · multi-model', tier: 'peak', s: 8 },
    { label: 'Claude Code + Agent Monitor', sub: 'Visual tracing · debugging', tier: 'advanced', s: 7 },
    { label: 'Claude Cowork + Agents', sub: 'Deploy · schedule · dispatch', tier: 'advanced', s: 6 },
    { label: 'Skills · MCPs · Hooks · Managed Agents', sub: 'The 6 primitives · plugins · connectors', tier: 'config', s: 5 },
    { label: 'Claude Desktop + Chrome', sub: 'Primary interface · browser access', tier: 'config', s: 4 },
    { label: 'Files / GitHub / Obsidian', sub: 'Memory · version control · knowledge', tier: 'foundation', s: 3 },
    { label: 'AI Audit — Personal, Business, Ops', sub: 'Claude interviews your life + business', tier: 'foundation', s: 2 },
    { label: 'Sign Up for Claude (Pro or Max)', sub: 'Foundation · 30 min setup · start here', tier: 'base', s: 1 },
  ];

  // Pyramid widths: narrow at top, wide at bottom (tighter ramp for tighter aesthetic)
  const widths = ['62%', '66%', '70%', '74%', '80%', '85%', '90%', '95%', '100%'];

  const tierStyle = (tier) => {
    if (tier === 'apex') return { color: 'var(--cyan)', bg: 'rgba(0,212,255,0.12)', border: 'var(--cyan)', subColor: 'var(--cyan)' };
    if (tier === 'peak') return { color: 'var(--magenta)', bg: 'rgba(240,46,170,0.08)', border: 'var(--magenta)', subColor: 'var(--magenta)' };
    if (tier === 'advanced') return { color: 'var(--cyan)', bg: 'rgba(0,212,255,0.06)', border: 'var(--cyan)', subColor: 'var(--cyan)' };
    if (tier === 'config') return { color: 'var(--ink)', bg: 'rgba(10,14,26,0.025)', border: 'var(--ink-soft)', subColor: 'var(--ink-mute)' };
    if (tier === 'foundation') return { color: 'var(--ink)', bg: 'rgba(10,14,26,0.04)', border: 'var(--ink)', subColor: 'var(--ink-mute)' };
    return { color: 'var(--cyan)', bg: 'rgba(0,212,255,0.10)', border: 'var(--cyan)', subColor: 'var(--cyan)' };
  };

  // Tier dividers — index in `levels` where a new tier starts (after rendering)
  const tierAtIndex = (i) => {
    const cur = levels[i].tier;
    const prev = i > 0 ? levels[i - 1].tier : null;
    return cur !== prev ? cur : null;
  };

  const tierLabel = (tier) => ({
    apex: { text: '// APEX · the destination', color: 'var(--cyan)' },
    peak: { text: '// PEAK · the ceiling', color: 'var(--magenta)' },
    advanced: { text: '// ADVANCED · daily driver', color: 'var(--cyan)' },
    config: { text: '// CONFIG · wire it up', color: 'var(--ink-mute)' },
    foundation: { text: '// FOUNDATION · build context', color: 'var(--ink-mute)' },
    base: { text: '// START HERE · 30 min setup', color: 'var(--cyan)' }
  })[tier];

  return (
    <div ref={r} style={{ position: 'absolute', inset: 0 }}>
      <SlideShell eyebrow="The natural progression">
        <SlideTitle style={{ fontSize: 72, whiteSpace: 'nowrap' }}>Build from the <span style={{ color: 'var(--cyan)' }}>foundation up</span>.</SlideTitle>

        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 6, marginTop: 8, position: 'relative' }}>
          {levels.map((level, i) => {
            const shown = step >= level.s;
            const t = tierStyle(level.tier);
            const newTier = tierAtIndex(i);
            const tl = newTier ? tierLabel(newTier) : null;
            return (
              <React.Fragment key={level.label}>
                {tl && (
                  <div style={{
                    width: widths[i],
                    marginLeft: 'auto',
                    marginRight: 'auto',
                    fontFamily: 'var(--font-mono)',
                    fontSize: 14,
                    color: tl.color,
                    letterSpacing: '0.18em',
                    textAlign: 'left',
                    paddingLeft: 4,
                    marginTop: i === 0 ? 0 : 8,
                    marginBottom: 0,
                    opacity: shown ? 0.95 : 0,
                    transition: 'opacity 0.4s ease',
                  }}>
                    {tl.text}
                  </div>
                )}
                <div style={{
                  width: widths[i],
                  marginLeft: 'auto',
                  marginRight: 'auto',
                  opacity: shown ? 1 : 0,
                  transform: shown ? 'translateY(0)' : 'translateY(6px)',
                  transition: 'opacity 0.45s ease, transform 0.45s ease',
                }}>
                  <div style={{
                    padding: '12px 28px',
                    border: `1.5px solid ${t.border}`,
                    background: t.bg,
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'space-between',
                    gap: 24,
                    position: 'relative',
                    boxShadow: level.tier === 'apex'
                      ? '0 0 36px rgba(0,212,255,0.45)'
                      : level.tier === 'peak'
                        ? '0 0 28px rgba(240,46,170,0.3)'
                        : level.tier === 'advanced'
                          ? '0 0 14px rgba(0,212,255,0.15)'
                          : 'none',
                  }}>
                    <span className="corner-tl" style={{ borderColor: t.border }} />
                    <span className="corner-br" style={{ borderColor: t.border }} />
                    <span style={{ fontFamily: 'var(--font-display)', fontSize: 30, fontWeight: 700, color: t.color, letterSpacing: '-0.015em', whiteSpace: 'nowrap', lineHeight: 1 }}>{level.label}</span>
                    <span style={{ fontFamily: 'var(--font-mono)', fontSize: 17, color: t.subColor, opacity: 0.75, whiteSpace: 'nowrap', letterSpacing: '0.06em' }}>{level.sub}</span>
                  </div>
                </div>
              </React.Fragment>
            );
          })}
        </div>
      </SlideShell>
    </div>
  );
}

// === Slide 13: The 6 Things an Agent Needs ===
function Slide12() {
  const r = React.useRef();
  const { active, idx } = useIsActiveSlide(r);
  const step = useStepReveal(6, active, idx);

  const reqs = [
    { n: '01', label: 'Identity', desc: 'A name and a one-page role doc. Who it is, what it does.', color: 'var(--cyan)', s: 1 },
    { n: '02', label: 'Tools', desc: 'What it can do. Skills, commands, and actions it can take.', color: 'var(--cyan)', s: 2 },
    { n: '03', label: 'Connections', desc: 'What it can see. The apps, files, and data it has access to.', color: 'var(--magenta)', s: 3 },
    { n: '04', label: 'Schedule', desc: 'When it runs. Daily, hourly, on a trigger, or on demand.', color: 'var(--magenta)', s: 4 },
    { n: '05', label: 'Memory', desc: 'What it remembers. Shared knowledge it builds on every run.', color: 'var(--cyan)', s: 5 },
    { n: '06', label: 'Reporting', desc: 'Where the output lands. A doc, a dashboard, an email, a chat.', color: 'var(--cyan)', s: 6 },
  ];

  return (
    <div ref={r} style={{ position: 'absolute', inset: 0 }}>
      <SlideShell eyebrow="Agent anatomy">
        <SlideTitle style={{ fontSize: 76, whiteSpace: 'nowrap' }}>6 things every agent <span style={{ color: 'var(--cyan)' }}>needs to function</span>.</SlideTitle>
        <div style={{ marginTop: 14, fontFamily: 'var(--font-display)', fontSize: 28, color: 'var(--ink-mute)', lineHeight: 1.35 }}>
          Skip any one — the agent breaks. Get all six right — it runs without you.
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gridTemplateRows: '1fr 1fr', gap: 32, marginTop: 32, flex: 1, minHeight: 0 }}>
          {reqs.map((req) => (
            <Reveal key={req.label} step={req.s} current={step} style={{ height: '100%', minHeight: 0, display: 'flex' }}>
              <div className="card" style={{ padding: '32px 36px', flex: 1, display: 'flex', flexDirection: 'column', gap: 14, borderColor: req.color, background: req.color === 'var(--cyan)' ? 'rgba(0,212,255,0.04)' : 'rgba(240,46,170,0.04)', minHeight: 0, overflow: 'hidden' }}>
                <span className="corner-tl" /><span className="corner-br" />
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 18 }}>
                  <Mono style={{ fontSize: 22, color: req.color, letterSpacing: '0.18em', fontWeight: 700, textShadow: req.color === 'var(--cyan)' ? '0 0 10px var(--cyan-glow)' : '0 0 10px var(--magenta-glow)' }}>{req.n}</Mono>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 48, fontWeight: 700, letterSpacing: '-0.02em', color: req.color, lineHeight: 1 }}>{req.label}</div>
                </div>
                <div style={{ width: 48, height: 3, background: req.color, marginTop: 4, boxShadow: req.color === 'var(--cyan)' ? '0 0 8px var(--cyan-glow)' : '0 0 8px var(--magenta-glow)' }} />
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 26, color: 'var(--ink-soft)', lineHeight: 1.35, marginTop: 8 }}>{req.desc}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </SlideShell>
    </div>
  );
}

// === Slide 14: Agent Ecosystem — Build → Assign → Schedule → Dispatch → Visualize ===
function Slide13() {
  const r = React.useRef();
  const { active, idx } = useIsActiveSlide(r);
  const step = useStepReveal(5, active, idx);

  const stages = [
    {
      step: 1, label: 'Build', color: 'var(--cyan)',
      lines: ['AI interviews you on life + business', 'Maps your file + folder structure', 'Drafts a hierarchy of agents', 'Writes the soul doc for each one'],
    },
    {
      step: 2, label: 'Assign', color: 'var(--cyan)',
      lines: ['Give each agent its 6 things', 'Wire up tools, apps, and access', 'Set department + responsibilities', 'Spin them up at console.anthropic.com'],
    },
    {
      step: 3, label: 'Schedule', color: 'var(--magenta)',
      lines: ['Daily, hourly, or on a trigger', 'Run on events (email, form, etc.)', 'Backed up to Obsidian + GitHub', 'Autonomous loops, hands-off'],
    },
    {
      step: 4, label: 'Dispatch', color: 'var(--magenta)',
      lines: ['Talk to your agents from your phone', 'Run them through Claude or chat apps', 'Manage everything from anywhere', 'Telegram, Slack, etc. via OpenClaw'],
    },
    {
      step: 5, label: 'Visualize', color: 'var(--cyan)',
      lines: ['Watch every step in real time', 'Live debugging + observability', 'See what each agent is doing', 'Flag anomalies before they break things'],
    },
  ];

  return (
    <div ref={r} style={{ position: 'absolute', inset: 0 }}>
      <SlideShell eyebrow="The agent lifecycle">
        <SlideTitle style={{ fontSize: 76, whiteSpace: 'nowrap' }}>You determine. You organize. <span style={{ color: 'var(--cyan)' }}>You set it free.</span></SlideTitle>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 0, marginTop: 36, flex: 1, position: 'relative' }}>
          {stages.map((stage, i) => (
            <React.Fragment key={stage.label}>
              <Reveal step={stage.step} current={step} style={{ height: '100%', minHeight: 0, display: 'flex' }}>
                <div className="card" style={{ padding: '32px 28px', flex: 1, display: 'flex', flexDirection: 'column', gap: 16, borderColor: stage.color, background: stage.color === 'var(--cyan)' ? 'rgba(0,212,255,0.03)' : 'rgba(240,46,170,0.03)', minHeight: 0, overflow: 'hidden' }}>
                  <span className="corner-tl" /><span className="corner-br" />
                  <Mono style={{ fontSize: 22, color: stage.color, letterSpacing: '0.18em', fontWeight: 700 }}>0{stage.step}</Mono>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 48, fontWeight: 700, letterSpacing: '-0.02em', color: stage.color, lineHeight: 1, textShadow: stage.color === 'var(--cyan)' ? '0 0 12px var(--cyan-glow)' : '0 0 12px var(--magenta-glow)' }}>{stage.label}</div>
                  <div style={{ width: 40, height: 3, background: stage.color, marginTop: 4, boxShadow: stage.color === 'var(--cyan)' ? '0 0 8px var(--cyan-glow)' : '0 0 8px var(--magenta-glow)' }} />
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 14, marginTop: 10 }}>
                    {stage.lines.map(line => (
                      <div key={line} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                        <span style={{ width: 7, height: 7, borderRadius: '50%', background: stage.color, marginTop: 12, flexShrink: 0 }} />
                        <span style={{ fontFamily: 'var(--font-display)', fontSize: 26, color: 'var(--ink-soft)', lineHeight: 1.3 }}>{line}</span>
                      </div>
                    ))}
                  </div>
                </div>
              </Reveal>
              {i < stages.length - 1 && (
                <div style={{ position: 'absolute', top: '50%', left: `${(i + 1) * 20}%`, transform: 'translate(-50%, -50%)', zIndex: 2, opacity: step > stage.step ? 1 : 0, transition: 'opacity 0.4s' }}>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 28, color: stage.color, fontWeight: 700, textShadow: stage.color === 'var(--cyan)' ? '0 0 10px var(--cyan-glow)' : '0 0 10px var(--magenta-glow)', background: 'var(--bg)', padding: '4px 6px' }}>›</span>
                </div>
              )}
            </React.Fragment>
          ))}
        </div>
      </SlideShell>
    </div>
  );
}

// === Slide 18: First Agent Playbook — The 5 Claude Surfaces (linear pipeline) ===
function Slide18_OLD_HUB() {
  const r = React.useRef();
  const { active, idx } = useIsActiveSlide(r);
  const step = useStepReveal(3, active, idx);

  // 5 surfaces in a pentagonal layout around the orchestrator hub (top-center)
  const surfaces = [
    { n: '01', label: 'Claude.ai',   tag: 'WEB',     verb: 'TEACHES',    bullets: ['Projects', 'Connectors', 'Skills'],          color: 'var(--cyan)',    pos: { top: '4%',   left: '0%'  } },
    { n: '02', label: 'Desktop',     tag: 'NATIVE',  verb: 'TOUCHES',    bullets: ['Computer use', 'File access', 'MCP'],        color: 'var(--magenta)', pos: { top: '4%',   left: '76%' } },
    { n: '03', label: 'Claude Code', tag: 'CLI',     verb: 'BUILDS',     bullets: ['Agents · Hooks', 'Skills · /commands'],      color: 'var(--cyan)',    pos: { top: '66%',  left: '0%'  } },
    { n: '04', label: 'Mobile',      tag: 'iOS/AND', verb: 'DISPATCHES', bullets: ['Voice', 'Remote send'],                      color: 'var(--magenta)', pos: { top: '66%',  left: '38%' } },
    { n: '05', label: 'Cloud',       tag: 'COWORK',  verb: 'RUNS',       bullets: ['Remote agents', 'Routines · Schedules'],     color: 'var(--cyan)',    pos: { top: '66%',  left: '76%' } },
  ];

  return (
    <div ref={r} style={{ position: 'absolute', inset: 0 }}>
      <SlideShell eyebrow="First agent playbook — part 1 of 2">
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 }}>
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 14, flexShrink: 0 }}>
            <SlideTitle style={{ fontSize: 76, margin: 0 }}>One Claude. <span style={{ color: 'var(--cyan)' }}>Five surfaces.</span></SlideTitle>
            <Mono style={{ fontSize: 16, color: 'var(--ink-mute)', letterSpacing: '0.18em' }}>// LEARN_THE_INTERCHANGE</Mono>
          </div>

          <Reveal step={1} current={step}>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, color: 'var(--ink-soft)', lineHeight: 1.35, maxWidth: 1100, marginBottom: 12 }}>
              The same brain. Five doors in. Master the handoff between them — that's the whole game.
            </div>
          </Reveal>

          <Reveal step={2} current={step} style={{ flex: 1, minHeight: 0, position: 'relative' }}>
            <div style={{ position: 'relative', width: '100%', height: '100%', minHeight: 540 }}>

              {/* SVG connecting lines: hub → 5 surfaces */}
              <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', pointerEvents: 'none' }} preserveAspectRatio="none">
                <defs>
                  <radialGradient id="hubGlow" cx="50%" cy="40%" r="40%">
                    <stop offset="0%" stopColor="rgba(0,212,255,0.4)" />
                    <stop offset="100%" stopColor="rgba(0,212,255,0)" />
                  </radialGradient>
                </defs>
                <circle cx="50%" cy="40%" r="170" fill="url(#hubGlow)" />
                <circle cx="50%" cy="40%" r="100" fill="none" stroke="var(--cyan)" strokeWidth="1" strokeDasharray="2 5" opacity="0.45" />
                <circle cx="50%" cy="40%" r="150" fill="none" stroke="var(--magenta)" strokeWidth="1" strokeDasharray="1 7" opacity="0.28" />
                {[
                  { x: '13%', y: '14%', c: 'var(--cyan)' },
                  { x: '87%', y: '14%', c: 'var(--magenta)' },
                  { x: '13%', y: '76%', c: 'var(--cyan)' },
                  { x: '50%', y: '76%', c: 'var(--magenta)' },
                  { x: '87%', y: '76%', c: 'var(--cyan)' },
                ].map((p, i) => (
                  <line key={i} x1="50%" y1="40%" x2={p.x} y2={p.y} stroke={p.c} strokeWidth="1.3" strokeDasharray="4 6" opacity="0.6" />
                ))}
              </svg>

              {/* Center hub */}
              <div style={{
                position: 'absolute', top: '40%', left: '50%', transform: 'translate(-50%, -50%)',
                width: 280, padding: '18px 20px',
                border: '1.5px solid var(--cyan)',
                background: 'rgba(10,14,20,0.94)',
                boxShadow: '0 0 40px rgba(0,212,255,0.55), inset 0 0 24px rgba(0,212,255,0.08)',
                textAlign: 'center', zIndex: 2,
              }}>
                <span className="corner-tl" style={{ borderColor: 'var(--cyan)' }} />
                <span className="corner-tr" style={{ borderColor: 'var(--cyan)' }} />
                <span className="corner-bl" style={{ borderColor: 'var(--cyan)' }} />
                <span className="corner-br" style={{ borderColor: 'var(--cyan)' }} />
                <Mono style={{ fontSize: 11, color: 'var(--magenta)', letterSpacing: '0.24em', display: 'block', marginBottom: 4 }}>// HUB</Mono>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 26, fontWeight: 800, color: 'var(--cyan)', letterSpacing: '-0.01em', lineHeight: 1.05, textShadow: '0 0 14px var(--cyan-glow)' }}>YOUR ORCHESTRATOR</div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-mute)', letterSpacing: '0.08em', marginTop: 6, whiteSpace: 'nowrap' }}>one prompt · every surface</div>
              </div>

              {/* 5 surface nodes */}
              {surfaces.map((s) => (
                <div key={s.label} style={{
                  position: 'absolute', ...s.pos, width: '24%',
                  padding: '12px 14px',
                  border: `1.5px solid ${s.color}`,
                  background: 'rgba(10,14,20,0.85)',
                  boxShadow: s.color === 'var(--cyan)'
                    ? '0 0 18px rgba(0,212,255,0.25)'
                    : '0 0 18px rgba(240,46,170,0.22)',
                  zIndex: 1,
                }}>
                  <span className="corner-tl" style={{ borderColor: s.color }} />
                  <span className="corner-br" style={{ borderColor: s.color }} />
                  <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 6, marginBottom: 4, overflow: 'hidden' }}>
                    <Mono style={{ fontSize: 12, color: s.color, letterSpacing: '0.16em', fontWeight: 700, whiteSpace: 'nowrap' }}>{s.n} · {s.tag}</Mono>
                  </div>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 24, fontWeight: 800, color: s.color, letterSpacing: '-0.01em', lineHeight: 1.0, marginBottom: 8, textShadow: s.color === 'var(--cyan)' ? '0 0 10px var(--cyan-glow)' : '0 0 10px var(--magenta-glow)' }}>{s.label}</div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: '#d6e9f5', lineHeight: 1.5 }}>
                    {s.bullets.map((b, i) => (
                      <div key={i}><span style={{ color: s.color, marginRight: 6 }}>·</span>{b}</div>
                    ))}
                  </div>
                </div>
              ))}
            </div>
          </Reveal>

          <Reveal step={3} current={step} style={{ marginTop: 10, flexShrink: 0 }}>
            <div style={{ borderTop: '1px solid var(--ink-soft)', opacity: 0.2, marginBottom: 10 }} />
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 16, color: 'var(--ink-soft)', lineHeight: 1.5, letterSpacing: '0.04em' }}>
              <span style={{ color: 'var(--ink-mute)' }}>web</span> <span style={{ color: 'var(--cyan)' }}>teaches</span> <span style={{ color: 'var(--ink-mute)' }}>→</span>{' '}
              <span style={{ color: 'var(--ink-mute)' }}>desktop</span> <span style={{ color: 'var(--magenta)' }}>touches</span> <span style={{ color: 'var(--ink-mute)' }}>→</span>{' '}
              <span style={{ color: 'var(--ink-mute)' }}>code</span> <span style={{ color: 'var(--cyan)' }}>builds</span> <span style={{ color: 'var(--ink-mute)' }}>→</span>{' '}
              <span style={{ color: 'var(--ink-mute)' }}>mobile</span> <span style={{ color: 'var(--magenta)' }}>dispatches</span> <span style={{ color: 'var(--ink-mute)' }}>→</span>{' '}
              <span style={{ color: 'var(--ink-mute)' }}>cloud</span> <span style={{ color: 'var(--cyan)' }}>runs</span><span style={{ color: 'var(--ink-mute)' }}>.</span>
            </div>
          </Reveal>
        </div>
      </SlideShell>
    </div>
  );
}

// === Slide 18: First Agent Playbook — 4 Surfaces + Memory + Glossary ===
// NOTE: avoid <Mono> on this slide — it has a hardcoded fontSize override.
function Slide18() {
  const r = React.useRef();
  const { active, idx } = useIsActiveSlide(r);
  const step = useStepReveal(6, active, idx);

  const cyan = 'var(--cyan)';
  const magenta = 'var(--magenta)';

  const monoLabel = (color, size = 14, ls = '0.18em') => ({
    fontFamily: 'var(--font-mono)', fontSize: size, color, letterSpacing: ls, fontWeight: 700,
  });

  const surfaces = [
    { s: 1, n: '01', label: 'Claude Desktop / Cowork', tag: 'NATIVE  +  CLOUD', color: cyan,
      lines: [
        { k: 'Download',  v: 'install on your desktop to get started' },
        { k: 'Dispatch',  v: 'connect your phone to drive your computer and your agents from anywhere' },
        { k: 'Routines',  v: 'schedule tasks on Anthropic servers — laptop closed' },
        { k: 'Settings',  v: 'connect computer, files, browser + apps via MCP/API' },
      ] },
    { s: 2, n: '02', label: 'Claude Chrome', tag: 'BROWSER', color: magenta,
      lines: [
        { k: 'Browser control', v: 'acts on the websites you visit, on your behalf' },
        { k: 'Multi-session',   v: 'run multiple windows and sessions at the same time' },
      ] },
    { s: 3, n: '03', label: 'Claude Code', tag: 'TERMINAL  /  REMOTE', color: cyan,
      lines: [
        { k: 'Terminal-native',  v: 'build code + automations without logging into claude.ai' },
        { k: '/remote-control',  v: 'drive your terminal from your phone' },
        { k: '/settings',        v: 'configure Claude Code from inside the terminal' },
        { k: '/agents',          v: 'build new agents from within Claude Code' },
        { k: '/effort',          v: 'dial compute power up or down per task' },
        { k: 'Foundation',       v: 'needs proper file structure, plugins, skills, and connectors' },
      ] },
    { s: 4, n: '04', label: 'Claude Console', tag: 'ANTHROPIC NATIVE', color: magenta,
      lines: [
        { k: 'Native interface', v: "build out agents inside Claude's own interface — no local setup" },
      ] },
  ];

  const memory = [
    { k: 'Claude-mem', v: 'Skill / plugin' },
    { k: 'GitHub',     v: 'version control, code backup, and a place to clone public code (skills/plugins) you want your AI to use' },
    { k: 'Obsidian',   v: 'Shared knowledge base + memory system for your AI' },
  ];

  const glossary = [
    { k: 'GitHub Repos', v: 'Where your code, configs, and agent files live' },
    { k: 'Skills',       v: 'Modular capabilities you bolt onto Claude' },
    { k: 'Connectors',   v: 'Pre-built bridges to the apps you already use' },
    { k: 'MCP vs API',   v: 'MCP = how AI talks to APIs.  API = the data endpoints behind the buttons in an app' },
    { k: 'Commands',     v: 'Slash-activated — /agents, /settings, /remote-control' },
    { k: 'Hooks',        v: 'Keyword-monitoring activation that fires on a phrase or event' },
  ];

  return (
    <div ref={r} style={{ position: 'absolute', inset: 0 }}>
      <SlideShell eyebrow="First agent playbook — surfaces, memory, vocabulary">
        <SlideTitle style={{ fontSize: 60, whiteSpace: 'nowrap' }}>
          Four <span style={{ color: cyan }}>surfaces.</span> One <span style={{ color: magenta }}>memory layer.</span> One <span style={{ color: cyan }}>operator.</span>
        </SlideTitle>

        {/* TOP BAND — Memory layer (left) + Vocabulary (right) */}
        <div style={{ display: 'grid', gridTemplateColumns: '0.85fr 1.55fr', gap: 18, marginTop: 22, minHeight: 0 }}>
          {/* Memory */}
          <Reveal step={1} current={step} style={{ display: 'flex' }}>
            <div className="card" style={{
              padding: '22px 26px',
              flex: 1,
              display: 'flex',
              flexDirection: 'column',
              gap: 14,
              borderColor: magenta,
              background: 'rgba(240,46,170,0.03)',
              position: 'relative',
              minHeight: 0,
            }}>
              <span className="corner-tl" style={{ borderColor: magenta }} /><span className="corner-br" style={{ borderColor: magenta }} />
              <span style={monoLabel(magenta, 20, '0.22em')}>MEMORY LAYER</span>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginTop: 4 }}>
                {memory.map(m => (
                  <div key={m.k} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                    <span style={{ width: 8, height: 8, borderRadius: '50%', background: magenta, marginTop: 11, flexShrink: 0, boxShadow: '0 0 6px var(--magenta-glow)' }} />
                    <div style={{ lineHeight: 1.3 }}>
                      <span style={{ fontFamily: 'var(--font-display)', fontSize: 26, color: 'var(--ink)', fontWeight: 700 }}>{m.k}</span>
                      <span style={{ fontFamily: 'var(--font-display)', fontSize: 24, color: 'var(--ink-soft)' }}> — {m.v}</span>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </Reveal>

          {/* Vocabulary */}
          <Reveal step={2} current={step} style={{ display: 'flex' }}>
            <div className="card" style={{
              padding: '22px 26px',
              flex: 1,
              display: 'flex',
              flexDirection: 'column',
              gap: 14,
              borderColor: cyan,
              background: 'rgba(0,212,255,0.03)',
              position: 'relative',
              minHeight: 0,
            }}>
              <span className="corner-tl" /><span className="corner-br" />
              <span style={monoLabel(cyan, 20, '0.22em')}>VOCABULARY</span>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px 32px', marginTop: 4 }}>
                {glossary.map(g => (
                  <div key={g.k} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                    <span style={{ width: 8, height: 8, borderRadius: '50%', background: cyan, marginTop: 11, flexShrink: 0, boxShadow: '0 0 6px var(--cyan-glow)' }} />
                    <div style={{ lineHeight: 1.3 }}>
                      <span style={{ fontFamily: 'var(--font-display)', fontSize: 22, color: 'var(--ink)', fontWeight: 700 }}>{g.k}</span>
                      <span style={{ fontFamily: 'var(--font-display)', fontSize: 20, color: 'var(--ink-soft)' }}> — {g.v}</span>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </Reveal>
        </div>

        {/* BOTTOM BAND — 4 Surfaces (fill remaining vertical space) */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 18, marginTop: 22, flex: 1, position: 'relative', minHeight: 0 }}>
          {surfaces.map((surface) => (
            <Reveal key={surface.label} step={surface.s + 2} current={step} style={{ display: 'flex', minHeight: 0 }}>
              <div className="card" style={{
                padding: '22px 22px',
                flex: 1,
                display: 'flex',
                flexDirection: 'column',
                gap: 10,
                borderColor: surface.color,
                background: surface.color === cyan ? 'rgba(0,212,255,0.03)' : 'rgba(240,46,170,0.03)',
                minHeight: 0,
                overflow: 'hidden',
                position: 'relative',
              }}>
                <span className="corner-tl" /><span className="corner-br" />

                {/* Top row: number + tag */}
                <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 8 }}>
                  <span style={monoLabel(surface.color, 26, '0.16em')}>{surface.n}</span>
                  <span style={monoLabel('var(--ink-mute)', 13, '0.18em')}>{surface.tag}</span>
                </div>

                {/* Product name */}
                <div style={{
                  fontFamily: 'var(--font-display)', fontSize: 34, fontWeight: 800, letterSpacing: '-0.02em',
                  color: surface.color, lineHeight: 1.02, marginTop: 2,
                  textShadow: surface.color === cyan ? '0 0 14px var(--cyan-glow)' : '0 0 14px var(--magenta-glow)',
                }}>{surface.label}</div>

                <div style={{ width: 44, height: 3, background: surface.color, marginTop: 4, boxShadow: surface.color === cyan ? '0 0 8px var(--cyan-glow)' : '0 0 8px var(--magenta-glow)' }} />

                {/* Bullets — feature → explanation */}
                <div style={{ display: 'flex', flexDirection: 'column', gap: 9, marginTop: 8 }}>
                  {surface.lines.map(l => (
                    <div key={l.k} style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
                      <span style={{ width: 7, height: 7, borderRadius: '50%', background: surface.color, marginTop: 10, flexShrink: 0, boxShadow: surface.color === cyan ? '0 0 6px var(--cyan-glow)' : '0 0 6px var(--magenta-glow)' }} />
                      <div style={{ lineHeight: 1.28 }}>
                        <span style={{ fontFamily: 'var(--font-display)', fontSize: 20, color: surface.color, fontWeight: 700, letterSpacing: '-0.005em' }}>{l.k}</span>
                        <span style={{ fontFamily: 'var(--font-display)', fontSize: 19, color: 'var(--ink-soft)' }}> — {l.v}</span>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </SlideShell>
    </div>
  );
}

// === Slide 19: First Agent Playbook — The Init Prompt ===
function Slide19() {
  const r = React.useRef();
  const { active, idx } = useIsActiveSlide(r);
  const step = useStepReveal(1, active, idx);

  const promptLines = [
    'You are my Agent Orchestrator — the Jarvis to my Iron Man.',
    '',
    'Walk me through, one step at a time:',
    '  1. Configure my 4 Claude surfaces:',
    '     Desktop + Cowork, Chrome, Code, Console.',
    '  2. Grant computer, file, and browser access safely.',
    '  3. Audit my files. Reorganize into a clean hierarchy.',
    '  4. Identify the 3 highest-impact agents to build first.',
    '  5. Connect my apps via Connectors (MCP):',
    '     Gmail, Calendar, Drive, and the rest.',
    '  6. Install the right plugins + skills. Set up my memory',
    '     layer: Claude-mem, GitHub, Obsidian.',
    '  7. Teach me the commands: /agents, /settings,',
    '     /remote-control, /effort.',
    '  8. Ship my first working agent tonight.',
    '',
    'Interview me before you act. One question at a time.',
    'Confirm before you change anything.',
  ];

  return (
    <div ref={r} style={{ position: 'absolute', inset: 0 }}>
      <SlideShell eyebrow="The init prompt — paste into any Claude surface">
        <Reveal step={1} current={step} style={{ flex: 1, minHeight: 0, display: 'flex' }}>
          <div style={{
            position: 'relative',
            border: '2px solid var(--cyan)',
            background: '#070b12',
            boxShadow: '0 0 72px rgba(0,212,255,0.45), inset 0 0 80px rgba(0,212,255,0.06)',
            display: 'flex', flexDirection: 'column',
            flex: 1, minHeight: 0,
          }}>
            <span className="corner-tl" style={{ borderColor: 'var(--cyan)' }} />
            <span className="corner-tr" style={{ borderColor: 'var(--cyan)' }} />
            <span className="corner-bl" style={{ borderColor: 'var(--cyan)' }} />
            <span className="corner-br" style={{ borderColor: 'var(--cyan)' }} />

            {/* title bar */}
            <div style={{
              display: 'flex', alignItems: 'center', gap: 18,
              padding: '20px 32px',
              borderBottom: '1px solid rgba(0,212,255,0.3)',
              background: 'rgba(0,212,255,0.06)',
            }}>
              <span style={{ width: 18, height: 18, borderRadius: '50%', background: 'var(--magenta)', boxShadow: '0 0 12px var(--magenta-glow)' }} />
              <span style={{ width: 18, height: 18, borderRadius: '50%', background: '#f5b400' }} />
              <span style={{ width: 18, height: 18, borderRadius: '50%', background: 'var(--cyan)', boxShadow: '0 0 12px var(--cyan-glow)' }} />
              <Mono style={{ fontSize: 22, color: 'var(--ink-mute)', letterSpacing: '0.18em', marginLeft: 22, whiteSpace: 'nowrap' }}>~/orchestrator/init.txt</Mono>
              <Mono style={{ fontSize: 20, color: 'var(--cyan)', letterSpacing: '0.22em', marginLeft: 'auto', fontWeight: 700, whiteSpace: 'nowrap', textShadow: '0 0 12px var(--cyan-glow)' }}>● COPY · PASTE · GO</Mono>
            </div>

            {/* prompt body — sized for the room */}
            <div style={{
              padding: '32px 48px',
              fontFamily: 'var(--font-mono)',
              fontSize: 27,
              lineHeight: 1.42,
              color: '#e2f4ff',
              flex: 1,
              overflow: 'hidden',
            }}>
              {promptLines.map((line, i) => (
                <div key={i} style={{ display: 'flex', gap: 24, minHeight: '1.42em' }}>
                  <span style={{ color: 'rgba(0,212,255,0.32)', userSelect: 'none', width: 44, textAlign: 'right', flexShrink: 0 }}>
                    {String(i + 1).padStart(2, '0')}
                  </span>
                  <span style={{
                    color: line.trim().match(/^\d+\./) ? 'var(--cyan)'
                      : line.trim().startsWith('You are') ? 'var(--magenta)'
                      : line.trim().startsWith('Interview') || line.trim().startsWith('Confirm') ? '#ffd166'
                      : '#e2f4ff',
                    whiteSpace: 'pre',
                    textShadow: line.trim().startsWith('You are') ? '0 0 14px var(--magenta-glow)' : 'none',
                    fontWeight: line.trim().startsWith('You are') ? 700 : 400,
                  }}>{line || ' '}</span>
                </div>
              ))}
              <div style={{ display: 'flex', gap: 24, marginTop: 8 }}>
                <span style={{ color: 'rgba(0,212,255,0.32)', width: 44, textAlign: 'right', flexShrink: 0 }}>{String(promptLines.length + 1).padStart(2, '0')}</span>
                <span style={{ color: 'var(--cyan)', textShadow: '0 0 12px var(--cyan-glow)' }}>▊</span>
              </div>
            </div>
          </div>
        </Reveal>
      </SlideShell>
    </div>
  );
}

// === Slide 20: Action Items ===
function Slide20() {
  const r = React.useRef();
  const { active, idx } = useIsActiveSlide(r);
  const step = useStepReveal(6, active, idx);

  const cyan = 'var(--cyan)';
  const magenta = 'var(--magenta)';

  const ctas = [
    {
      s: 2, n: '01', tier: 'FREE', color: cyan,
      title: 'The Claude Cookbook',
      body: 'Drop your email. Instant download. The init prompt, agent recipes, surface setup, memory layer, and the full commands cheat sheet — paste straight into Claude.',
      action: 'Free · scan + enter email',
    },
    {
      s: 3, n: '02', tier: 'PRO', color: magenta,
      title: 'My setup, out of the box',
      body: 'The exact stack I run. Best-in-class connectors, plugins, skills, MCPs, workflows, and custom agents — pre-wired. Skip the configuration tax.',
      action: 'Paid · one-time purchase',
    },
    {
      s: 4, n: '03', tier: 'DEEPER', color: cyan,
      title: "The Entrepreneur's Cockpit",
      body: 'The book. The full system on paper. A deeper technical dive into the framework you just watched — for operators who want to study, not just copy.',
      action: 'Paid · ships when you order',
    },
  ];

  return (
    <div ref={r} style={{ position: 'absolute', inset: 0 }}>
      <SlideShell eyebrow="Action items">
        {/* RIGHT COLUMN — vertically centered: equal whitespace above QR and below book */}
        <div style={{
          position: 'absolute',
          top: 0,
          right: 30,
          bottom: 0,
          width: 460,
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          gap: 28,
          pointerEvents: 'none',
          zIndex: 4,
        }}>
          {/* QR — URL above, bigger, centered */}
          <Reveal step={5} current={step} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10 }}>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 800, color: cyan, letterSpacing: '-0.015em', textShadow: '0 0 12px var(--cyan-glow)' }}>
              joshcollier.ai/resources
            </div>
            <div style={{
              position: 'relative',
              padding: 12,
              background: '#fff',
              border: `2px solid ${cyan}`,
              boxShadow: '0 0 32px rgba(0,212,255,0.45)',
            }}>
              <span className="corner-tl" style={{ borderColor: cyan }} />
              <span className="corner-br" style={{ borderColor: cyan }} />
              <img
                src="assets/qr-resources.png"
                alt="QR code to joshcollier.ai/resources"
                style={{ width: 230, height: 230, display: 'block', imageRendering: 'pixelated' }}
                onError={(e) => { e.target.style.display = 'none'; e.target.nextSibling.style.display = 'flex'; }} />
              <div style={{
                display: 'none', width: 230, height: 230,
                alignItems: 'center', justifyContent: 'center',
                fontFamily: 'var(--font-mono)', fontSize: 13, color: '#888',
                textAlign: 'center', lineHeight: 1.4,
              }}>QR placeholder<br />assets/qr-resources.png</div>
            </div>
          </Reveal>

          {/* Book — centered below QR, slightly smaller so the whole stack fits with equal top/bottom whitespace */}
          <Reveal step={6} current={step} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10 }}>
            <img
              src="book/cover/entrepreneurs-cockpit-cover-LOCKED-2026-05-12.png"
              alt="The Entrepreneur's Cockpit — book cover"
              style={{ width: 320, height: 'auto', display: 'block', boxShadow: '0 36px 90px rgba(0,0,0,0.6), 0 0 44px rgba(0,212,255,0.2)' }}
              onError={(e) => { e.target.style.display = 'none'; }} />
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2 }}>
              <span style={{ fontFamily: 'var(--font-display)', fontSize: 20, color: 'var(--ink)', fontWeight: 800, letterSpacing: '-0.01em', textAlign: 'center' }}>The Entrepreneur's Cockpit</span>
              <span style={{ fontFamily: 'var(--font-display)', fontSize: 15, color: 'var(--ink-mute)' }}>by Josh Collier</span>
            </div>
          </Reveal>
        </div>

        {/* HEADLINE — kept clear of QR (top-right) and book (bottom-right) */}
        <Reveal step={1} current={step}>
          <SlideTitle style={{ fontSize: 50, margin: 0, lineHeight: 1.06, maxWidth: '70%' }}>
            Rebuild this from your <span style={{ color: 'var(--ink-mute)' }}>camera roll</span>.<br />
            Or <span style={{ color: cyan, textShadow: '0 0 18px var(--cyan-glow)' }}>scan this</span> and skip ahead.
          </SlideTitle>
        </Reveal>

        {/* LEFT BODY — 3 stacked CTA cards, sized to clear the bottom-right book */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16, marginTop: 22, flex: 1, minHeight: 0, maxWidth: '58%' }}>
          {ctas.map((c) => (
            <Reveal key={c.n} step={c.s} current={step} style={{ display: 'flex' }}>
              <div className="card" style={{
                padding: '18px 26px',
                flex: 1,
                display: 'flex',
                flexDirection: 'column',
                gap: 6,
                borderColor: c.color,
                background: c.color === cyan ? 'rgba(0,212,255,0.04)' : 'rgba(240,46,170,0.05)',
                position: 'relative',
                minHeight: 0,
                overflow: 'hidden',
                boxShadow: c.tier === 'PRO' ? '0 0 28px rgba(240,46,170,0.18)' : 'none',
              }}>
                <span className="corner-tl" /><span className="corner-br" />

                {/* Top row: number + tier badge */}
                <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 12 }}>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 24, color: c.color, letterSpacing: '0.18em', fontWeight: 700, textShadow: c.color === cyan ? '0 0 8px var(--cyan-glow)' : '0 0 8px var(--magenta-glow)' }}>{c.n}</span>
                  <span style={{
                    fontFamily: 'var(--font-mono)', fontSize: 15, color: c.color, letterSpacing: '0.22em', fontWeight: 700,
                    padding: '5px 14px', border: `1.5px solid ${c.color}`,
                    background: c.color === cyan ? 'rgba(0,212,255,0.08)' : 'rgba(240,46,170,0.10)',
                  }}>{c.tier}</span>
                </div>

                {/* Title */}
                <div style={{
                  fontFamily: 'var(--font-display)', fontSize: 32, fontWeight: 800, letterSpacing: '-0.02em',
                  color: c.color, lineHeight: 1.04, marginTop: 2,
                  textShadow: c.color === cyan ? '0 0 12px var(--cyan-glow)' : '0 0 12px var(--magenta-glow)',
                }}>{c.title}</div>

                {/* Body */}
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 19, color: 'var(--ink-soft)', lineHeight: 1.32, marginTop: 4 }}>
                  {c.body}
                </div>

                {/* Action line */}
                <div style={{ marginTop: 4, fontFamily: 'var(--font-mono)', fontSize: 14, color: 'var(--ink-mute)', letterSpacing: '0.18em', fontWeight: 700 }}>
                  → {c.action}
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </SlideShell>
    </div>
  );
}

// === Slide 16: The 6 Levels of Agentic Workforce Infrastructure ===
function Slide16() {
  const r = React.useRef();
  const { active, idx } = useIsActiveSlide(r);
  const step = useStepReveal(6, active, idx);

  // Bar widths show the compounding leverage between levels.
  const levels = [
    { n: 'L1', mult: '1x',   bar: 3,   label: 'Babysitter',     desc: 'Prompt by prompt. You still handhold the model.',                                  color: 'var(--ink-mute)', tier: 'manual',   s: 1 },
    { n: 'L2', mult: '2x',   bar: 6,   label: 'Context-Aware',  desc: 'Voice, rules, and memory. Fewer repeat explanations.',                             color: 'var(--ink)',      tier: 'manual',   s: 2 },
    { n: 'L3', mult: '4x',   bar: 13,  label: 'Delegator',      desc: 'Sub-agents split the work. You orchestrate.',                                      color: 'var(--magenta)',  tier: 'leverage', s: 3 },
    { n: 'L4', mult: '7x',   bar: 23,  label: 'Juggler',        desc: 'Parallel sessions. This is where most ambitious operators plateau.',                color: 'var(--magenta)',  tier: 'leverage', s: 4 },
    { n: 'L5', mult: '15x',  bar: 50,  label: 'System Owner',   desc: 'Agents run branches, tests, and PRs. You review.',                                 color: 'var(--cyan)',     tier: 'autonomy', s: 5 },
    { n: 'L6', mult: '30x+', bar: 100, label: 'Full Autonomy',  desc: 'Tag the issue. The loop closes itself.',                                           color: 'var(--cyan)',     tier: 'autonomy', s: 6 },
  ];

  const tierLabel = (t) => ({
    manual:   '// MANUAL · you are the bottleneck',
    leverage: '// LEVERAGE · most operators plateau',
    autonomy: '// AUTONOMY · the system runs itself',
  })[t];

  const tierAtIndex = (i) => {
    const cur = levels[i].tier;
    const prev = i > 0 ? levels[i - 1].tier : null;
    return cur !== prev ? cur : null;
  };

  return (
    <div ref={r} style={{ position: 'absolute', inset: 0 }}>
      <SlideShell eyebrow="The operator ladder">
        <SlideTitle style={{ fontSize: 64, lineHeight: 1.02, maxWidth: 1660 }}>The 6 levels of <span style={{ color: 'var(--cyan)' }}>agentic workforce infrastructure</span>.</SlideTitle>
        <div style={{ marginTop: 16, fontFamily: 'var(--font-display)', fontSize: 26, color: 'var(--ink-mute)', lineHeight: 1.28, maxWidth: 1260 }}>
          Most operators sit at 1 or 2. The leverage lives in the climb.
        </div>

        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 8, marginTop: 28, minHeight: 0 }}>
          {levels.map((lv, i) => {
            const shown = step >= lv.s;
            const isCyan = lv.color === 'var(--cyan)';
            const isMag = lv.color === 'var(--magenta)';
            const glow = isCyan ? '0 0 10px var(--cyan-glow)' : isMag ? '0 0 10px var(--magenta-glow)' : 'none';
            const barGlow = isCyan ? '0 0 18px rgba(0,212,255,0.55)' : isMag ? '0 0 14px rgba(240,46,170,0.45)' : 'none';
            const newTier = tierAtIndex(i);
            const tl = newTier ? tierLabel(newTier) : null;
            return (
              <React.Fragment key={lv.n}>
                {tl && (
                  <div style={{
                    fontFamily: 'var(--font-mono)',
                    fontSize: 15,
                    color: lv.color,
                    letterSpacing: '0.22em',
                    marginTop: i === 0 ? 0 : 10,
                    marginBottom: 3,
                    opacity: shown ? 0.85 : 0,
                    transition: 'opacity 0.4s ease',
                  }}>{tl}</div>
                )}
                <div style={{
                  display: 'flex',
                  alignItems: 'center',
                  gap: 34,
                  padding: '22px 26px',
                  border: `1.5px solid ${lv.color}`,
                  background: isCyan ? 'rgba(0,212,255,0.05)' : isMag ? 'rgba(240,46,170,0.04)' : 'rgba(10,14,26,0.03)',
                  position: 'relative',
                  opacity: shown ? 1 : 0,
                  transform: shown ? 'translateX(0)' : 'translateX(-12px)',
                  transition: 'opacity 0.45s ease, transform 0.45s ease',
                  boxShadow: lv.n === 'L6' ? '0 0 28px rgba(0,212,255,0.35)' : 'none',
                }}>
                  {/* Level badge */}
                  <div style={{ minWidth: 72, fontFamily: 'var(--font-mono)', fontSize: 26, color: lv.color, letterSpacing: '0.18em', fontWeight: 700, textShadow: glow }}>{lv.n}</div>

                  {/* Label */}
                  <div style={{ minWidth: 285, fontFamily: 'var(--font-display)', fontSize: 38, fontWeight: 700, letterSpacing: '-0.015em', color: lv.color, lineHeight: 1.05 }}>{lv.label}</div>

                  {/* Description — flexes to fill */}
                  <div style={{ flex: 1, fontFamily: 'var(--font-display)', fontSize: 25, color: 'var(--ink-soft)', lineHeight: 1.26 }}>{lv.desc}</div>

                  {/* Multiplier bar */}
                  <div style={{ width: 360, height: 28, background: 'rgba(10,14,26,0.06)', position: 'relative', border: '1px solid rgba(10,14,26,0.12)', flexShrink: 0 }}>
                    <div style={{
                      position: 'absolute',
                      top: 0, left: 0, bottom: 0,
                      width: `${lv.bar}%`,
                      background: lv.color,
                      boxShadow: barGlow,
                    }} />
                  </div>

                  {/* Multiplier number */}
                  <div style={{ minWidth: 100, textAlign: 'right', fontFamily: 'var(--font-display)', fontSize: 46, fontWeight: 700, color: lv.color, lineHeight: 1, letterSpacing: '-0.02em', textShadow: glow }}>{lv.mult}</div>
                </div>
              </React.Fragment>
            );
          })}
        </div>
      </SlideShell>
    </div>
  );
}

Object.assign(window, {
  Slide12, Slide13, Slide16, Slide17, Slide18, Slide19, Slide20
});