/* Slides 1-11 for Entrepreneurs Cockpit — rebuilt May 2026 */

// === Slide 1: Title ===
function Slide01() {
  const r = React.useRef();
  const { active, idx } = useIsActiveSlide(r);
  return (
    <div ref={r} style={{ position: 'absolute', inset: 0 }}>
      <SlideShell hudCorners={true} gridBg={true}>
        <div style={{ flex: 1, display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) 600px', gap: 64, alignItems: 'center', position: 'relative' }}>
          <div style={{ minWidth: 0 }}>
            <div className="eyebrow" style={{ marginBottom: 32, fontSize: 26 }}>
              <span className="dot" />A TALK BY JOSH COLLIER
            </div>
            <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 126, fontWeight: 700, lineHeight: 0.94, letterSpacing: '-0.04em', margin: 0 }}>
              The Entrepreneur's<br />
              <span style={{ color: 'var(--cyan)', textShadow: '0 0 30px var(--cyan-glow)' }}>Cockpit</span>
            </h1>
            <div style={{ marginTop: 42, display: 'flex', alignItems: 'baseline', gap: 16, flexWrap: 'wrap' }}>
              <Mono style={{ fontSize: 24, color: 'var(--ink-mute)' }}>aka.</Mono>
              <Mono style={{ fontSize: 26, color: 'var(--ink)', letterSpacing: '0.06em' }}>agentic workforce infrastructure</Mono>
            </div>
            <p style={{ fontFamily: 'var(--font-display)', fontSize: 36, fontWeight: 400, lineHeight: 1.22, color: 'var(--ink-soft)', marginTop: 58, maxWidth: 900, letterSpacing: '-0.01em' }}>
              How to build the system that <em style={{ fontStyle: 'normal', color: 'var(--magenta)', textShadow: '0 0 16px var(--magenta-glow)' }}>activates your superpowers</em>.
            </p>
          </div>
          <div style={{ position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center', alignSelf: 'center' }}>
            <div style={{ position: 'absolute', width: 760, height: 860, background: 'radial-gradient(circle at center, rgba(0,212,255,0.18) 0%, rgba(255,43,214,0.08) 44%, rgba(0,212,255,0) 72%)', filter: 'blur(2px)' }} />
            <img
              src="book/cover/entrepreneurs-cockpit-cover-LOCKED-2026-05-12.png"
              alt="The Entrepreneur's Cockpit book cover"
              style={{ position: 'relative', width: 520, height: 'auto', objectFit: 'contain', boxShadow: '0 54px 120px rgba(0,0,0,0.58), 0 0 72px rgba(0,212,255,0.28)' }}
            />
          </div>
          <svg style={{ position: 'absolute', right: -120, bottom: -80, opacity: 0.5 }} width="640" height="640" viewBox="0 0 640 640">
            <circle cx="320" cy="320" r="280" fill="none" stroke="var(--cyan)" strokeWidth="1" strokeDasharray="2 6" />
            <circle cx="320" cy="320" r="220" fill="none" stroke="var(--cyan)" strokeWidth="1" opacity="0.5" />
            <circle cx="320" cy="320" r="160" fill="none" stroke="var(--magenta)" strokeWidth="1" strokeDasharray="8 4" opacity="0.4" />
            <circle cx="320" cy="320" r="6" fill="var(--cyan)" />
          </svg>
        </div>
      </SlideShell>
    </div>);

}

// === Slide 2: Who I Am ===
function Slide02() {
  const r = React.useRef();
  const { active, idx } = useIsActiveSlide(r);
  const step = useStepReveal(4, active, idx);
  return (
    <div ref={r} style={{ position: 'absolute', inset: 0 }}>
      <SlideShell eyebrow="About me">
        <div style={{ display: 'grid', gridTemplateColumns: '420px 1fr', gap: 48, marginTop: 20, alignItems: 'start' }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
            <div style={{ position: 'relative', paddingBottom: 80 }}>
              <div style={{ width: 380, height: 340, background: `url('assets/joshua.jpeg') center/cover`, border: '1px solid var(--line)', filter: 'contrast(1.05)' }} />
              <div style={{ position: 'absolute', top: -14, left: -14, width: 24, height: 24, borderTop: '2px solid var(--cyan)', borderLeft: '2px solid var(--cyan)' }} />
              <div style={{ position: 'absolute', bottom: -14, right: -14, width: 24, height: 24, borderBottom: '2px solid var(--cyan)', borderRight: '2px solid var(--cyan)' }} />
              <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, display: 'grid', gap: 6, fontFamily: 'var(--font-mono)', fontSize: 24, color: 'var(--ink-mute)', letterSpacing: '0.06em', whiteSpace: 'nowrap' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                  <span>ID // JC-1998</span><span>EST. 10/10/98</span>
                </div>
                <div style={{ borderTop: '1px solid var(--cyan)', paddingTop: 6 }}>NASHVILLE, TN</div>
              </div>
            </div>
            <div style={{ position: 'relative', paddingBottom: 80 }}>
              <div style={{ width: 380, height: 340, background: `url('assets/dog.jpeg') center/cover`, border: '1px solid var(--line)', filter: 'contrast(1.05)' }} />
              <div style={{ position: 'absolute', top: -14, left: -14, width: 24, height: 24, borderTop: '2px solid var(--magenta)', borderLeft: '2px solid var(--magenta)' }} />
              <div style={{ position: 'absolute', bottom: -14, right: -14, width: 24, height: 24, borderBottom: '2px solid var(--magenta)', borderRight: '2px solid var(--magenta)' }} />
              <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, display: 'grid', gap: 6, fontFamily: 'var(--font-mono)', fontSize: 24, color: 'var(--ink-mute)', letterSpacing: '0.06em', whiteSpace: 'nowrap' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                  <span>ID // FAITH-22</span><span>EST. 2022</span>
                </div>
                <div style={{ borderTop: '1px solid var(--magenta)', paddingTop: 6 }}>CHIEF MORALE OFFICER</div>
              </div>
            </div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
            <h1 style={{ fontSize: 60, fontWeight: 700, lineHeight: 1, margin: 0, letterSpacing: '-0.03em' }}>Who I Am</h1>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 24, color: 'var(--cyan)', letterSpacing: '0.12em', marginTop: -12 }}>
              <span className="dot" style={{ marginRight: 10 }} />FOUNDER · MOREOPPORTUNITY.IO
            </div>
            <Reveal step={1} current={step}>
              <Body>I've been an entrepreneur for 9 years — started at 18, back in 2018. Born &amp; raised in TN. Pastor's son.</Body>
            </Reveal>
            <Reveal step={2} current={step}>
              <Body>Started in financial services. Failed the Series 7 three times. Pivoted into high-ticket coaching, then into AI. Built the online industry's first voice and chat AI combo in early 2023.</Body>
            </Reveal>
            <Reveal step={3} current={step}>
              <Body>Worked directly with companies like GoHighLevel &amp; ClickFunnels, and hundreds more, generating millions for my clients.</Body>
            </Reveal>
            <Reveal step={4} current={step}>
              <Body>Made one client over $1M in 90 days through an AI-powered database reactivation campaign.</Body>
            </Reveal>
            <Reveal step={4} current={step}>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, marginTop: 8 }}>
                {[['300+', 'founders served'], ['30+', 'industries'], ['10,000s', 'appointments booked']].map(([n, l]) =>
                <div key={l} className="card" style={{ padding: 24 }}>
                    <span className="corner-tl" /><span className="corner-br" />
                    <div style={{ fontFamily: 'var(--font-mono)', fontSize: 36, color: 'var(--cyan)', textShadow: '0 0 12px var(--cyan-glow)', fontWeight: 600 }}>{n}</div>
                    <div style={{ fontFamily: 'var(--font-mono)', fontSize: 20, color: 'var(--ink-mute)', letterSpacing: '0.08em', textTransform: 'uppercase', marginTop: 4 }}>{l}</div>
                  </div>
                )}
              </div>
            </Reveal>
          </div>
        </div>
      </SlideShell>
    </div>);

}

