/* 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: 'Custom interface / operating system run locally on your machine. This is what I build.', tier: 'apex', s: 9 },
    { label: 'OpenClaw (Agent Harness)', sub: 'Autonomous · multi-model · agent runtime', tier: 'peak', s: 8 },
    { label: 'Claude Code + Codex', sub: 'Terminal workflows · browser control · coding agents', tier: 'advanced', s: 7 },
    { label: 'Claude Cowork + Codex Browser', sub: 'Deploy · dispatch · build agents for you', tier: 'advanced', s: 6 },
    { label: 'Skills · MCPs · Hooks · Managed Agents', sub: 'The primitives · plugins · connectors', tier: 'config', s: 5 },
    { label: 'Claude Desktop + Chrome Extension', sub: 'Top starting point · 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 / Codex interviews your life + business', tier: 'foundation', s: 2 },
    { label: 'Start with Claude + Codex', 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: level.tier === 'apex' ? 32 : 30, fontWeight: 700, color: t.color, letterSpacing: '-0.015em', whiteSpace: 'nowrap', lineHeight: 1 }}>{level.label}</span>
                    <span style={{ fontFamily: 'var(--font-mono)', fontSize: level.tier === 'apex' ? 16 : 17, color: t.subColor, opacity: 0.78, whiteSpace: level.tier === 'apex' ? 'normal' : 'nowrap', textAlign: 'right', lineHeight: 1.12, letterSpacing: '0.045em', maxWidth: level.tier === 'apex' ? 560 : 'none' }}>{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: 26, marginTop: 26, 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: '28px 32px', flex: 1, display: 'flex', flexDirection: 'column', gap: 12, 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: 31, color: 'var(--ink-soft)', lineHeight: 1.22, marginTop: 6, fontWeight: 560 }}>{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="Example ecosystem - Claude">
        <SlideTitle style={{ fontSize: 66, whiteSpace: 'nowrap' }}>
          Example Ecosystem - <span style={{ color: cyan }}>Claude.</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>
  );
}

// === Draft Addition: Josh's Actual Cockpit Setup ===
function Slide18JoshCockpit() {
  const r = React.useRef();
  const { active, idx } = useIsActiveSlide(r);
  const step = useStepReveal(5, active, idx);

  const cyan = 'var(--cyan)';
  const magenta = 'var(--magenta)';
  const layers = [
    {
      s: 4, w: '64%', color: cyan, label: '// THIRD LAYER', title: 'Control System',
      lines: ['Commands', 'Skills', 'File structure', 'Orchestration rules']
    },
    {
      s: 3, w: '82%', color: magenta, label: '// SECONDARY LAYER', title: 'Tool Plumbing',
      lines: ['APIs', 'MCPs', 'CLIs', 'Connectors', 'Apps']
    },
    {
      s: 2, w: '100%', color: cyan, label: '// PRIMARY LAYER', title: 'Tools I Talk To',
      lines: ['Claude Code', 'Codex desktop', 'Obsidian', 'GitHub']
    },
  ];

  return (
    <div ref={r} style={{ position: 'absolute', inset: 0 }}>
      <SlideShell eyebrow="My actual cockpit — one operator, one fleet">
        <SlideTitle style={{ fontSize: 70, whiteSpace: 'nowrap' }}>
          How I <span style={{ color: cyan }}>fly the plane</span> from my phone.
        </SlideTitle>

        <Reveal step={1} current={step}>
          <div style={{
            marginTop: 16,
            padding: '20px 28px',
            border: '1px solid var(--line)',
            background: 'rgba(10,14,26,0.025)',
            display: 'grid',
            gridTemplateColumns: '1fr auto 1fr',
            gap: 22,
            alignItems: 'center',
          }}>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 30, color: 'var(--ink)', fontWeight: 700, lineHeight: 1.12 }}>
              Laptop stays plugged in at home.
            </div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 26, color: magenta, fontWeight: 800 }}>→</div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 30, color: cyan, fontWeight: 800, lineHeight: 1.12, textShadow: '0 0 12px var(--cyan-glow)' }}>
              Phone becomes the cockpit.
            </div>
          </div>
        </Reveal>

        <div style={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', gap: 18, marginTop: 24 }}>
          {layers.map(layer => (
            <Reveal key={layer.label} step={layer.s} current={step} style={{ width: layer.w, display: 'flex' }}>
              <div className="card" style={{
                padding: '26px 34px',
                width: '100%',
                minHeight: 140,
                borderColor: layer.color,
                background: layer.color === cyan ? 'rgba(0,212,255,0.05)' : 'rgba(240,46,170,0.045)',
                display: 'grid',
                gridTemplateColumns: '310px 1fr',
                gap: 28,
                alignItems: 'center',
                boxShadow: layer.w === '64%' ? '0 0 30px rgba(0,212,255,0.22)' : 'none',
              }}>
                <span className="corner-tl" style={{ borderColor: layer.color }} /><span className="corner-br" style={{ borderColor: layer.color }} />
                <div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 20, color: layer.color, letterSpacing: '0.17em', fontWeight: 800 }}>{layer.label}</div>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 46, color: layer.color, lineHeight: 1, fontWeight: 850, letterSpacing: '-0.02em', marginTop: 8 }}>{layer.title}</div>
                </div>
                <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', justifyContent: 'flex-end' }}>
                  {layer.lines.map(line => (
                    <span key={line} style={{
                      fontFamily: 'var(--font-display)',
                      fontSize: 28,
                      color: 'var(--ink)',
                      fontWeight: 750,
                      lineHeight: 1,
                      padding: '12px 16px',
                      border: '1px solid rgba(10,14,26,0.12)',
                      background: 'rgba(255,255,255,0.62)',
                    }}>{line}</span>
                  ))}
                </div>
              </div>
            </Reveal>
          ))}
          <Reveal step={5} current={step}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 18, color: 'var(--ink-mute)', letterSpacing: '0.12em', marginTop: 4 }}>
              ZERO EMPLOYEES · CORE OVERHEAD: AI SUBSCRIPTIONS + PHONE + INTERNET
            </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(7, active, idx);

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

  const promptLines = [
    'You are my Agent Orchestrator.',
    'Interview me first, one question at a time.',
    'Map my personal brand, business systems, files, apps, and recurring workflows.',
    'Identify the agents I need based on the interview.',
    'For each agent, define its identity, tools, memory, schedule, reporting, and success criteria.',
    'After the interview, build the agent files, prompts, folders, commands, and setup steps for me.',
    'Confirm before changing anything live.',
    '',
    'Repeat this process for every agent I need built.',
  ];

  const steps = [
    { s: 1, color: cyan, n: '01', title: 'Download Claude + Codex/GPT' },
    { s: 2, color: magenta, n: '02', title: 'Install Chrome. Learn Browser.' },
    { s: 3, color: cyan, n: '03', title: 'Paste prompt into either or both' },
    { s: 4, color: magenta, n: '04', title: 'Tell AI to build after interview' },
    { s: 5, color: cyan, n: '05', title: 'Manage from phone. Go golf.' },
  ];

  return (
    <div ref={r} style={{ position: 'absolute', inset: 0 }}>
      <SlideShell eyebrow="The init prompt">
        <SlideTitle style={{ fontSize: 64, whiteSpace: 'nowrap' }}>
          Paste this. Let it <span style={{ color: cyan }}>interview you</span>.
        </SlideTitle>

        <div style={{ flex: 1, minHeight: 0, display: 'grid', gridTemplateColumns: '0.95fr 1.05fr', gap: 24, marginTop: 22 }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12, minHeight: 0 }}>
            {steps.map(item => (
              <Reveal key={item.n} step={item.s} current={step} style={{ display: 'flex', flex: 1, minHeight: 0 }}>
                <div style={{
                  flex: 1,
                  display: 'grid',
                  gridTemplateColumns: '58px 1fr',
                  gap: 16,
                  alignItems: 'center',
                  padding: '13px 18px',
                  border: `1.5px solid ${item.color}`,
                  background: item.color === cyan ? 'rgba(0,212,255,0.045)' : 'rgba(240,46,170,0.045)',
                  position: 'relative',
                  minHeight: 0,
                  overflow: 'hidden',
                }}>
                  <span className="corner-tl" style={{ borderColor: item.color }} /><span className="corner-br" style={{ borderColor: item.color }} />
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 24, color: item.color, letterSpacing: '0.14em', fontWeight: 850, textShadow: item.color === cyan ? '0 0 10px var(--cyan-glow)' : '0 0 10px var(--magenta-glow)' }}>{item.n}</div>
                  <div>
                    <div style={{ fontFamily: 'var(--font-display)', fontSize: 26, color: item.color, fontWeight: 850, lineHeight: 1.02, letterSpacing: '-0.02em', textShadow: item.color === cyan ? '0 0 10px var(--cyan-glow)' : '0 0 10px var(--magenta-glow)' }}>{item.title}</div>
                  </div>
                </div>
              </Reveal>
            ))}
            <Reveal step={6} current={step}>
              <div style={{
                fontFamily: 'var(--font-mono)',
                fontSize: 18,
                color: 'var(--ink-mute)',
                letterSpacing: '0.14em',
                padding: '10px 4px 0',
                textAlign: 'center',
                fontWeight: 700,
              }}>
                REPEAT FOR EVERY AGENT THE INTERVIEW UNCOVERS
              </div>
            </Reveal>
          </div>

          <Reveal step={7} current={step} style={{ minHeight: 0, display: 'flex' }}>
          <div style={{
            position: 'relative',
              border: `2px solid ${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: cyan }} />
              <span className="corner-tr" style={{ borderColor: cyan }} />
              <span className="corner-bl" style={{ borderColor: cyan }} />
              <span className="corner-br" style={{ borderColor: 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: 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: '28px 38px',
              fontFamily: 'var(--font-mono)',
                fontSize: 25,
                lineHeight: 1.36,
              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('Repeat') ? '#ffd166'
                      : '#e2f4ff',
                    whiteSpace: 'pre-wrap',
                    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: cyan, textShadow: '0 0 12px var(--cyan-glow)' }}>▊</span>
              </div>
            </div>
          </div>
        </Reveal>
        </div>
      </SlideShell>
    </div>
  );
}

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

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

  const ctas = [
    {
      s: 1, n: '01', tier: 'FREE', color: cyan,
      title: 'The Agentic Cookbook',
      body: 'The init prompt, agent recipes, setup path, memory layer, and commands cheat sheet. Built to paste into Claude / Codex.',
      action: 'Free · scan + enter email',
    },
    {
      s: 2, n: '02', tier: 'DFY', color: magenta,
      title: 'DFY Agentic Cockpit',
      body: 'I become your AI Officer and help build your cockpit, agents, workflows, and operating system with you.',
      action: 'Private engagement',
    },
  ];

  return (
    <div ref={r} style={{ position: 'absolute', inset: 0 }}>
      <SlideShell eyebrow="Action items">
        <div style={{ flex: 1, minHeight: 0, display: 'grid', gridTemplateColumns: '0.95fr 1.05fr', gap: 48, alignItems: 'stretch' }}>
          <div style={{ minHeight: 0, display: 'flex', flexDirection: 'column' }}>
            <Reveal step={1} current={step}>
              <SlideTitle style={{ fontSize: 64, margin: 0, lineHeight: 1.02 }}>
                Scan once.<br />
                Start building <span style={{ color: cyan, textShadow: '0 0 18px var(--cyan-glow)' }}>tonight</span>.
              </SlideTitle>
            </Reveal>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 26, marginTop: 34, flex: 1, minHeight: 0 }}>
              {ctas.map((c) => (
                <Reveal key={c.n} step={c.s} current={step} style={{ display: 'flex', flex: 1, minHeight: 0 }}>
              <div className="card" style={{
                    padding: '34px 38px',
                flex: 1,
                display: 'flex',
                flexDirection: 'column',
                    justifyContent: 'center',
                    gap: 8,
                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 === 'DFY' ? '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: 30, 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: 17, color: c.color, letterSpacing: '0.22em', fontWeight: 700,
                        padding: '7px 16px', 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: 48, fontWeight: 850, 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: 32, color: 'var(--ink-soft)', lineHeight: 1.22, marginTop: 8, fontWeight: 560 }}>
                  {c.body}
                </div>

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

          <Reveal step={4} current={step} style={{ display: 'flex', minHeight: 0 }}>
            <div className="card" style={{
              flex: 1,
              minHeight: 0,
              borderColor: cyan,
              background: 'rgba(0,212,255,0.045)',
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
              justifyContent: 'center',
              gap: 26,
              padding: '40px 48px',
              position: 'relative',
              boxShadow: '0 0 46px rgba(0,212,255,0.24)',
            }}>
              <span className="corner-tl" style={{ borderColor: cyan }} /><span className="corner-tr" style={{ borderColor: cyan }} />
              <span className="corner-bl" style={{ borderColor: cyan }} /><span className="corner-br" style={{ borderColor: cyan }} />

              <div style={{ textAlign: 'center' }}>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 20, color: 'var(--ink-mute)', letterSpacing: '0.22em', fontWeight: 800 }}>
                  // GET THE RESOURCE
                </div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 54, color: cyan, fontWeight: 900, lineHeight: 1.02, letterSpacing: '-0.025em', marginTop: 12, textShadow: '0 0 20px var(--cyan-glow)' }}>
                  The Agentic Cookbook
                </div>
              </div>

              <div style={{
                position: 'relative',
                padding: 18,
                background: '#f8fbff',
                border: `2px solid ${cyan}`,
                boxShadow: '0 0 44px rgba(0,212,255,0.42)',
              }}>
                <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: 470, height: 470, display: 'block', imageRendering: 'pixelated' }}
                  onError={(e) => { e.target.style.display = 'none'; e.target.nextSibling.style.display = 'flex'; }} />
                <div style={{
                  display: 'none', width: 470, height: 470,
                  alignItems: 'center', justifyContent: 'center',
                  fontFamily: 'var(--font-mono)', fontSize: 18, color: '#667',
                  textAlign: 'center', lineHeight: 1.4,
                }}>QR placeholder<br />assets/qr-resources.png</div>
              </div>

              <div style={{ fontFamily: 'var(--font-display)', fontSize: 30, fontWeight: 850, color: 'var(--ink)', letterSpacing: '-0.015em' }}>
                joshcollier.ai/resources
              </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
});