// === Slide 3: My Belief ===
function Slide03() {
  const r = React.useRef();
  const { active, idx } = useIsActiveSlide(r);
  const step = useStepReveal(3, active, idx);
  return (
    <div ref={r} style={{ position: 'absolute', inset: 0 }}>
      <SlideShell eyebrow="The state of entrepreneurship">
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', maxWidth: 1700, paddingBottom: 20 }}>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 25, color: 'var(--cyan)', letterSpacing: '0.18em', fontWeight: 700, display: 'block', marginBottom: 28 }}>// 300+ FOUNDERS — WORD FOR WORD, WHAT I'M HEARING</span>

          <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 72, fontWeight: 700, lineHeight: 1.02, letterSpacing: '-0.022em', margin: 0, color: 'var(--ink)', maxWidth: 1500 }}>
            Founders are overloaded, lost,<br />
            and quietly <span style={{ color: 'var(--cyan)', textShadow: '0 0 24px var(--cyan-glow)' }}>searching for something deeper</span>.
          </h1>

          {/* Three pain cards — verbatim from founder calls */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 28, marginTop: 84 }}>
            <Reveal step={1} current={step} style={{ height: '100%', display: 'flex' }}>
              <div className="card" style={{ padding: '30px 32px', flex: 1, display: 'flex', flexDirection: 'column', gap: 16, borderColor: 'var(--magenta)', background: 'rgba(240,46,170,0.04)', minHeight: 220 }}>
                <span className="corner-tl" /><span className="corner-br" />
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 19, color: 'var(--magenta)', letterSpacing: '0.14em', fontWeight: 700 }}>// PAIN 01</span>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 34, fontWeight: 700, lineHeight: 1.14, color: 'var(--ink)', letterSpacing: '-0.005em' }}>"Too many tools. None of them talk."</div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 25, color: 'var(--ink-soft)', lineHeight: 1.3 }}>Tool sprawl dressed up as productivity.</div>
              </div>
            </Reveal>
            <Reveal step={2} current={step} style={{ height: '100%', display: 'flex' }}>
              <div className="card" style={{ padding: '30px 32px', flex: 1, display: 'flex', flexDirection: 'column', gap: 16, borderColor: 'var(--magenta)', background: 'rgba(240,46,170,0.04)', minHeight: 220 }}>
                <span className="corner-tl" /><span className="corner-br" />
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 19, color: 'var(--magenta)', letterSpacing: '0.14em', fontWeight: 700 }}>// PAIN 02</span>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 34, fontWeight: 700, lineHeight: 1.14, color: 'var(--ink)', letterSpacing: '-0.005em' }}>"Progress, reset. Progress, reset."</div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 25, color: 'var(--ink-soft)', lineHeight: 1.3 }}>Systems get rebuilt before they compound.</div>
              </div>
            </Reveal>
            <Reveal step={3} current={step} style={{ height: '100%', display: 'flex' }}>
              <div className="card" style={{ padding: '30px 32px', flex: 1, display: 'flex', flexDirection: 'column', gap: 16, borderColor: 'var(--cyan)', background: 'rgba(0,212,255,0.06)', boxShadow: '0 0 20px rgba(0,212,255,0.18)', minHeight: 220 }}>
                <span className="corner-tl" /><span className="corner-tr" /><span className="corner-bl" /><span className="corner-br" />
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 19, color: 'var(--cyan)', letterSpacing: '0.14em', fontWeight: 700 }}>// PAIN 03</span>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 34, fontWeight: 700, lineHeight: 1.14, color: 'var(--cyan)', letterSpacing: '-0.005em', textShadow: '0 0 12px var(--cyan-glow)' }}>"I made the money. Now what?"</div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 25, color: 'var(--ink-soft)', lineHeight: 1.3 }}>The number landed. The meaning did not.</div>
              </div>
            </Reveal>
          </div>
        </div>
      </SlideShell>
    </div>);

}

// === Slide 4: Iron Man Pattern Interrupt ===
function Slide04() {
  const r = React.useRef();
  const { active, idx } = useIsActiveSlide(r);
  return (
    <div ref={r} style={{ position: 'absolute', inset: 0, background: 'var(--bg)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', gap: 32 }}>
      <Mono style={{ fontSize: 26, color: 'var(--cyan)', letterSpacing: '0.22em' }}>// QUICK SHOW OF HANDS</Mono>
      <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 108, fontWeight: 700, lineHeight: 1, letterSpacing: '-0.04em', margin: 0, color: 'var(--ink)', textAlign: 'center', whiteSpace: 'nowrap' }}>
        Who's seen all the <span style={{ color: 'var(--cyan)', textShadow: '0 0 40px var(--cyan-glow)' }}>Iron Man</span> movies?
      </h1>
    </div>);

}

// === Slide 5: What Made Tony Stark... Iron Man? ===
function Slide05() {
  const r = React.useRef();
  const { active, idx } = useIsActiveSlide(r);
  // 3 steps: BEFORE → VS → AFTER, pop one at a time
  const step = useStepReveal(3, active, idx);
  return (
    <div ref={r} style={{ position: 'absolute', inset: 0 }}>
      <style>{`
        @keyframes s5b-fade-up { from { opacity: 0; transform: translateY(28px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
        @keyframes s5b-vs-punch { 0% { opacity: 0; transform: scale(0.3) rotate(-12deg); } 55% { opacity: 1; transform: scale(1.35) rotate(6deg); text-shadow: 0 0 48px var(--magenta), 0 0 24px var(--magenta-glow); } 80% { transform: scale(0.92) rotate(-2deg); } 100% { opacity: 1; transform: scale(1) rotate(0); text-shadow: 0 0 24px var(--magenta-glow); } }
        @keyframes s5b-after-glow { 0% { opacity: 0; transform: translateY(28px) scale(0.96); filter: drop-shadow(0 0 0 var(--cyan)); } 60% { opacity: 1; transform: translateY(-4px) scale(1.02); filter: drop-shadow(0 0 32px var(--cyan)); } 100% { opacity: 1; transform: translateY(0) scale(1); filter: drop-shadow(0 0 10px rgba(0,212,255,0.45)); } }
        .s5b-before { animation: s5b-fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
        .s5b-vs { animation: s5b-vs-punch 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
        .s5b-after { animation: s5b-after-glow 0.9s cubic-bezier(0.16, 1, 0.3, 1) both; }
      `}</style>
      <SlideShell eyebrow="The transformation">
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 48 }}>
          <SlideTitle style={{ fontSize: 88, textAlign: 'center', margin: 0, whiteSpace: 'nowrap' }}>What made Tony Stark... <span style={{ color: 'var(--cyan)' }}>Iron Man?</span></SlideTitle>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr auto 1fr', gap: 24, alignItems: 'center', justifyItems: 'center', width: '100%', maxWidth: 1500 }}>
            {/* Before — step 1 */}
            <div className={step >= 1 ? 's5b-before' : ''} style={{ display: 'flex', flexDirection: 'column', gap: 20, alignItems: 'center', opacity: step >= 1 ? 1 : 0 }}>
              <img src="assets/tony-before-v2.png" alt="Tony before" style={{ maxWidth: '100%', maxHeight: 560, objectFit: 'contain' }} />
              <Mono style={{ fontSize: 26, letterSpacing: '0.18em', color: 'var(--ink-mute)', textAlign: 'center' }}>BEFORE</Mono>
            </div>
            {/* VS — step 2 */}
            <div className={step >= 2 ? 's5b-vs' : ''} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', opacity: step >= 2 ? 1 : 0 }}>
              <span style={{ fontFamily: 'var(--font-display)', fontSize: 72, fontWeight: 700, color: 'var(--magenta)', textShadow: '0 0 24px var(--magenta-glow)', letterSpacing: '-0.02em' }}>vs</span>
            </div>
            {/* After — step 3 */}
            <div className={step >= 3 ? 's5b-after' : ''} style={{ display: 'flex', flexDirection: 'column', gap: 20, alignItems: 'center', opacity: step >= 3 ? 1 : 0 }}>
              <img src="assets/iron-man-suited-v2.png" alt="Iron Man" style={{ maxWidth: '100%', maxHeight: 560, objectFit: 'contain' }} />
              <Mono style={{ fontSize: 26, letterSpacing: '0.18em', color: 'var(--cyan)', textAlign: 'center' }}>AFTER</Mono>
            </div>
          </div>
        </div>
      </SlideShell>
    </div>);

}

// === Slide 5: Was It? — Elimination ===
function Slide06() {
  const r = React.useRef();
  const { active, idx } = useIsActiveSlide(r);
  // 4 steps: Q1+No1, Q2+No2, Q3+No3, finale
  const step = useStepReveal(4, active, idx);
  const items = [
  { q: 'His brain?',  s: 1 },
  { q: 'His money?',  s: 2 },
  { q: 'His looks?',  s: 3 }];

  return (
    <div ref={r} style={{ position: 'absolute', inset: 0 }}>
      <style>{`
        @keyframes s5-slide-in { from { opacity: 0; transform: translateX(-48px); } to { opacity: 1; transform: translateX(0); } }
        @keyframes s5-no-punch { 0% { opacity: 0; transform: scale(0.4) rotate(-8deg); } 55% { opacity: 1; transform: scale(1.18) rotate(2deg); } 80% { transform: scale(0.96) rotate(-1deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }
        @keyframes s5-slash { 0% { transform: scaleX(0); filter: drop-shadow(0 0 0 var(--magenta)); } 50% { filter: drop-shadow(0 0 18px var(--magenta)); } 100% { transform: scaleX(1); filter: drop-shadow(0 0 6px var(--magenta-glow)); } }
        @keyframes s5-cockpit-in { 0% { opacity: 0; transform: translateY(28px) scale(0.96); box-shadow: 0 0 0 rgba(0,212,255,0); } 60% { opacity: 1; transform: translateY(-4px) scale(1.015); box-shadow: 0 0 64px rgba(0,212,255,0.6); } 100% { opacity: 1; transform: translateY(0) scale(1); box-shadow: 0 0 28px rgba(0,212,255,0.3); } }
        @keyframes s5-infra-pulse { 0%,100% { text-shadow: 0 0 24px var(--cyan-glow); } 50% { text-shadow: 0 0 44px var(--cyan), 0 0 12px var(--cyan-glow); } }
        .s5-q { animation: s5-slide-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) both; }
        .s5-no { animation: s5-no-punch 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
        .s5-slash { animation: s5-slash 0.55s ease-out 0.22s both; transform-origin: left center; }
        .s5-cockpit { animation: s5-cockpit-in 0.85s cubic-bezier(0.16, 1, 0.3, 1) both; }
        .s5-infra { animation: s5-infra-pulse 2.4s ease-in-out 0.85s infinite; display: inline-block; }
      `}</style>
      <SlideShell eyebrow="The question">
        <SlideTitle style={{ fontSize: 100 }}>Was it...</SlideTitle>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 32, marginTop: 56, flex: 1 }}>
          {items.map((item, i) =>
          <Reveal key={item.q} step={item.s} current={step}>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 32 }}>
                <div className={step >= item.s ? 's5-q' : ''} style={{ fontFamily: 'var(--font-display)', fontSize: 56, fontWeight: 700, letterSpacing: '-0.02em', color: 'var(--ink)', minWidth: 420 }}>{item.q}</div>
                <div className={step >= item.s ? 's5-no' : ''} style={{ fontFamily: 'var(--font-display)', fontSize: 56, fontWeight: 700, color: 'var(--magenta)', letterSpacing: '-0.02em', position: 'relative', display: 'inline-block', opacity: step >= item.s ? 1 : 0, textShadow: step >= item.s ? '0 0 22px var(--magenta-glow)' : 'none' }}>
                  No
                  <span className={step >= item.s ? 's5-slash' : ''} style={{ position: 'absolute', left: -8, right: -8, top: '52%', height: 5, background: 'var(--magenta)', boxShadow: '0 0 14px var(--magenta-glow)', transform: step >= item.s ? 'scaleX(1)' : 'scaleX(0)' }} />
                </div>
              </div>
              {i < items.length - 1 && <div style={{ height: 1, background: 'var(--line-soft)', marginTop: 24 }} />}
            </Reveal>
          )}
          <Reveal step={4} current={step}>
            <div className={step >= 4 ? 's5-cockpit' : ''} style={{ marginTop: 32, padding: '36px 48px', border: '1px solid var(--cyan)', background: 'rgba(0,212,255,0.04)', position: 'relative' }}>
              <span className="corner-tl" /><span className="corner-tr" /><span className="corner-bl" /><span className="corner-br" />
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 56, fontWeight: 700, letterSpacing: '-0.03em', color: 'var(--ink)' }}>
                It was <span className={step >= 4 ? 's5-infra' : ''} style={{ color: 'var(--cyan)', textShadow: '0 0 24px var(--cyan-glow)' }}>his infrastructure</span> (software + hardware).
              </div>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 32, color: 'var(--ink-mute)', marginTop: 12 }}>
                Without the suit — and without Jarvis — Tony Stark was just... Tony Stark.
              </div>
            </div>
          </Reveal>
        </div>
      </SlideShell>
    </div>);

}

// === Slide 6: The Equation — Hardware + Software = Catalyst ===
function Slide07() {
  const r = React.useRef();
  const { active, idx } = useIsActiveSlide(r);
  const step = useStepReveal(5, active, idx);
  return (
    <div ref={r} style={{ position: 'absolute', inset: 0 }}>
      <SlideShell eyebrow="The transformation equation">
        <SlideTitle style={{ fontSize: 76, whiteSpace: 'nowrap' }}>
          Hardware + Software = <span style={{ color: 'var(--cyan)' }}>The Catalyst.</span>
        </SlideTitle>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr auto 1fr auto 1fr', gap: 0, marginTop: 36, flex: 1, alignItems: 'stretch' }}>
          {/* Hardware */}
          <Reveal step={1} current={step}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14, height: '100%' }}>
              <div style={{ flex: 1, background: `url('assets/iron-man-suit-lineup.png') center/cover no-repeat`, border: '1px solid var(--cyan)', minHeight: 360 }} />
              <div style={{ padding: '22px 26px', border: '1px solid var(--cyan)', background: 'rgba(0,212,255,0.04)', position: 'relative' }}>
                <span className="corner-tl" /><span className="corner-br" />
                <Mono style={{ fontSize: 20, color: 'var(--cyan)', letterSpacing: '0.18em' }}>// HARDWARE</Mono>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 42, fontWeight: 700, marginTop: 8, lineHeight: 1 }}>MK1 → MK+</div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 36, fontWeight: 800, color: 'var(--cyan)', marginTop: 10, letterSpacing: '-0.01em', textShadow: '0 0 14px var(--cyan-glow)' }}>The muscle.</div>
              </div>
            </div>
          </Reveal>
          {/* + connector */}
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '0 18px' }}>
            <span style={{ fontFamily: 'var(--font-display)', fontSize: 80, fontWeight: 700, color: 'var(--magenta)', textShadow: '0 0 18px var(--magenta-glow)', opacity: step >= 2 ? 1 : 0, transform: step >= 2 ? 'scale(1)' : 'scale(0.6)', transition: 'opacity 0.4s ease, transform 0.4s ease' }}>+</span>
          </div>
          {/* Software */}
          <Reveal step={3} current={step}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14, height: '100%' }}>
              <div style={{ flex: 1, background: `url('assets/software-jarvis-workshop.jpg') center/cover no-repeat`, border: '1px solid var(--magenta)', boxShadow: '0 0 24px rgba(255,43,214,0.12)', minHeight: 360 }} />
              <div style={{ padding: '22px 26px', border: '1px solid var(--magenta)', background: 'rgba(255,43,214,0.04)', position: 'relative' }}>
                <span className="corner-tl" /><span className="corner-br" />
                <Mono style={{ fontSize: 20, color: 'var(--magenta)', letterSpacing: '0.18em' }}>// SOFTWARE</Mono>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 42, fontWeight: 700, marginTop: 8, lineHeight: 1 }}>J.A.R.V.I.S.</div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 36, fontWeight: 800, color: 'var(--magenta)', marginTop: 10, letterSpacing: '-0.01em', textShadow: '0 0 14px var(--magenta-glow)' }}>The brains.</div>
              </div>
            </div>
          </Reveal>
          {/* = connector */}
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '0 18px' }}>
            <span style={{ fontFamily: 'var(--font-display)', fontSize: 80, fontWeight: 700, color: 'var(--cyan)', textShadow: '0 0 18px var(--cyan-glow)', opacity: step >= 4 ? 1 : 0, transform: step >= 4 ? 'scale(1)' : 'scale(0.6)', transition: 'opacity 0.4s ease, transform 0.4s ease' }}>=</span>
          </div>
          {/* Catalyst */}
          <Reveal step={5} current={step}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14, height: '100%' }}>
              <div style={{ flex: 1, background: `url('assets/catalyst-jarvis-face.webp') center/cover no-repeat`, border: '1.5px solid var(--cyan)', boxShadow: '0 0 36px rgba(0,212,255,0.22)', minHeight: 360 }} />
              <div style={{ padding: '22px 26px', border: '1.5px solid var(--cyan)', background: 'rgba(0,212,255,0.07)', position: 'relative', boxShadow: '0 0 18px rgba(0,212,255,0.15)' }}>
                <span className="corner-tl" /><span className="corner-tr" /><span className="corner-bl" /><span className="corner-br" />
                <Mono style={{ fontSize: 20, color: 'var(--cyan)', letterSpacing: '0.18em' }}>// THE COCKPIT</Mono>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 42, fontWeight: 700, marginTop: 8, color: 'var(--cyan)', textShadow: '0 0 16px var(--cyan-glow)', lineHeight: 1 }}>The Catalyst</div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 24, color: 'var(--ink-soft)', marginTop: 8 }}>Together — they make Iron Man.</div>
              </div>
            </div>
          </Reveal>
        </div>
      </SlideShell>
    </div>);

}

// === Slide 7: What does this mean for you? ===
function Slide08() {
  const r = React.useRef();
  const { active, idx } = useIsActiveSlide(r);
  const step = useStepReveal(4, active, idx);
  return (
    <div ref={r} style={{ position: 'absolute', inset: 0 }}>
      <SlideShell eyebrow="Definition">
        <div style={{ flex: 1, display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) 660px', gap: 72, alignItems: 'center' }}>

          {/* LEFT — copy stack */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 30, minWidth: 0 }}>
            <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 98, fontWeight: 700, lineHeight: 0.96, letterSpacing: '-0.035em', margin: 0, color: 'var(--ink)', whiteSpace: 'nowrap' }}>
              What is a <span style={{ color: 'var(--cyan)', textShadow: '0 0 32px var(--cyan-glow)' }}>cockpit?</span>
            </h1>

            <Reveal step={1} current={step}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 18, marginTop: 8 }}>
                <div style={{ width: 48, height: 1, background: 'var(--cyan)' }} />
                <Mono style={{ fontSize: 22, color: 'var(--cyan)', letterSpacing: '0.22em', fontWeight: 700 }}>// OPERATOR ↔ MACHINE</Mono>
              </div>
            </Reveal>

            <Reveal step={2} current={step}>
              <p style={{ margin: 0, fontFamily: 'var(--font-display)', fontSize: 44, color: 'var(--ink-soft)', lineHeight: 1.22, maxWidth: 880 }}>
                The cockpit doesn't fly the plane — it <strong style={{ color: 'var(--ink)' }}>controls what does</strong>.
              </p>
            </Reveal>

            <Reveal step={3} current={step}>
              <p style={{ margin: 0, fontFamily: 'var(--font-display)', fontSize: 36, color: 'var(--ink-mute)', lineHeight: 1.28, maxWidth: 860 }}>
                Your superpowers already exist. The cockpit is what activates them <em style={{ fontStyle: 'normal', color: 'var(--magenta)', textShadow: '0 0 12px var(--magenta-glow)' }}>at scale</em>.
              </p>
            </Reveal>
          </div>

          {/* RIGHT — Book cover (clamped to a fixed envelope so it can't blow up) */}
          <div style={{ position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%', minHeight: 0 }}>
            <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(circle at center, rgba(0,212,255,0.18) 0%, rgba(0,212,255,0.04) 50%, rgba(0,212,255,0) 75%)', pointerEvents: 'none' }} />
            <img
              src="book/cover/entrepreneurs-cockpit-cover-LOCKED-2026-05-12.png"
              alt="The Entrepreneur's Cockpit — book cover"
              style={{
                position: 'relative',
                width: 560,
                height: 'auto',
                maxHeight: '94%',
                objectFit: 'contain',
                boxShadow: '0 48px 115px rgba(0,0,0,0.58), 0 0 76px rgba(0,212,255,0.30)',
              }}
              onError={(e) => { e.target.style.display = 'none'; }}
            />
          </div>
        </div>

        {/* BOTTOM — catalyst banner */}
        <Reveal step={4} current={step}>
          <div style={{ marginTop: 28, padding: '28px 48px', border: '1.5px solid var(--magenta)', background: 'rgba(255,43,214,0.06)', position: 'relative', boxShadow: '0 0 28px rgba(255,43,214,0.2)' }}>
            <span className="corner-tl" /><span className="corner-tr" /><span className="corner-bl" /><span className="corner-br" />
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 22, flexWrap: 'wrap' }}>
              <Mono style={{ fontSize: 25, color: 'var(--ink-mute)', letterSpacing: '0.16em' }}>THE ENTREPRENEUR'S COCKPIT</Mono>
              <Mono style={{ fontSize: 34, color: 'var(--magenta)', letterSpacing: '0.14em', textShadow: '0 0 12px var(--magenta-glow)', fontWeight: 700 }}>=</Mono>
              <Mono style={{ fontSize: 32, color: 'var(--magenta)', letterSpacing: '0.14em', textShadow: '0 0 12px var(--magenta-glow)', fontWeight: 700 }}>YOUR SUPERHERO CATALYST</Mono>
            </div>
          </div>
        </Reveal>
      </SlideShell>
    </div>);

}

// === Slide 8: Red Dot → Blue Dot (consolidated) ===
function Slide09() {
  const r = React.useRef();
  const { active, idx } = useIsActiveSlide(r);
  // 5 steps: 1=red boxes, 2=current method, 3=blue boxes, 4=trajectory, 5=vehicle+cockpit
  const step = useStepReveal(5, active, idx);

  return (
    <div ref={r} style={{ position: 'absolute', inset: 0 }}>
      <SlideShell eyebrow="// Red dot. Blue dot.">
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
          {/* TOP: copy */}
          <div style={{ maxWidth: 1560 }}>
            <SlideTitle style={{ fontSize: 88, lineHeight: 1.0, margin: 0 }}>
              From <span className="text-red glow-red">red dot</span> → to <span className="text-cyan glow-cyan">blue dot</span>.
            </SlideTitle>
            <Body style={{ marginTop: 24, fontSize: 34, lineHeight: 1.25, maxWidth: 1420 }}>
              Two coordinates on the same map: where you are now, and where you're going.
              Name both, internally and externally, so the cockpit knows what to fly toward.
            </Body>
          </div>

          {/* BOTTOM: trajectory diagram */}
          <div style={{ flex: 1, marginTop: 36, position: 'relative' }}>
            <DrawSVG width={1840} height={680} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
              <defs>
                <marker id="rb-arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="10" markerHeight="10" orient="auto">
                  <path d="M0,0 L10,5 L0,10 z" fill="var(--cyan)" />
                </marker>
                <marker id="rb-arrow-red" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="10" markerHeight="10" orient="auto">
                  <path d="M0,0 L10,5 L0,10 z" fill="var(--red-dot)" />
                </marker>
                <linearGradient id="rb-trail" x1="0" x2="1" y1="0" y2="0">
                  <stop offset="0%" stopColor="var(--red-dot)" stopOpacity="0.95" />
                  <stop offset="100%" stopColor="var(--cyan)" stopOpacity="0.95" />
                </linearGradient>
                <radialGradient id="rb-red-glow-8" cx="0.5" cy="0.5" r="0.5">
                  <stop offset="0%" stopColor="rgba(255,59,107,0.55)" />
                  <stop offset="55%" stopColor="rgba(255,59,107,0.10)" />
                  <stop offset="100%" stopColor="rgba(255,59,107,0)" />
                </radialGradient>
                <radialGradient id="rb-blue-glow-8" cx="0.5" cy="0.5" r="0.5">
                  <stop offset="0%" stopColor="rgba(0,212,255,0.55)" />
                  <stop offset="55%" stopColor="rgba(0,212,255,0.10)" />
                  <stop offset="100%" stopColor="rgba(0,212,255,0)" />
                </radialGradient>
              </defs>

              {/* baseline grid */}
              <line x1="0" y1="560" x2="1840" y2="560" stroke="var(--line)" strokeDasharray="2 6" />
              {Array.from({ length: 12 }).map((_, i) =>
              <line key={i} x1={i * 160 + 80} y1="550" x2={i * 160 + 80} y2="570" stroke="var(--line)" />
              )}

              {/* HERE: BIG red dot — halos only (solid core re-drawn on top of path) */}
              <g transform="translate(220, 560)">
                <circle r="160" fill="url(#rb-red-glow-8)" />
                <circle r="92" fill="none" stroke="var(--red-dot)" strokeWidth="1" opacity="0.32" strokeDasharray="2 6" />
                <circle r="64" fill="none" stroke="var(--red-dot)" strokeWidth="1" opacity="0.55" />
              </g>

              {/* THERE: BIG blue dot — halos only (solid core re-drawn on top of path) */}
              <g transform="translate(1620, 130)">
                <circle r="160" fill="url(#rb-blue-glow-8)" />
                <circle r="92" fill="none" stroke="var(--cyan)" strokeWidth="1" opacity="0.4" strokeDasharray="2 6" />
                <circle r="64" fill="none" stroke="var(--cyan)" strokeWidth="1" opacity="0.65" />
              </g>

              {/* RED · INTERNAL — ABOVE red dot (step 1) */}
              <g style={{ opacity: step >= 1 ? 1 : 0, transition: 'opacity 0.5s' }}>
                <g transform="translate(-10, 135)">
                  <rect width="540" height="150" fill="var(--bg-warm)" stroke="var(--red-dot)" strokeOpacity="0.7" />
                  <rect x="0" y="0" width="540" height="42" fill="rgba(255,59,107,0.10)" />
                  <text x="22" y="28" fontFamily="var(--font-mono)" fontSize="20" fill="var(--red-dot)" letterSpacing="0.16em">// INTERNAL · STATE</text>
                  <text x="22" y="84" fontFamily="var(--font-display)" fontSize="34" fontWeight="650" fill="var(--ink)">Chaos · Scarcity · Fear</text>
                  <text x="22" y="126" fontFamily="var(--font-display)" fontSize="34" fontWeight="650" fill="var(--ink)">Confusion · Force</text>
                </g>
                <line x1="220" y1="465" x2="220" y2="510" stroke="var(--red-dot)" strokeOpacity="0.45" strokeDasharray="2 5" />
              </g>

              {/* RED · EXTERNAL — ABOVE red dot, tight under INTERNAL (step 1) */}
              <g style={{ opacity: step >= 1 ? 1 : 0, transition: 'opacity 0.5s' }}>
                <g transform="translate(-10, 305)">
                  <rect width="540" height="128" fill="var(--bg-warm)" stroke="var(--red-dot)" strokeOpacity="0.7" />
                  <rect x="0" y="0" width="540" height="38" fill="rgba(255,59,107,0.10)" />
                  <text x="22" y="26" fontFamily="var(--font-mono)" fontSize="19" fill="var(--red-dot)" letterSpacing="0.16em">// EXTERNAL · SYSTEMS</text>
                  <text x="22" y="77" fontFamily="var(--font-display)" fontSize="31" fontWeight="650" fill="var(--ink)">No exposure · No systems</text>
                  <text x="22" y="112" fontFamily="var(--font-display)" fontSize="31" fontWeight="650" fill="var(--ink)">No cockpit</text>
                </g>
              </g>

              {/* HERE label under red dot */}
              <text x="340" y="695" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="22" fontWeight="700" fill="var(--red-dot)" letterSpacing="0.22em">// HERE · CURRENT REALITY · TONY STARK</text>

              {/* CURRENT METHOD — straight line out of the red dot (step 2) */}
              <g style={{ opacity: step >= 2 ? 1 : 0, transition: 'opacity 0.5s' }}>
                <line x1="280" y1="555" x2="940" y2="555" stroke="var(--red-dot)" strokeOpacity="0.95" strokeWidth="2" markerEnd="url(#rb-arrow-red)" />
                <text x="610" y="588" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="20" fontWeight="700" fill="var(--red-dot)" letterSpacing="0.22em">// CURRENT METHOD</text>
                <text x="610" y="620" textAnchor="middle" fontFamily="var(--font-display)" fontSize="22" fontStyle="italic" fill="var(--ink-soft)">what got you here — but not there</text>
              </g>

              {/* trajectory — red dot to blue dot, after both endpoint boxes are established (step 4) */}
              <path
                key={`path-${step >= 4 ? 'go' : 'wait'}`}
                className={`draw-path ${step >= 4 ? 'go' : ''}`}
                style={{ '--len': 2200, '--dur': '2.0s' }}
                d="M 280 555 C 700 555, 850 380, 1020 280 S 1460 150, 1565 135"
                fill="none"
                stroke="url(#rb-trail)"
                strokeWidth="2"
                markerEnd="url(#rb-arrow)" />

              {/* SOLID DOT CORES — drawn AFTER the path so the letter sits on top */}
              <g transform="translate(220, 560)">
                <circle r="46" fill="var(--red-dot)" style={{ filter: 'drop-shadow(0 0 22px rgba(255,59,107,0.7))' }} />
                <text y="6" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="20" fontWeight="700" fill="white" letterSpacing="3">A</text>
              </g>
              <g transform="translate(1620, 130)">
                <circle r="46" fill="var(--cyan)" style={{ filter: 'drop-shadow(0 0 22px var(--cyan-glow))' }} />
                <text y="6" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="20" fontWeight="700" fill="var(--bg)" letterSpacing="3">B</text>
              </g>

              {/* BLUE · INTERNAL — BELOW blue dot (step 3) */}
              <g style={{ opacity: step >= 3 ? 1 : 0, transition: 'opacity 0.5s' }}>
                <line x1="1620" y1="180" x2="1620" y2="275" stroke="var(--cyan)" strokeOpacity="0.5" strokeDasharray="2 5" />
                <g transform="translate(1330, 260)">
                  <rect width="540" height="150" fill="var(--bg-warm)" stroke="var(--cyan)" strokeOpacity="0.7" />
                  <rect x="0" y="0" width="540" height="42" fill="rgba(0,212,255,0.10)" />
                  <text x="22" y="28" fontFamily="var(--font-mono)" fontSize="20" fill="var(--cyan)" letterSpacing="0.16em">// INTERNAL · STATE</text>
                  <text x="22" y="82" fontFamily="var(--font-display)" fontSize="34" fontWeight="650" fill="var(--cyan)">Order · Abundance · Joy</text>
                  <text x="22" y="124" fontFamily="var(--font-display)" fontSize="34" fontWeight="650" fill="var(--cyan)">Certainty · Clarity</text>
                </g>
              </g>

              {/* BLUE · EXTERNAL — BELOW blue dot, beneath internal (step 3) */}
              <g style={{ opacity: step >= 3 ? 1 : 0, transition: 'opacity 0.5s' }}>
                <g transform="translate(1330, 460)">
                  <rect width="540" height="150" fill="var(--bg-warm)" stroke="var(--cyan)" strokeOpacity="0.7" />
                  <rect x="0" y="0" width="540" height="42" fill="rgba(0,212,255,0.10)" />
                  <text x="22" y="28" fontFamily="var(--font-mono)" fontSize="20" fill="var(--cyan)" letterSpacing="0.16em">// EXTERNAL · SYSTEMS</text>
                  <text x="22" y="82" fontFamily="var(--font-display)" fontSize="34" fontWeight="650" fill="var(--cyan)">Exposure · Leverage</text>
                  <text x="22" y="124" fontFamily="var(--font-display)" fontSize="34" fontWeight="650" fill="var(--cyan)">Opportunity · Agentic Cockpit</text>
                </g>
              </g>

              {/* THERE label above blue dot */}
              <text x="1500" y="40" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="22" fontWeight="700" fill="var(--cyan)" letterSpacing="0.22em">// THERE · DESIRED REALITY · IRON MAN</text>

              {/* THE VEHICLE + COCKPIT — straddling the trajectory at x=920 (step 5) */}
              <g style={{ opacity: step >= 5 ? 1 : 0, transition: 'opacity 0.6s' }}>
                {/* Card 1 — brand + business systems (LEFT of + connector) */}
                <g transform="translate(640, 380)">
                  <rect width="310" height="136" fill="var(--bg-warm)" stroke="var(--magenta)" strokeWidth="1.5" strokeOpacity="0.85" />
                  <text x="155" y="36" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="18" fill="var(--magenta)" letterSpacing="0.18em">// THE VEHICLE</text>
                  <text x="155" y="82" textAnchor="middle" fontFamily="var(--font-display)" fontSize="26" fontWeight="700" fill="var(--ink)">brand + business</text>
                  <text x="155" y="114" textAnchor="middle" fontFamily="var(--font-display)" fontSize="26" fontWeight="700" fill="var(--ink)">systems</text>
                </g>
                {/* + connector — sits ON the trajectory at x=920 */}
                <circle cx="932" cy="356" r="30" fill="var(--bg)" stroke="var(--magenta)" strokeWidth="2" />
                <text x="932" y="368" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="36" fontWeight="700" fill="var(--magenta)">+</text>
                {/* Card 2 — agents on autopilot (RIGHT of + connector) */}
                <g transform="translate(1005, 190)">
                  <rect width="310" height="136" fill="var(--bg-warm)" stroke="var(--magenta)" strokeWidth="1.5" strokeOpacity="0.85" />
                  <text x="155" y="36" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="18" fill="var(--magenta)" letterSpacing="0.18em">// THE COCKPIT</text>
                  <text x="155" y="82" textAnchor="middle" fontFamily="var(--font-display)" fontSize="26" fontWeight="700" fill="var(--ink)">agents on</text>
                  <text x="155" y="114" textAnchor="middle" fontFamily="var(--font-display)" fontSize="26" fontWeight="700" fill="var(--ink)">autopilot</text>
                </g>
              </g>
            </DrawSVG>
          </div>
        </div>
      </SlideShell>
    </div>);

}

// === Slide 9: The Vehicle — Zoom In ===
function Slide10() {
  const r = React.useRef();
  const { active, idx } = useIsActiveSlide(r);
  const step = useStepReveal(7, active, idx);
  return (
    <div ref={r} style={{ position: 'absolute', inset: 0 }}>
      <SlideShell eyebrow="Zoom in">
        <SlideTitle style={{ fontSize: 80, whiteSpace: 'nowrap' }}>The <span style={{ color: 'var(--cyan)' }}>vehicle</span> between A and B.</SlideTitle>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40, marginTop: 40, alignItems: 'stretch' }}>
          <Reveal step={1} current={step} style={{ height: '100%' }}>
            <div className="card" style={{ padding: 40, height: '100%', display: 'flex', flexDirection: 'column', gap: 20 }}>
              <span className="corner-tl" /><span className="corner-br" />
              <Mono style={{ fontSize: 20, color: 'var(--ink-mute)', letterSpacing: '0.18em' }}>// THE PLANE</Mono>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 38, fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1.05, whiteSpace: 'nowrap' }}>
                Personal Brand + Business Systems
              </div>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 30, color: 'var(--ink-mute)', lineHeight: 1.32 }}>
                The two assets to weaponize agents around. Everything else is downstream.
              </div>

              {/* Two-column breakdown */}
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18, marginTop: 4 }}>
                {/* PERSONAL BRAND */}
                <Reveal step={2} current={step} style={{ display: 'flex', flexDirection: 'column', gap: 14, padding: '22px 24px', border: '1px solid var(--line)', background: 'rgba(10,14,26,0.02)' }}>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 17, color: 'var(--ink-mute)', letterSpacing: '0.14em' }}>// PERSONAL BRAND</div>
                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, padding: '8px 10px', border: '1px solid var(--magenta)', background: 'rgba(240,46,170,0.06)' }}>
                    <span style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--magenta)', letterSpacing: '0.16em' }}>★ FOUNDATION</span>
                  </div>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 40, fontWeight: 700, color: 'var(--magenta)', letterSpacing: '-0.01em', lineHeight: 1, textShadow: '0 0 10px rgba(240,46,170,0.35)' }}>KGMID</div>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 24, color: 'var(--ink-mute)', lineHeight: 1.25 }}>
                    How AI knows who you are, what you do, and whether to cite you.
                  </div>
                  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 6, marginTop: 2 }}>
                    {['GOOGLE', 'META', 'OPENAI', 'ANTHROPIC'].map((p) =>
                    <div key={p} style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--cyan)', letterSpacing: '0.16em', padding: '7px 8px', border: '1px solid var(--line)', textAlign: 'center', background: 'rgba(0,212,255,0.04)' }}>{p}</div>
                    )}
                  </div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 14, color: 'var(--ink-mute)', letterSpacing: '0.14em', marginTop: 4, paddingTop: 10, borderTop: '1px dashed var(--line)' }}>
                    + content · authority · network
                  </div>
                </Reveal>

                {/* BUSINESS SYSTEMS */}
                <Reveal step={3} current={step} style={{ display: 'flex', flexDirection: 'column', gap: 16, padding: '22px 24px', border: '1px solid var(--line)', background: 'rgba(10,14,26,0.02)' }}>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 17, color: 'var(--ink-mute)', letterSpacing: '0.14em' }}>// BUSINESS SYSTEMS</div>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 24, color: 'var(--ink-mute)', lineHeight: 1.25, marginTop: 8 }}>
                    The stack that runs and grows the business without you in every loop.
                  </div>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 11, marginTop: 6 }}>
                    {[
                    ['LEAD FLOW', 'pipeline + outbound'],
                    ['FULFILLMENT', 'delivery + ops'],
                    ['CONTENT ENGINE', 'daily output'],
                    ['DATA + REPORTING', 'attribution + KPIs']].
                    map(([k, v]) =>
                    <div key={k} style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
                        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 15, color: 'var(--cyan)', letterSpacing: '0.12em', minWidth: 145 }}>{k}</span>
                        <span style={{ fontFamily: 'var(--font-display)', fontSize: 22, color: 'var(--ink-soft)' }}>{v}</span>
                      </div>
                    )}
                  </div>
                </Reveal>
              </div>
            </div>
          </Reveal>
          <Reveal step={4} current={step} style={{ height: '100%' }}>
            <div className="card" style={{ padding: 40, height: '100%', display: 'flex', flexDirection: 'column', gap: 20, borderColor: 'var(--cyan)', background: 'rgba(0,212,255,0.04)' }}>
              <span className="corner-tl" /><span className="corner-tr" /><span className="corner-bl" /><span className="corner-br" />
              <Mono style={{ fontSize: 20, color: 'var(--cyan)', letterSpacing: '0.18em' }}>// THE COCKPIT</Mono>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 38, fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1.05, color: 'var(--cyan)', textShadow: '0 0 16px var(--cyan-glow)', whiteSpace: 'nowrap' }}>
                Agentic Workforce Infrastructure
              </div>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 30, color: 'var(--ink-mute)', lineHeight: 1.32 }}>
                The agents behind the screen — managed by the cockpit, running and growing your business 24/7.
              </div>

              {/* Hierarchy diagram — 3 tiers, label column on left, centered diagram on right */}
              <svg viewBox="0 0 600 240" preserveAspectRatio="xMidYMid meet" style={{ width: '100%', flex: 1, minHeight: 280, marginTop: 8 }}>
                {/* Row labels (left column) */}
                <text x="0" y="36" fontFamily="var(--font-mono)" fontSize="16" fill="var(--ink-mute)" letterSpacing="0.14em">// ORCHESTRATOR</text>
                <text x="0" y="120" fontFamily="var(--font-mono)" fontSize="16" fill="var(--ink-mute)" letterSpacing="0.14em">// DEPARTMENTS</text>
                <text x="0" y="195" fontFamily="var(--font-mono)" fontSize="16" fill="var(--ink-mute)" letterSpacing="0.14em">// AGENTS</text>

                {/* Tier 1: Cockpit (step 5) */}
                <g style={{ opacity: step >= 5 ? 1 : 0, transition: 'opacity 0.5s' }}>
                  <g transform="translate(310, 14)">
                    <rect width="160" height="44" fill="var(--bg)" stroke="var(--cyan)" strokeWidth="1.5" style={{ filter: 'drop-shadow(0 0 8px var(--cyan-glow))' }} />
                    <text x="80" y="28" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="16" fontWeight="700" fill="var(--cyan)" letterSpacing="0.18em">COCKPIT</text>
                  </g>
                </g>

                {/* Tier 2: connectors + 4 Departments (step 6) */}
                <g style={{ opacity: step >= 6 ? 1 : 0, transition: 'opacity 0.5s' }}>
                  <line x1="390" y1="58" x2="390" y2="82" stroke="var(--cyan)" strokeOpacity="0.7" strokeWidth="1.2" />
                  <line x1="240" y1="82" x2="540" y2="82" stroke="var(--cyan)" strokeOpacity="0.7" strokeWidth="1.2" />
                  {[240, 340, 440, 540].map((x) =>
                  <line key={x} x1={x} y1="82" x2={x} y2="106" stroke="var(--cyan)" strokeOpacity="0.7" strokeWidth="1.2" />
                  )}
                  {[['MKT', 240], ['SALES', 340], ['OPS', 440], ['TECH', 540]].map(([label, cx]) =>
                  <g key={label} transform={`translate(${cx - 44}, 106)`}>
                      <rect width="88" height="38" fill="var(--bg-warm)" stroke="var(--cyan)" strokeOpacity="0.85" strokeWidth="1.2" />
                      <text x="44" y="25" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="13" fontWeight="600" fill="var(--ink)" letterSpacing="0.14em">{label}</text>
                    </g>
                  )}
                </g>

                {/* Tier 3: connectors + agent dots (step 7) */}
                <g style={{ opacity: step >= 7 ? 1 : 0, transition: 'opacity 0.5s' }}>
                  {[240, 340, 440, 540].map((x) =>
                  <line key={x} x1={x} y1="144" x2={x} y2="172" stroke="var(--cyan)" strokeOpacity="0.45" strokeWidth="1.2" strokeDasharray="2 4" />
                  )}
                  {[240, 340, 440, 540].map((cx) =>
                  <g key={cx}>
                      {[-20, 0, 20].map((dx) =>
                    <circle key={dx} cx={cx + dx} cy="190" r="6" fill="var(--cyan)" opacity="0.9" style={{ filter: 'drop-shadow(0 0 4px var(--cyan-glow))' }} />
                    )}
                    </g>
                  )}
                </g>
              </svg>
            </div>
          </Reveal>
        </div>
      </SlideShell>
    </div>);

}

// === Slide 10: What the Cockpit Controls — 4 Departments ===
function Slide11() {
  const r = React.useRef();
  const { active, idx } = useIsActiveSlide(r);
  const step = useStepReveal(4, active, idx);
  const depts = [
  {
    name: 'Marketing & Content',
    color: 'var(--cyan)',
    items: ['Blogs & SEO', 'Social media', 'Ads & retargeting', 'Video', 'Social automation', 'Design'],
    s: 1
  },
  {
    name: 'Sales & Biz Dev',
    color: 'var(--magenta)',
    items: ['Prospecting', 'Lead nurture', 'Email sequences', 'Contract management'],
    s: 2
  },
  {
    name: 'Admin & Ops',
    color: 'var(--cyan)',
    items: ['File management', 'KGMID management', 'Email & calendar', 'Financials', 'Reporting & audits', 'Research'],
    s: 3
  },
  {
    name: 'Technical',
    color: 'var(--magenta)',
    items: ['Coding', 'App deployment', 'Tooling', 'Agent building'],
    s: 4
  }];

  return (
    <div ref={r} style={{ position: 'absolute', inset: 0 }}>
      <SlideShell eyebrow="What the cockpit controls">
        <SlideTitle style={{ fontSize: 64, whiteSpace: 'nowrap' }}>What we want the agents to do for us.</SlideTitle>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 28, color: 'var(--cyan)', letterSpacing: '0.18em', marginTop: 12 }}>
          <span className="dot" style={{ marginRight: 12 }} />ON AUTOPILOT
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24, marginTop: 40, flex: 1 }}>
          {depts.map((dept) =>
          <Reveal key={dept.name} step={dept.s} current={step}>
              <div className="card" style={{ padding: '36px 32px', height: '100%', display: 'flex', flexDirection: 'column', gap: 24 }}>
                <span className="corner-tl" /><span className="corner-br" />
                <div style={{ width: 5, height: 44, background: dept.color, flexShrink: 0 }} />
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 40, fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1.05 }}>{dept.name}</div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 14, marginTop: 6 }}>
                  {dept.items.map((item) =>
                <div key={item} style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                      <span style={{ width: 8, height: 8, borderRadius: '50%', background: dept.color, flexShrink: 0 }} />
                      <span style={{ fontFamily: 'var(--font-display)', fontSize: 30, color: 'var(--ink-soft)', lineHeight: 1.2 }}>{item}</span>
                    </div>
                )}
                </div>
              </div>
            </Reveal>
          )}
        </div>
      </SlideShell>
    </div>);

}

// === Slide 11: OpenClaw vs Claude ===
function Slide14() {
  const r = React.useRef();
  const { active, idx } = useIsActiveSlide(r);
  const step = useStepReveal(7, active, idx);

  // Status pill — Full / Partial / No
  const Pill = ({ kind }) => {
    const map = {
      full: { label: 'FULL', color: '#22c55e', bg: 'rgba(34,197,94,0.12)' },
      partial: { label: 'PARTIAL', color: '#f59e0b', bg: 'rgba(245,158,11,0.12)' },
      no: { label: 'NO', color: 'var(--red-dot)', bg: 'rgba(255,59,107,0.12)' }
    };
    const s = map[kind];
    return (
      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 9, padding: '9px 15px', border: `1px solid ${s.color}`, background: s.bg, fontFamily: 'var(--font-mono)', fontSize: 17, fontWeight: 700, color: s.color, letterSpacing: '0.12em' }}>
        <span style={{ width: 8, height: 8, borderRadius: '50%', background: s.color, boxShadow: `0 0 6px ${s.color}` }} />
        {s.label}
      </span>);

  };

  const Cell = ({ pill, text }) =>
  <div style={{ display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'nowrap' }}>
      {pill && <Pill kind={pill} />}
      {text && <span style={{ fontFamily: 'var(--font-display)', fontSize: 29, color: 'var(--ink-soft)', lineHeight: 1.18 }}>{text}</span>}
    </div>;


  // Master combined table — plain-language descriptors (no jargon)
  const rows = [
  ['Setup speed', { pill: 'partial', text: 'Self-hosted, manual' }, { pill: 'full', text: 'Plug-and-play, ~30 min' }],
  ['Models', { pill: 'full', text: 'Use any model' }, { pill: 'partial', text: 'Anthropic only' }],
  ['Always-on', { pill: 'full', text: 'Runs on your server 24/7' }, { pill: 'partial', text: 'Can be enabled' }],
  ['Connections', { pill: 'full', text: 'Messaging + triggers' }, { pill: 'partial', text: 'Plugins + connectors' }],
  ['Reasoning', { pill: 'partial', text: 'Strong when paired' }, { pill: 'full', text: 'Best in class, native' }],
  ['Security', { pill: 'partial', text: 'You manage the server' }, { pill: 'full', text: "Anthropic hosted" }],
  ['Best for', { text: 'Advanced, multi-model setups' }, { text: '★ 80% of operators' }]];


  return (
    <div ref={r} style={{ position: 'absolute', inset: 0 }}>
      <SlideShell eyebrow="Choosing your cockpit">
        <SlideTitle style={{ fontSize: 82 }}>Two ecosystems. One decision.</SlideTitle>
        <div style={{ flex: 1, display: 'flex', minHeight: 0 }}>
          <div className="card" style={{ padding: 44, marginTop: 34, display: 'flex', flexDirection: 'column', gap: 18, flex: 1 }}>
            <span className="corner-tl" /><span className="corner-tr" /><span className="corner-bl" /><span className="corner-br" />
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <Mono style={{ fontSize: 26, color: 'var(--ink-mute)', letterSpacing: '0.15em' }}>// OPENCLAW vs CLAUDE</Mono>
              <div style={{ display: 'flex', gap: 18, fontFamily: 'var(--font-mono)', fontSize: 18, color: 'var(--ink-mute)', letterSpacing: '0.12em' }}>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}><span style={{ width: 8, height: 8, borderRadius: '50%', background: '#22c55e' }} />FULL</span>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}><span style={{ width: 8, height: 8, borderRadius: '50%', background: '#f59e0b' }} />PARTIAL</span>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}><span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--red-dot)' }} />NO</span>
              </div>
            </div>
            <table style={{ width: '100%', borderCollapse: 'collapse', fontFamily: 'var(--font-display)', flex: 1 }}>
              <thead>
                <tr style={{ borderBottom: '2px solid var(--line)' }}>
                  <th style={{ textAlign: 'left', padding: '20px 18px', fontFamily: 'var(--font-mono)', fontSize: 21, color: 'var(--ink-mute)', letterSpacing: '0.14em', fontWeight: 600, width: '22%' }}>CATEGORY</th>
                  <th style={{ textAlign: 'left', padding: '20px 18px', fontFamily: 'var(--font-mono)', fontSize: 21, color: 'var(--magenta)', letterSpacing: '0.14em', fontWeight: 700, width: '39%' }}>OPENCLAW <span style={{ color: 'var(--ink-mute)', fontWeight: 400 }}>(open)</span></th>
                  <th style={{ textAlign: 'left', padding: '20px 18px', fontFamily: 'var(--font-mono)', fontSize: 21, color: 'var(--cyan)', letterSpacing: '0.14em', fontWeight: 700, width: '39%' }}>CLAUDE <span style={{ color: 'var(--ink-mute)', fontWeight: 400 }}>(closed)</span></th>
                </tr>
              </thead>
              <tbody>
                {rows.map(([cat, oc, cl], i) =>
                <tr key={cat} style={{ borderBottom: '1px dashed var(--line)', background: i % 2 === 0 ? 'rgba(10,14,26,0.015)' : 'transparent', opacity: step >= i + 1 ? 1 : 0, transform: step >= i + 1 ? 'translateY(0)' : 'translateY(6px)', transition: 'opacity 0.4s ease, transform 0.4s ease' }}>
                    <td style={{ padding: '20px 18px', fontSize: 32, color: 'var(--ink)', fontWeight: 700, whiteSpace: 'nowrap' }}>{cat}</td>
                    <td style={{ padding: '20px 18px' }}><Cell pill={oc.pill} text={oc.text} /></td>
                    <td style={{ padding: '20px 18px' }}><Cell pill={cl.pill} text={cl.text} /></td>
                  </tr>
                )}
              </tbody>
            </table>
          </div>
        </div>
      </SlideShell>
    </div>);

}

// === Slide 12: What's your setup? — 3 paths ===
function Slide15() {
  const r = React.useRef();
  const { active, idx } = useIsActiveSlide(r);
  const step = useStepReveal(4, active, idx);

  const paths = [
  {
    color: '#f59e0b',
    glow: 'rgba(245,158,11,0.35)',
    name: 'Claude alone',
    bullets: ['Non-technical user', 'More secure — Anthropic-managed', 'No coding, no servers'],
    stack: 'Claude Code + Cowork',
    cost: 'Claude Pro $20–200/mo',
    note: 'Session-based, rate limits',
    star: false,
    s: 1
  },
  {
    color: 'var(--cyan)',
    glow: 'var(--cyan-glow)',
    name: 'OpenClaw alone',
    bullets: ['Messaging-first assistant', 'Any LLM, swap per task', 'Runs 24/7 on your hardware or dedicated VPS'],
    stack: 'OpenClaw + any LLM',
    cost: '$50–500/mo',
    note: 'Depends on model + workload',
    star: false,
    s: 2
  },
  {
    color: 'var(--magenta)',
    glow: 'rgba(240,46,170,0.45)',
    name: 'OpenClaw + Claude',
    bullets: ['Want the strongest agent stack', 'OpenClaw daemon + Claude brain', '24/7 + best-in-class reasoning'],
    stack: 'OpenClaw + Claude (OAuth)',
    cost: 'Subscription + Usage',
    note: 'Your Claude sub + VPS hosting cost + token usage',
    star: true,
    s: 3
  }];


  return (
    <div ref={r} style={{ position: 'absolute', inset: 0 }}>
      <SlideShell eyebrow="Three paths">
        <SlideTitle style={{ fontSize: 88 }}>What's <span style={{ color: 'var(--cyan)' }}>your setup</span>?</SlideTitle>
        <div style={{ fontFamily: 'var(--font-display)', fontSize: 26, color: 'var(--ink-mute)', marginTop: 16, maxWidth: 1400 }}>
          Three legitimate ways to run the cockpit. Pick the one that matches how you work — you can graduate later.
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 28, marginTop: 36, alignItems: 'start' }}>
          {paths.map((p) =>
          <Reveal key={p.name} step={p.s} current={step} style={{ height: '100%' }}>
              <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
                {/* Path header */}
                <div style={{ position: 'relative', padding: '22px 24px', border: `1.5px solid ${p.color}`, background: 'var(--bg-warm)', display: 'flex', alignItems: 'center', gap: 14, boxShadow: `0 0 24px ${p.glow}` }}>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 28, color: p.color, lineHeight: 1, fontWeight: 700 }}>✱</span>
                  <span style={{ fontFamily: 'var(--font-display)', fontSize: 32, fontWeight: 700, color: 'var(--ink)', letterSpacing: '-0.01em' }}>{p.name}</span>
                  {p.star &&
                <span style={{ marginLeft: 'auto', fontFamily: 'var(--font-mono)', fontSize: 12, color: p.color, letterSpacing: '0.18em', padding: '4px 8px', border: `1px solid ${p.color}` }}>★ I RUN THIS</span>
                }
                </div>

                {/* Connector arrow */}
                <div style={{ alignSelf: 'center', width: 2, height: 28, background: p.color, opacity: 0.7 }} />

                {/* Bullets */}
                <div style={{ padding: '20px 24px', border: `1px solid ${p.color}`, background: 'rgba(10,14,26,0.02)', display: 'flex', flexDirection: 'column', gap: 14 }}>
                  {p.bullets.map((b) =>
                <div key={b} style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
                      <span style={{ width: 22, height: 22, borderRadius: '50%', border: `1.5px solid ${p.color}`, color: p.color, fontSize: 14, fontWeight: 700, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, marginTop: 2 }}>✓</span>
                      <span style={{ fontFamily: 'var(--font-display)', fontSize: 22, color: 'var(--ink-soft)', lineHeight: 1.3 }}>{b}</span>
                    </div>
                )}
                </div>

                {/* Stack pill */}
                <div style={{ alignSelf: 'center', marginTop: 12, fontFamily: 'var(--font-mono)', fontSize: 15, color: p.color, letterSpacing: '0.14em', fontWeight: 700 }}>
                  {p.stack}
                </div>

                {/* Connector arrow */}
                <div style={{ alignSelf: 'center', width: 2, height: 18, background: p.color, opacity: 0.7, marginTop: 8 }} />
                <div style={{ alignSelf: 'center', width: 0, height: 0, borderLeft: '7px solid transparent', borderRight: '7px solid transparent', borderTop: `8px solid ${p.color}`, opacity: 0.7 }} />

                {/* Cost block */}
                <div style={{ marginTop: 8, padding: '20px 24px', border: `1px solid ${p.color}`, background: 'var(--bg)' }}>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 26, fontWeight: 700, color: 'var(--ink)', letterSpacing: '-0.01em', lineHeight: 1.1 }}>{p.cost}</div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 14, color: 'var(--ink-mute)', letterSpacing: '0.06em', marginTop: 8 }}>{p.note}</div>
                </div>
              </div>
            </Reveal>
          )}
        </div>

        <Reveal step={4} current={step}>
          <div style={{ marginTop: 20, padding: '14px 24px', border: '1px solid var(--red-dot)', background: 'rgba(255,59,107,0.05)', display: 'flex', alignItems: 'flex-start', gap: 20, position: 'relative' }}>
            <span className="corner-tl" style={{ borderColor: 'var(--red-dot)' }} /><span className="corner-br" style={{ borderColor: 'var(--red-dot)' }} />
            <Mono style={{ fontSize: 16, color: 'var(--red-dot)', letterSpacing: '0.18em', flexShrink: 0, fontWeight: 700, marginTop: 4 }}>⚠ DON'T CHEAP OUT</Mono>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 18, color: 'var(--ink-soft)', lineHeight: 1.4 }}>
              With OpenClaw, you get what you pay for. If <span style={{ color: 'var(--red-dot)', fontWeight: 700 }}>red dot</span> is 100 miles from <span style={{ color: 'var(--cyan)', fontWeight: 700 }}>blue dot</span> and you only have 20 miles of gas, you'll <em style={{ fontStyle: 'normal', color: 'var(--ink)', fontWeight: 700 }}>emergency-land the plane</em>. Better to ride a cheaper vehicle that gets you all the way there than the "best in class" one that strands you.
            </div>
          </div>
          <div style={{ marginTop: 16, padding: '14px 24px', border: '1px solid var(--cyan)', background: 'rgba(0,212,255,0.04)', display: 'flex', alignItems: 'center', gap: 20 }}>
            <span className="corner-tl" /><span className="corner-br" />
            <Mono style={{ fontSize: 18, color: 'var(--cyan)', letterSpacing: '0.12em', flexShrink: 0 }}>MY RECOMMENDATION:</Mono>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 20, color: 'var(--ink-soft)', lineHeight: 1.35 }}>
              For 80% of operators in this room — <strong>start with Claude</strong>. Out of the box, 30 min setup, best reasoning. Graduate to OpenClaw when you need 24/7 daemon, multi-model, or messaging triggers.
            </div>
          </div>
          <div style={{ marginTop: 12, fontFamily: 'var(--font-mono)', fontSize: 14, color: 'var(--ink-mute)', letterSpacing: '0.14em', textAlign: 'center' }}>
            <span style={{ color: 'var(--magenta)' }}>★</span> digitalocean.com or hostinger.com — spin up a VPS to run OpenClaw on
          </div>
        </Reveal>
      </SlideShell>
    </div>);

}

// === Slide 21: About the Author (front-of-deck credibility) ===
function Slide21() {
  const r = React.useRef();
  const { active, idx } = useIsActiveSlide(r);
  const step = useStepReveal(4, active, idx);

  const stats = [['27', 'years old'], ['9', 'years building'], ['200+', 'founders served'], ['10,000s', 'appointments booked']];

  return (
    <div ref={r} style={{ position: 'absolute', inset: 0 }}>
      <SlideShell eyebrow="About the author">
        <div style={{ display: 'grid', gridTemplateColumns: '440px 1fr', gap: 56, marginTop: 20, alignItems: 'start' }}>
          <div style={{ position: 'relative', paddingBottom: 80 }}>
            <div style={{ width: 400, height: 480, background: `url('assets/joshua.jpeg') center/cover`, border: '1px solid var(--line)', filter: 'contrast(1.05)' }} />
            <div style={{ position: 'absolute', top: -14, left: -14, width: 24, height: 24, borderTop: '2px solid var(--cyan)', borderLeft: '2px solid var(--cyan)' }} />
            <div style={{ position: 'absolute', bottom: 0, right: -14, width: 24, height: 24, borderBottom: '2px solid var(--cyan)', borderRight: '2px solid var(--cyan)' }} />
            <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, display: 'grid', gap: 6, fontFamily: 'var(--font-mono)', fontSize: 24, color: 'var(--ink-mute)', letterSpacing: '0.06em', whiteSpace: 'nowrap' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                <span>ID // JC-1998</span><span>EST. 10/10/98</span>
              </div>
              <div style={{ borderTop: '1px solid var(--cyan)', paddingTop: 6 }}>FRACTIONAL CRO · "THE AI GUY"</div>
            </div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
            <h1 style={{ fontSize: 64, fontWeight: 700, lineHeight: 1, margin: 0, letterSpacing: '-0.03em' }}>Josh Collier</h1>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 24, color: 'var(--cyan)', letterSpacing: '0.12em', marginTop: -12 }}>
              <span className="dot" style={{ marginRight: 10 }} />FOUNDER · MOREOPPORTUNITY.IO
            </div>
            <Reveal step={1} current={step}>
              <Body>I started building at <em style={{ fontStyle: 'normal', color: 'var(--cyan)', textShadow: '0 0 12px var(--cyan-glow)' }}>18, in 2018</em>. Nine years in the trenches since — wins, failures, and everything in between.</Body>
            </Reveal>
            <Reveal step={2} current={step}>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
                {stats.map(([n, l]) =>
                <div key={l} className="card" style={{ padding: 24 }}>
                    <span className="corner-tl" /><span className="corner-br" />
                    <div style={{ fontFamily: 'var(--font-mono)', fontSize: 40, color: 'var(--cyan)', textShadow: '0 0 12px var(--cyan-glow)', fontWeight: 600 }}>{n}</div>
                    <div style={{ fontFamily: 'var(--font-mono)', fontSize: 18, color: 'var(--ink-mute)', letterSpacing: '0.08em', textTransform: 'uppercase', marginTop: 4 }}>{l}</div>
                  </div>
                )}
              </div>
            </Reveal>
            <Reveal step={3} current={step}>
              <Body>Worked with 200+ founders, generating millions. Stages, podcasts, the rooms — I've done the laps.</Body>
            </Reveal>
            <Reveal step={4} current={step}>
              <div style={{ marginTop: 8, padding: '24px 30px', border: '1.5px solid var(--magenta)', background: 'rgba(255,43,214,0.06)', position: 'relative', boxShadow: '0 0 28px rgba(255,43,214,0.18)' }}>
                <span className="corner-tl" style={{ borderColor: 'var(--magenta)' }} /><span className="corner-br" style={{ borderColor: 'var(--magenta)' }} />
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 30, fontWeight: 700, color: 'var(--ink)', lineHeight: 1.3, letterSpacing: '-0.01em' }}>
                  And the machines knew <em style={{ fontStyle: 'normal', color: 'var(--magenta)', textShadow: '0 0 14px var(--magenta-glow)' }}>none of it</em>. Not one win, not one lesson. That's why I built the <span style={{ color: 'var(--cyan)', textShadow: '0 0 14px var(--cyan-glow)' }}>Cockpit</span>.
                </div>
              </div>
            </Reveal>
          </div>
        </div>
      </SlideShell>
    </div>);

}

Object.assign(window, {
  Slide01, Slide02, Slide03, Slide04, Slide05, Slide06, Slide07,
  Slide08, Slide09, Slide10, Slide11, Slide14, Slide15, Slide21
});
