// slides-3.jsx — Stack, Infrastructure, Lessons, Closing

// ─── Slide 17: Section II divider ───────────────────────────────────────
function S17_SectionII({ num, total }) {
  return (
    <SectionDivider
      num={num} total={total}
      partRoman="II" partLabel="Part two"
      title={<>The stack.</>}
      kicker="Two tools doing different jobs. A pattern for choosing between them. A build loop you can copy."
      bg={C.teal} accent={C.peach}
      label="17 Section II" />);


}

// ─── Slide 18: Claude vs Claude Code ────────────────────────────────────
function S18_ClaudeVsCode({ num, total }) {
  const Col = ({ accent, badge, title, role, use, dontUse }) =>
  <div style={{
    background: C.white, borderRadius: 28, padding: 48,
    border: `2px solid ${accent}`,
    display: 'flex', flexDirection: 'column', gap: 24
  }}>
      <div style={{
      display: 'inline-flex', alignSelf: 'flex-start', padding: '8px 16px',
      background: accent, color: C.cream, borderRadius: 999, fontSize: 18,
      fontFamily: '"Barlow Condensed",system-ui,sans-serif', fontWeight: 700,
      letterSpacing: '0.16em', textTransform: 'uppercase'
    }}>{badge}</div>
      <div style={{ fontSize: 52, fontWeight: 800, color: C.tealInk, letterSpacing: '-0.02em' }}>{title}</div>
      <div style={{ fontSize: 28, color: 'rgba(16,50,63,0.65)', fontStyle: 'italic', lineHeight: 1.3 }}>{role}</div>
      <div>
        <div style={{
        fontFamily: '"Barlow Condensed",system-ui,sans-serif', fontSize: 18, color: accent,
        fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: 12
      }}>Use it for</div>
        <div style={{ fontSize: 26, lineHeight: 1.4, color: C.tealInk }}>{use}</div>
      </div>
      <div>
        <div style={{
        fontFamily: '"Barlow Condensed",system-ui,sans-serif', fontSize: 18,
        color: 'rgba(16,50,63,0.5)',
        fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: 12
      }}>Don't use it for</div>
        <div style={{ fontSize: 26, lineHeight: 1.4, color: 'rgba(16,50,63,0.6)' }}>{dontUse}</div>
      </div>
    </div>;

  return (
    <Slide bg={C.cream} label="18 Claude vs Code">
      <TitleBlock eyebrow="The stack" title="Claude, and Claude Code." />
      <div style={{ marginTop: 70, flex: 1, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40 }}>
        <Col accent={C.coral} badge="Chat" title="Claude"
        role="The thinking partner."
        use="Sketching, debugging logic, drafting copy, reading a vendor PDF, naming things, second-opinion on a model."
        dontUse="Anything that needs to touch your filesystem, run a script end-to-end, or refactor across files." />
        
        <Col accent={C.teal} badge="Agent" title="Claude Code"
        role="The implementation partner."
        use="Multi-file builds, real codebases, git diffs, running scripts, scaffolding integrations, refactoring."
        dontUse="One-off questions and short reasoning tasks — too heavy for a four-line answer." />
        
      </div>
      <Chrome num={num} total={total} />
    </Slide>);

}

// ─── Slide 19: Specialized Projects ────────────────────────────────────
function S19_Projects({ num, total }) {
  const projects = [
  { name: 'QBO Operator', desc: 'Knows our chart of accounts, GL mapping rules, and the 2024 reorg.', accent: C.peach },
  { name: 'Toast Analyst', desc: 'Carries POS schema, businessDate quirks, and our store-name canonical list.', accent: C.coral },
  { name: 'Lease Reader', desc: 'All 11 leases as searchable context. Knows percentage-rent tiers cold.', accent: C.powder },
  { name: 'Brand Voice', desc: 'Writes collections, vendor, and customer copy in our actual tone.', accent: C.butter }];

  return (
    <Slide bg={C.cream} label="19 Projects">
      <TitleBlock
        eyebrow="The stack" title="Specialized Projects."
        kicker="Each finance domain gets its own Project — a Claude with persistent context. The same questions stop costing me five minutes of re-explaining." />
      
      <div style={{ marginTop: 70, flex: 1, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28 }}>
        {projects.map((p) =>
        <div key={p.name} style={{
          background: C.white, borderRadius: 22, padding: 40,
          display: 'flex', gap: 28, alignItems: 'flex-start',
          boxShadow: '0 1px 2px rgba(16,50,63,0.04), 0 8px 22px rgba(16,50,63,0.05)'
        }}>
            <div style={{
            width: 12, alignSelf: 'stretch', borderRadius: 6, background: p.accent, flexShrink: 0
          }} />
            <div>
              <div style={{ fontSize: 38, fontWeight: 700, color: C.tealInk, marginBottom: 12, letterSpacing: '-0.01em' }}>{p.name}</div>
              <div style={{ fontSize: 26, color: 'rgba(16,50,63,0.7)', lineHeight: 1.4, textWrap: 'pretty' }}>{p.desc}</div>
            </div>
          </div>
        )}
      </div>
      <Chrome num={num} total={total} />
    </Slide>);

}

// ─── Slide 20: Build loop ──────────────────────────────────────────────
function S20_BuildLoop({ num, total }) {
  const steps = [
  { n: '1', label: 'Talk it through in chat', desc: 'Describe what I want with Claude until we have a clear spec.', tint: C.peach },
  { n: '2', label: 'Spec → Claude Code', desc: 'Hand the spec to Claude Code, my implementation partner.', tint: C.coral },
  { n: '3', label: 'Clone the repo', desc: 'Claude Code pulls the GitHub repo down onto my computer.', tint: C.powder },
  { n: '4', label: 'Iterate & add code', desc: 'It writes the new code, runs it against real data, and refines.', tint: C.aqua },
  { n: '5', label: 'Push back to GitHub', desc: 'The finished code goes back up to the repo, with history.', tint: C.butter },
  { n: '6', label: 'Vercel deploys it', desc: 'Vercel ships it automatically. The team has it in minutes.', tint: C.coralSoft }];

  return (
    <Slide bg={C.cream} label="36 Build Loop">
      <TitleBlock eyebrow="The loop" title="From idea to deployed." kicker="Chat for the spec. Claude Code for the build. GitHub and Vercel do the rest." />
      <div style={{ marginTop: 64, flex: 1, display: 'flex', alignItems: 'center', gap: 10 }}>
        {steps.map((s, i) =>
        <React.Fragment key={s.n}>
            <div style={{
            flex: 1, background: C.white, borderRadius: 20, padding: 26,
            display: 'flex', flexDirection: 'column', gap: 14, alignSelf: 'stretch',
            boxShadow: '0 1px 2px rgba(16,50,63,0.04), 0 8px 22px rgba(16,50,63,0.05)'
          }}>
              <div style={{
              width: 54, height: 54, borderRadius: '50%', background: s.tint,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 28, fontWeight: 800, color: C.tealInk
            }}>{s.n}</div>
              <div style={{ fontSize: 25, fontWeight: 700, color: C.tealInk, letterSpacing: '-0.01em' }}>{s.label}</div>
              <div style={{ fontSize: 20, color: 'rgba(16,50,63,0.65)', lineHeight: 1.35 }}>{s.desc}</div>
            </div>
            {i < steps.length - 1 &&
          <div style={{ color: C.coral, fontSize: 36, fontWeight: 700 }}>›</div>
          }
          </React.Fragment>
        )}
      </div>
      <Chrome num={num} total={total} />
    </Slide>);

}

// ─── Slide 21: Section III ─────────────────────────────────────────────
function S21_SectionIII({ num, total }) {
  return (
    <SectionDivider
      num={num} total={total}
      partRoman="III" partLabel="Part three"
      title={<>The infrastructure question.</>}
      kicker="Where does the data live? Three slides on the choice that shaped everything else."
      bg={C.tealDeep} accent={C.aqua}
      label="21 Section III" />);


}

// ─── Slide 22: Direct vs Staging ───────────────────────────────────────
function S22_DirectVsStaging({ num, total }) {
  const Side = ({ kind, title, sub, items, tint, muted }) =>
  <div style={{
    background: muted ? 'transparent' : C.white,
    border: muted ? `2px dashed ${C.creamDeep}` : 'none',
    borderRadius: 28, padding: 48,
    display: 'flex', flexDirection: 'column', gap: 24,
    boxShadow: muted ? 'none' : '0 1px 2px rgba(16,50,63,0.04), 0 8px 22px rgba(16,50,63,0.05)'
  }}>
      <div style={{
      display: 'inline-flex', alignSelf: 'flex-start', padding: '8px 16px',
      background: tint, color: muted ? C.tealInk : C.cream, borderRadius: 999,
      fontSize: 18, fontFamily: '"Barlow Condensed",system-ui,sans-serif',
      fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase'
    }}>{kind}</div>
      <div style={{ fontSize: 44, fontWeight: 800, color: C.tealInk, letterSpacing: '-0.02em', lineHeight: 1.1 }}>{title}</div>
      <div style={{ fontSize: 24, color: 'rgba(16,50,63,0.6)', fontStyle: 'italic' }}>{sub}</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 16, marginTop: 4 }}>
        {items.map((t, i) =>
      <div key={i} style={{ display: 'flex', gap: 16, alignItems: 'flex-start', fontSize: 24, lineHeight: 1.4, color: muted ? 'rgba(16,50,63,0.55)' : C.tealInk }}>
            <span style={{ color: tint, marginTop: 6 }}>—</span><span>{t}</span>
          </div>
      )}
      </div>
    </div>;

  return (
    <Slide bg={C.cream} label="22 Direct vs Staging">
      <TitleBlock eyebrow="The fork" title="Direct API calls, or a staging database?" />
      <div style={{ marginTop: 60, flex: 1, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 36 }}>
        <Side kind="Tempting" title="Each script calls the source directly." sub="Toast → script. QBO → script."
        items={[
        'Fast on day one.',
        'Brittle on day 90: every auth issue is a fire.',
        'Joining Toast + QBO data means duplicating pulls.',
        'Rate limits cascade across automations.']
        } tint="rgba(16,50,63,0.45)" muted />
        <Side kind="What I chose" title="Pull once into Supabase. Read from Supabase." sub="Toast → DB. QBO → DB. Everything else → DB."
        items={[
        'One auth job. One rate-limit budget.',
        'Time-traveling: I can ask "what did Toast say last Monday?"',
        'Power BI, Excel, and automations all read the same table.',
        'New automations are SQL, not new integrations.']
        } tint={C.teal} />
      </div>
      <Chrome num={num} total={total} />
    </Slide>);

}

// ─── Slide 23: Why Supabase + pgvector ─────────────────────────────────
function S23_Supabase({ num, total }) {
  return (
    <Slide bg={C.cream} label="23 Supabase">
      <TitleBlock eyebrow="The database" title={<>Supabase, with <span style={{ color: C.coral }}>pgvector.</span></>}
      kicker="Postgres is boring infrastructure. That is the entire reason I picked it." />
      <div style={{ marginTop: 70, flex: 1, display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 60 }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
          <Reason title="It's just Postgres." text="Every accountant who ever wrote a SQL query already knows how to use it. No proprietary query language to learn." />
          <Reason title="pgvector earned its place on day one." text="Vendor invoices in PDF. Embed them, search by description: 'all paper-goods invoices from last quarter.' Used to be impossible." />
          <Reason title="Row-level security I can actually reason about." text="Same audit trail story I'd tell a controller about a spreadsheet — but enforced." />
        </div>
        <MockFrame title="vendor_invoices · semantic search">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12, fontSize: 14 }}>
            <div style={{
              padding: '12px 16px', background: C.creamSoft, borderRadius: 10,
              fontFamily: 'ui-monospace,monospace', fontSize: 13, color: C.tealInk
            }}>
              SELECT vendor, invoice_no, total<br />
              FROM vendor_invoices<br />
              WHERE description {'<->'} 'paper goods' &lt; 0.3<br />
              ORDER BY date DESC;
            </div>
            <div style={{ fontSize: 13, color: 'rgba(16,50,63,0.55)', marginTop: 6 }}>4 results · 38 ms</div>
            {[
            ['Sysco', 'SY-2204', '$1,840.20'],
            ['US Foods', 'UF-5571', '$902.40'],
            ['Restaurant Depot', 'RD-118', '$215.99'],
            ['Sysco', 'SY-2188', '$1,620.55']].
            map((r, i) =>
            <div key={i} style={{
              display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr', gap: 10,
              fontSize: 13, color: C.tealInk, padding: '6px 0',
              borderBottom: i < 3 ? `1px solid ${C.creamDeep}` : 'none',
              fontVariantNumeric: 'tabular-nums'
            }}>
                <div>{r[0]}</div><div style={{ color: 'rgba(16,50,63,0.6)' }}>{r[1]}</div>
                <div style={{ textAlign: 'right', fontWeight: 700 }}>{r[2]}</div>
              </div>
            )}
          </div>
        </MockFrame>
      </div>
      <Chrome num={num} total={total} />
    </Slide>);

}

function Reason({ title, text }) {
  return (
    <div style={{ paddingLeft: 24, borderLeft: `3px solid ${C.coral}` }}>
      <div style={{ fontSize: 32, fontWeight: 700, color: C.tealInk, marginBottom: 10, letterSpacing: '-0.01em' }}>{title}</div>
      <div style={{ fontSize: 26, color: 'rgba(16,50,63,0.7)', lineHeight: 1.4, textWrap: 'pretty' }}>{text}</div>
    </div>);

}

// ─── Slide 24: Why Power BI ────────────────────────────────────────────
function S24_PowerBI({ num, total }) {
  return (
    <Slide bg={C.cream} label="24 Power BI">
      <TitleBlock eyebrow="The dashboard" title="Power BI, on top of the staging DB."
      kicker="The dashboard is the consumer of the staging database, not the owner of any data." />
      
      <div style={{ marginTop: 60, flex: 1, display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 60, alignItems: 'center' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 26 }}>
          <Reason title="Excel-shaped people open it on day one." text="Pivot tables, slicers, drill-downs. No retraining the org." />
          <Reason title="Refresh is one direction." text="The DB is the source of truth. Power BI is glass." />
          <Reason title="It pairs with Microsoft 365." text="Which the rest of the company already lives in." />
        </div>
        <MockFrame title="cashflow.pbix · refreshed 7:14 AM">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 12 }}>
              {[
              { l: 'Cash on hand', v: '$418k', d: '+$22k' },
              { l: '13-wk min', v: '$291k', d: 'wk 7' },
              { l: '13-wk max', v: '$502k', d: 'wk 11' }].
              map((k) =>
              <div key={k.l} style={{ background: C.creamSoft, borderRadius: 12, padding: 14 }}>
                  <div style={{ fontSize: 11, fontFamily: '"Barlow Condensed",system-ui,sans-serif', textTransform: 'uppercase', letterSpacing: '0.16em', color: 'rgba(16,50,63,0.55)', fontWeight: 700 }}>{k.l}</div>
                  <div style={{ fontSize: 22, fontWeight: 800, color: C.teal, marginTop: 4, fontVariantNumeric: 'tabular-nums' }}>{k.v}</div>
                  <div style={{ fontSize: 11, color: 'rgba(16,50,63,0.55)' }}>{k.d}</div>
                </div>
              )}
            </div>
            <div style={{
              height: 140, background: C.creamSoft, borderRadius: 12, padding: 14, position: 'relative',
              display: 'flex', alignItems: 'flex-end', gap: 6
            }}>
              {[60, 45, 70, 90, 50, 78, 95, 110, 80, 92, 70, 55, 88].map((h, i) =>
              <div key={i} style={{
                flex: 1, height: `${h}%`, background: i === 7 ? C.coral : C.teal,
                borderRadius: '4px 4px 0 0', opacity: i === 7 ? 1 : 0.85
              }} />
              )}
              <div style={{ position: 'absolute', top: 8, left: 14, fontSize: 11, fontFamily: '"Barlow Condensed",system-ui,sans-serif', textTransform: 'uppercase', letterSpacing: '0.14em', color: 'rgba(16,50,63,0.55)', fontWeight: 700 }}>Net cash, 13-wk</div>
            </div>
          </div>
        </MockFrame>
      </div>
      <Chrome num={num} total={total} />
    </Slide>);

}

// ─── Slide 25: Section IV ──────────────────────────────────────────────
function S25_SectionIV({ num, total }) {
  return (
    <SectionDivider
      num={num} total={total}
      partRoman="IV" partLabel="Part four"
      title={<>Hard-won lessons.</>}
      kicker="Four things that bit me. They will bite you too. Here is what they cost and what I do now."
      bg={C.coral} accent={C.cream}
      label="25 Section IV" />);


}

// ─── Lesson primitive ─────────────────────────────────────────────────
function LessonSlide({ num, total, n, title, costLabel, costValue, story, fix, label }) {
  return (
    <Slide bg={C.cream} label={label}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 32, marginBottom: 40 }}>
        <div style={{
          fontFamily: '"Barlow Condensed",system-ui,sans-serif',
          fontSize: 28, fontWeight: 700, color: C.coral, letterSpacing: '0.18em',
          textTransform: 'uppercase'
        }}>Lesson {n} / 04</div>
        <div style={{ flex: 1, height: 2, background: C.creamDeep }} />
        <div style={{
          fontFamily: '"Barlow Condensed",system-ui,sans-serif',
          fontSize: 24, fontWeight: 600, color: 'rgba(16,50,63,0.55)',
          textTransform: 'uppercase', letterSpacing: '0.18em'
        }}>{costLabel}: <span style={{ color: C.coral }}>{costValue}</span></div>
      </div>
      <h1 style={{
        fontSize: TYPE_SCALE.title, fontWeight: 800, letterSpacing: '-0.02em',
        lineHeight: 1.05, margin: 0, color: C.tealInk, maxWidth: 1500, textWrap: 'balance'
      }}>{title}</h1>
      <div style={{
        marginTop: 70, flex: 1,
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60
      }}>
        <div>
          <div style={{
            fontFamily: '"Barlow Condensed",system-ui,sans-serif',
            textTransform: 'uppercase', letterSpacing: '0.18em',
            fontSize: 22, color: C.coral, fontWeight: 700, marginBottom: 18
          }}>What happened</div>
          <div style={{ fontSize: 32, lineHeight: 1.32, color: C.tealInk, fontWeight: 500, textWrap: 'pretty' }}>{story}</div>
        </div>
        <div style={{ background: C.teal, color: C.cream, borderRadius: 28, padding: 48, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
          <div style={{
            fontFamily: '"Barlow Condensed",system-ui,sans-serif',
            textTransform: 'uppercase', letterSpacing: '0.18em',
            fontSize: 22, color: C.peach, fontWeight: 700, marginBottom: 18
          }}>What I do now</div>
          <div style={{ fontSize: 32, lineHeight: 1.35, fontWeight: 500, textWrap: 'pretty' }}>{fix}</div>
        </div>
      </div>
      <Chrome num={num} total={total} />
    </Slide>);

}

// ─── Slide 26: OAuth + token rotation ──────────────────────────────────
function S26_OAuth({ num, total }) {
  return (
    <LessonSlide
      num={num} total={total} n="01"
      title="OAuth flows, and the QBO 100-day refresh."
      costLabel="Cost"
      costValue="One quiet weekend"
      story={`QuickBooks Online refresh tokens expire after 100 days of inactivity. I learned this on a Sunday — payroll job had silently failed for a week, and Monday morning was a cliff.`}
      fix={`Every integration writes a heartbeat to a "tokens" table. A daily check pings me if any token is older than 80 days, hasn't refreshed, or 401'd. Auth is monitoring, not faith.`}
      label="26 OAuth" />);


}

// ─── Slide 27: Toast rate limits + businessDate ───────────────────────
function S27_Toast({ num, total }) {
  return (
    <LessonSlide
      num={num} total={total} n="02"
      title="Toast rate limits and the businessDate trap."
      costLabel="Cost"
      costValue="Two weeks of ghost data"
      story={`Toast's businessDate is not the calendar date — a sale at 1:30 AM after closing belongs to yesterday. I built reports against ordered_at and our late-night numbers vanished into the next morning's totals.`}
      fix={`Every Toast pull keys on businessDate, not ordered_at. Rate-limited calls are queued and exponential-backoff'd. The staging table makes the difference auditable, and I can replay any day.`}
      label="27 Toast" />);


}

// ─── Slide 28: Brittleness vs staging ──────────────────────────────────
function S28_Brittle({ num, total }) {
  return (
    <LessonSlide
      num={num} total={total} n="03"
      title="Brittle direct integrations always lose."
      costLabel="Cost"
      costValue="Three rebuilds before I learned"
      story={`The first three automations called Toast and QBO directly from the script. Every API change, every credential rotation, every rate-limit cascade took down something seemingly unrelated.`}
      fix={`Now the rule is simple: if it touches a vendor API, it writes to Supabase. Everything downstream reads from Supabase. One thing fails at a time, and you can see exactly which thing.`}
      label="28 Brittle" />);


}

// ─── Slide 29: Imposter syndrome quote ─────────────────────────────────
function S29_Imposter({ num, total }) {
  return (
    <Slide bg={C.tealDeep} ink={C.cream} label="29 Imposter">
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
        <div style={{
          fontFamily: '"Barlow Condensed",system-ui,sans-serif',
          textTransform: 'uppercase', letterSpacing: '0.22em',
          fontSize: 24, color: C.peach, fontWeight: 600, marginBottom: 50,
          display: 'flex', alignItems: 'center', gap: 18
        }}>
          <span style={{
            fontFamily: '"Barlow Condensed",system-ui,sans-serif',
            fontSize: 22, fontWeight: 700, color: C.coral, letterSpacing: '0.18em'
          }}>Lesson 04 / 04</span>
          <span style={{ color: 'rgba(243,236,223,0.4)' }}>·</span>
          <span>The imposter trap</span>
        </div>
        <div style={{
          fontSize: 92, fontWeight: 700, lineHeight: 1.08,
          letterSpacing: '-0.02em', color: C.cream, maxWidth: 1600, textWrap: 'balance'
        }}>
          The job is not to write code.
          <br />
          <span style={{ color: C.peach }}>
            The job is to know which problems are worth solving.
          </span>
        </div>
        <div style={{
          marginTop: 60, fontSize: 32, color: 'rgba(243,236,223,0.7)',
          maxWidth: 1300, lineHeight: 1.4, textWrap: 'pretty'
        }}>
          You already do that part. What's new is that the implementation cost
          dropped to where you can act on what you already know.
        </div>
      </div>
      <Chrome num={num} total={total} ink={C.cream} />
    </Slide>);

}

// ─── Slide 30: Reframe ──────────────────────────────────────────────────
function S30_Reframe({ num, total }) {
  const items = [
  { was: 'Reporter of what happened', now: 'Operator of what happens next' },
  { was: 'Customer of IT', now: 'Builder of the seams between systems' },
  { was: 'Headcount = capacity', now: 'Leverage = capacity' },
  { was: 'Annual budget cycle', now: 'Continuous forecast, audited live' }];

  return (
    <Slide bg={C.cream} label="30 Reframe">
      <TitleBlock eyebrow="Where this goes" title="What finance can own now." />
      <div style={{ marginTop: 60, flex: 1, display: 'grid', gridTemplateColumns: '1fr', gap: 16 }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 60px 1fr',
          fontFamily: '"Barlow Condensed",system-ui,sans-serif',
          textTransform: 'uppercase', letterSpacing: '0.16em', fontSize: 20,
          color: 'rgba(16,50,63,0.55)', fontWeight: 700, paddingBottom: 12,
          borderBottom: `2px solid ${C.creamDeep}`
        }}>
          <div>Was</div><div /><div>Is becoming</div>
        </div>
        {items.map((row, i) =>
        <div key={i} style={{
          display: 'grid', gridTemplateColumns: '1fr 60px 1fr', gap: 28, alignItems: 'center',
          padding: '24px 0', borderBottom: i < items.length - 1 ? `1px solid ${C.creamDeep}` : 'none'
        }}>
            <div style={{
            fontSize: 38, color: 'rgba(16,50,63,0.55)', textDecoration: 'line-through',
            textDecorationColor: 'rgba(232,96,76,0.5)', textDecorationThickness: '2px',
            fontWeight: 500
          }}>{row.was}</div>
            <div style={{ fontSize: 36, color: C.coral, textAlign: 'center' }}>→</div>
            <div style={{ fontSize: 42, color: C.tealInk, fontWeight: 700, letterSpacing: '-0.01em', textWrap: 'pretty' }}>{row.now}</div>
          </div>
        )}
      </div>
      <Chrome num={num} total={total} />
    </Slide>);

}

// ─── Slide 31: The forum ───────────────────────────────────────────────
function S31_Forum({ num, total }) {
  return (
    <Slide bg={C.cream} pad={false} label="31 Forum" style={{ position: 'relative' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', height: '100%' }}>
        <div style={{
          padding: `${SPACING.paddingTop}px 80px ${SPACING.paddingBottom}px ${SPACING.paddingX}px`,
          display: 'flex', flexDirection: 'column', justifyContent: 'center'
        }}>
          <TitleBlock
            eyebrow="The proposal"
            title={<>An ongoing forum,<br />for Richmond finance.</>}
            kicker="No talk, no vendor sponsor, no certificate. Just operators showing what shipped this month, what broke, and what they want to try next." />
          
          <div style={{
            marginTop: 60, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24
          }}>
            <ForumCard label="Cadence" value="Monthly · 90 min" tint={C.peach} />
            <ForumCard label="Format" value="Two demos, one debate" tint={C.coral} />
            <ForumCard label="Who" value="Finance operators, not vendors" tint={C.powder} />
            <ForumCard label="First meeting" value="July · Richmond, VA" tint={C.aqua} />
          </div>
        </div>
        <div style={{
          background: C.teal, color: C.cream, padding: '110px 90px',
          display: 'flex', flexDirection: 'column', justifyContent: 'center', position: 'relative', overflow: 'hidden'
        }}>
          <Star size={60} color={C.peach} style={{ position: 'absolute', top: 90, right: 90, opacity: 0.5 }} />
          <Star size={36} color={C.coral} style={{ position: 'absolute', top: 200, right: 200, opacity: 0.4 }} />
          <div style={{
            fontFamily: '"Barlow Condensed",system-ui,sans-serif',
            textTransform: 'uppercase', letterSpacing: '0.22em', fontWeight: 700,
            fontSize: 24, color: C.peach, marginBottom: 28
          }}>What it could look like</div>
          <div style={{ fontSize: 44, lineHeight: 1.25, fontWeight: 600, textWrap: 'pretty' }}>
            "Last month I built a vendor-invoice search.<br />Here's what worked. Here's what didn't.<br />What would you have done differently?"
          </div>
          <div style={{
            marginTop: 50, fontSize: 26, color: 'rgba(243,236,223,0.7)',
            fontStyle: 'italic'
          }}>
            Show your work. Borrow other people's. That's the format.
          </div>
        </div>
      </div>
      <Chrome num={num} total={total} />
    </Slide>);

}

function ForumCard({ label, value, tint }) {
  return (
    <div style={{
      background: C.white, borderRadius: 18, padding: 28,
      borderTop: `6px solid ${tint}`,
      boxShadow: '0 1px 2px rgba(16,50,63,0.04), 0 6px 18px rgba(16,50,63,0.04)'
    }}>
      <div style={{
        fontFamily: '"Barlow Condensed",system-ui,sans-serif',
        textTransform: 'uppercase', letterSpacing: '0.18em',
        fontSize: 18, color: 'rgba(16,50,63,0.6)', fontWeight: 700, marginBottom: 8
      }}>{label}</div>
      <div style={{ fontSize: 30, fontWeight: 700, color: C.tealInk, letterSpacing: '-0.01em' }}>{value}</div>
    </div>);

}

// ─── Slide 32: CTA / closing ───────────────────────────────────────────
function S32_Closing({ num, total }) {
  return (
    <Slide bg={C.tealDeep} ink={C.cream} pad={false} label="32 Closing" style={{ position: 'relative', overflow: 'hidden' }}>
      <Checker height={22} style={{ position: 'absolute', top: 0, left: 0, right: 0 }} />
      <Checker height={22} style={{ position: 'absolute', bottom: 0, left: 0, right: 0 }} />
      <div style={{
        position: 'absolute', inset: 0,
        padding: `${SPACING.paddingTop}px ${SPACING.paddingX}px ${SPACING.paddingBottom}px`,
        display: 'flex', flexDirection: 'column', justifyContent: 'center'
      }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.35fr 1fr', gap: 90, alignItems: 'center' }}>
          <div>
            <div style={{
              fontFamily: '"Barlow Condensed",system-ui,sans-serif',
              textTransform: 'uppercase', letterSpacing: '0.22em',
              fontSize: 28, color: C.peach, fontWeight: 600, marginBottom: 32,
              display: 'flex', alignItems: 'center', gap: 18
            }}>
              <Star size={26} color={C.peach} />
              Let's connect
            </div>
            <div style={{
              fontSize: 104, fontWeight: 800, lineHeight: 0.98,
              letterSpacing: '-0.03em', color: C.cream, textWrap: 'balance'
            }}>
              What are<br />you <span style={{ color: C.peach }}>building?</span>
            </div>
            <div style={{
              marginTop: 44, display: 'flex', flexDirection: 'column', gap: 16,
              fontSize: 32, color: C.cream
            }}>
              {[
              'What are you building?',
              "What problems are you solving?",
              'How are you solving them?'].
              map((q) =>
              <div key={q} style={{ display: 'flex', gap: 16, alignItems: 'flex-start', lineHeight: 1.3 }}>
                  <span style={{ color: C.coral, marginTop: 4 }}>→</span><span>{q}</span>
                </div>
              )}
            </div>
            <div style={{
              marginTop: 40, fontSize: 26, color: 'rgba(243,236,223,0.7)', fontStyle: 'italic', maxWidth: 760, textWrap: 'pretty', lineHeight: 1.4
            }}>I want to meet the people doing this work, trade notes, compare scars, help each other learn.

            </div>
          </div>
          <div style={{
            background: 'rgba(243,236,223,0.06)', border: '1px solid rgba(243,236,223,0.2)',
            borderRadius: 28, padding: 48, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 24
          }}>
            {/* QR placeholder */}
            <div style={{
              width: 300, height: 300, borderRadius: 20, background: C.cream,
              border: `3px dashed ${C.coral}`,
              display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 14
            }}>
              <div style={{
                width: 92, height: 92, borderRadius: 14,
                backgroundImage: `repeating-linear-gradient(0deg, ${C.tealInk} 0 12px, transparent 12px 24px), repeating-linear-gradient(90deg, ${C.tealInk} 0 12px, transparent 12px 24px)`,
                opacity: 0.25
              }} />
              <div style={{
                fontFamily: '"Barlow Condensed",system-ui,sans-serif', fontSize: 22, color: 'rgba(16,50,63,0.7)',
                fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', textAlign: 'center'
              }}>QR code<br /><span style={{ fontSize: 16, opacity: 0.7 }}>placeholder</span></div>
            </div>
            <div style={{ textAlign: 'center', fontSize: 26, color: C.cream, fontWeight: 600, lineHeight: 1.4 }}>
              Scan to connect with me
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6, fontSize: 22, color: 'rgba(243,236,223,0.75)', textAlign: 'center' }}>
              <div>chris@gelaticelesti.com</div>
              <div>LinkedIn · /in/chris-clark <span style={{ opacity: 0.5 }}>(placeholder)</span></div>
            </div>
          </div>
        </div>
      </div>
      <Chrome num={num} total={total} ink={C.cream} />
    </Slide>);

}

// ─── Tech stack overview ───────────────────────────────────────────────
function StackCard({ stage, role, name, desc, tint }) {
  return (
    <div style={{
      background: C.white, borderRadius: 28, padding: 48,
      borderTop: `8px solid ${tint}`,
      display: 'flex', flexDirection: 'column', gap: 22,
      boxShadow: '0 1px 2px rgba(16,50,63,0.04), 0 8px 22px rgba(16,50,63,0.05)'
    }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{ fontFamily: '"Barlow Condensed",system-ui,sans-serif', fontSize: 64, fontWeight: 800, color: 'rgba(16,50,63,0.12)', lineHeight: 1 }}>{stage}</div>
        <div style={{
          display: 'inline-flex', padding: '8px 16px', background: tint, color: C.cream, borderRadius: 999,
          fontSize: 18, fontFamily: '"Barlow Condensed",system-ui,sans-serif', fontWeight: 700,
          letterSpacing: '0.16em', textTransform: 'uppercase', whiteSpace: 'nowrap'
        }}>{role}</div>
      </div>
      <div style={{ fontSize: 60, fontWeight: 800, color: C.tealInk, letterSpacing: '-0.02em' }}>{name}</div>
      <div style={{ fontSize: 27, color: 'rgba(16,50,63,0.7)', lineHeight: 1.4, textWrap: 'pretty' }}>{desc}</div>
    </div>);

}

function S_TechStack({ num, total }) {
  return (
    <Slide bg={C.cream} label="30 Tech Stack">
      <TitleBlock eyebrow="Under the hood" title="The tech stack."
      kicker="Three tools, three jobs. This is everything that runs the finance system." />
      <div style={{ marginTop: 70, flex: 1, display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 36, alignItems: 'stretch' }}>
        <StackCard stage="01" role="Database" name="Supabase" tint={C.teal}
        desc="Postgres that holds every number — Toast sales, QuickBooks obligations, vendor invoices. One source of truth." />
        <StackCard stage="02" role="Code" name="GitHub" tint={C.tealInk}
        desc="Every script and the app itself, versioned in one repo. The single home for the code that runs everything." />
        <StackCard stage="03" role="Frontend" name="Vercel" tint={C.coral}
        desc="Hosts the dashboards and runs the scheduled jobs. Where the app actually lives for the team." />
      </div>
      <Chrome num={num} total={total} />
    </Slide>);

}

// ─── Data flow map ──────────────────────────────────────────────────────
function FlowNode({ name, sub, tint, big }) {
  return (
    <div style={{
      background: C.white, borderRadius: 18, padding: big ? '30px 28px' : '20px 22px',
      border: `2px solid ${tint}`, height: big ? '100%' : 'auto',
      boxShadow: '0 1px 2px rgba(16,50,63,0.04), 0 8px 22px rgba(16,50,63,0.05)',
      display: 'flex', flexDirection: 'column', gap: 6, alignItems: 'center', justifyContent: 'center', textAlign: 'center'
    }}>
      <div style={{ width: 14, height: 14, borderRadius: 4, background: tint, marginBottom: 4 }} />
      <div style={{ fontSize: big ? 46 : 30, fontWeight: 800, color: C.tealInk, letterSpacing: '-0.01em', whiteSpace: 'nowrap' }}>{name}</div>
      {sub && <div style={{ fontSize: big ? 22 : 18, color: 'rgba(16,50,63,0.6)', lineHeight: 1.3 }}>{sub}</div>}
    </div>);

}

function FlowArrow({ label, tint }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6, padding: '0 6px' }}>
      <div style={{
        fontFamily: '"Barlow Condensed",system-ui,sans-serif', fontSize: 17, fontWeight: 700,
        letterSpacing: '0.12em', textTransform: 'uppercase', color: tint, whiteSpace: 'nowrap'
      }}>{label}</div>
      <div style={{ fontSize: 42, color: tint, lineHeight: 1, fontWeight: 800 }}>→</div>
    </div>);

}

function S_DataFlowMap({ num, total }) {
  return (
    <Slide bg={C.cream} label="31 Data Flow Map">
      <TitleBlock eyebrow="The map" title="How it all connects." />
      <div style={{ marginTop: 18, display: 'flex', gap: 28 }}>
        <Legend tint={C.teal} text="Code path" />
        <Legend tint={C.coral} text="Data path" />
      </div>
      <div style={{
        marginTop: 48, flex: 1, display: 'grid',
        gridTemplateColumns: '1.6fr 132px 1fr 118px 0.85fr',
        gridTemplateRows: '1fr 1fr', rowGap: 56, alignItems: 'center'
      }}>
        {/* Row 1 — code path */}
        <div style={{ gridColumn: 1, gridRow: 1, display: 'flex', alignItems: 'center' }}>
          <div style={{ flex: 1 }}><FlowNode name="Claude Code" sub="on my computer" tint={C.teal} /></div>
          <FlowArrow label="push" tint={C.teal} />
          <div style={{ flex: 1 }}><FlowNode name="GitHub" sub="the code" tint={C.tealInk} /></div>
        </div>
        <div style={{ gridColumn: 2, gridRow: 1 }}><FlowArrow label="deploy" tint={C.teal} /></div>

        {/* Row 2 — data path in */}
        <div style={{ gridColumn: 1, gridRow: 2, display: 'flex' }}>
          <div style={{ flex: 1 }}><FlowNode name="Toast POS" sub="live sales data" tint={C.coral} /></div>
          <div style={{ flex: 1 }} />
        </div>
        <div style={{ gridColumn: 2, gridRow: 2 }}><FlowArrow label="API pull" tint={C.coral} /></div>

        {/* Vercel hub — spans both rows */}
        <div style={{ gridColumn: 3, gridRow: '1 / 3' }}>
          <div style={{
            background: C.white, borderRadius: 24, padding: '34px 28px', height: '100%',
            border: `2px solid ${C.coral}`, boxShadow: '0 1px 2px rgba(16,50,63,0.04), 0 12px 30px rgba(16,50,63,0.08)',
            display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 14, textAlign: 'center'
          }}>
            <div style={{
              display: 'inline-flex', padding: '6px 14px', background: C.coral, color: C.cream, borderRadius: 999,
              fontSize: 16, fontFamily: '"Barlow Condensed",system-ui,sans-serif', fontWeight: 700,
              letterSpacing: '0.16em', textTransform: 'uppercase', whiteSpace: 'nowrap'
            }}>The hub</div>
            <div style={{ fontSize: 50, fontWeight: 800, color: C.tealInk, letterSpacing: '-0.02em' }}>Vercel</div>
            <div style={{ fontSize: 21, color: 'rgba(16,50,63,0.6)', lineHeight: 1.3 }}>Runs the app &amp; the scheduled jobs</div>
            <div style={{
              marginTop: 6, padding: '10px 16px', background: 'rgba(232,96,76,0.12)', borderRadius: 12,
              fontFamily: '"Barlow Condensed",system-ui,sans-serif', fontWeight: 700, letterSpacing: '0.14em',
              textTransform: 'uppercase', fontSize: 17, color: C.coral
            }}>API keys live here</div>
          </div>
        </div>

        {/* write arrow → Supabase */}
        <div style={{ gridColumn: 4, gridRow: '1 / 3', display: 'flex', justifyContent: 'center' }}><FlowArrow label="write" tint={C.coral} /></div>
        <div style={{ gridColumn: 5, gridRow: '1 / 3' }}><FlowNode big name="Supabase" sub="the database" tint={C.teal} /></div>
      </div>
      <div style={{ fontSize: 26, color: 'rgba(16,50,63,0.65)', lineHeight: 1.4, maxWidth: 1500, textWrap: 'pretty', marginBottom: 8 }}>
        Keys never touch the code. Code flows in through GitHub; live data flows from Toast through Vercel and lands in Supabase.
      </div>
      <Chrome num={num} total={total} />
    </Slide>);

}

function Legend({ tint, text }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
      <span style={{ width: 16, height: 16, borderRadius: 5, background: tint }} />
      <span style={{
        fontFamily: '"Barlow Condensed",system-ui,sans-serif', fontSize: 20, fontWeight: 700,
        letterSpacing: '0.14em', textTransform: 'uppercase', color: 'rgba(16,50,63,0.6)', whiteSpace: 'nowrap'
      }}>{text}</span>
    </div>);

}

// ─── GitHub ─────────────────────────────────────────────────────────────
function S_GitHub({ num, total }) {
  const commits = [
  ['a3f9c2', 'feat: daily sales email job', '2h ago'],
  ['7b1e08', 'fix: Toast businessDate edge case', '1d ago'],
  ['c9d4a1', 'add vendor-invoice embedding script', '3d ago'],
  ['f0a72d', 'refactor: move keys to Vercel env', '5d ago'],
  ['9e15bb', 'init Supabase schema', '1w ago']];

  return (
    <Slide bg={C.cream} label="32 GitHub">
      <TitleBlock eyebrow="The code" title="GitHub holds the code."
      kicker="Every script, the app, and the SQL — one versioned repo. The single source of truth for everything that runs." />
      <div style={{ marginTop: 64, flex: 1, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60 }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
          <Reason title="One home for every line." text="Scripts, the dashboard app, and the database SQL all live in a single repo — not scattered across my laptop." />
          <Reason title="Every change has a history." text="I can see exactly what changed, when, and why — and roll back a bad change in seconds." />
          <Reason title="The handoff point." text="Claude Code pushes here; Vercel deploys from here. GitHub is the seam between writing code and running it." />
        </div>
        <MockFrame title="gelati-finance · main">
          <div style={{ display: 'flex', flexDirection: 'column' }}>
            {commits.map((c, i) =>
            <div key={i} style={{
              display: 'grid', gridTemplateColumns: 'auto 1fr auto', gap: 16, alignItems: 'center',
              padding: '14px 0', borderBottom: i < commits.length - 1 ? `1px solid ${C.creamDeep}` : 'none'
            }}>
                <span style={{ fontFamily: 'ui-monospace,monospace', fontSize: 15, color: C.coral, fontWeight: 700 }}>{c[0]}</span>
                <span style={{ fontSize: 16, color: C.tealInk }}>{c[1]}</span>
                <span style={{ fontSize: 14, color: 'rgba(16,50,63,0.5)', whiteSpace: 'nowrap' }}>{c[2]}</span>
              </div>
            )}
            <div style={{ marginTop: 16, display: 'flex', gap: 10, flexWrap: 'wrap' }}>
              {['/scripts', '/app', '/sql'].map((f) =>
              <span key={f} style={{
                fontFamily: 'ui-monospace,monospace', fontSize: 14, color: 'rgba(16,50,63,0.6)',
                background: C.creamSoft, borderRadius: 8, padding: '6px 12px'
              }}>{f}</span>
              )}
            </div>
          </div>
        </MockFrame>
      </div>
      <Chrome num={num} total={total} />
    </Slide>);

}

// ─── Vercel ─────────────────────────────────────────────────────────────
function S_Vercel({ num, total }) {
  return (
    <Slide bg={C.cream} label="34 Vercel">
      <TitleBlock eyebrow="Frontend & deploy" title="Vercel runs the app."
      kicker="Push to GitHub and Vercel ships it. It also holds the keys and runs the jobs on a schedule." />
      <div style={{ marginTop: 60, flex: 1, display: 'grid', gridTemplateColumns: '1fr 1.15fr', gap: 60, alignItems: 'center' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 26 }}>
          <Reason title="Deploys straight from GitHub." text="Push to the repo and Vercel builds and ships it automatically. No servers for me to babysit." />
          <Reason title="The keys live here." text="Toast and QuickBooks credentials are environment variables in Vercel — never written into the code." />
          <Reason title="Runs the dashboards and the jobs." text="The team opens a URL; scheduled functions pull fresh data every morning." />
        </div>
        <MockFrame title="vercel · gelati-finance">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16, fontSize: 14 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, fontFamily: 'ui-monospace,monospace', fontSize: 15, color: C.teal, fontWeight: 700 }}>
              <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#7BC68F' }} />
              ✓ Production · main@a3f9c2 · Ready · built 38s
            </div>
            <div>
              <div style={{ fontFamily: '"Barlow Condensed",system-ui,sans-serif', fontSize: 14, textTransform: 'uppercase', letterSpacing: '0.16em', color: 'rgba(16,50,63,0.5)', fontWeight: 700, marginBottom: 8 }}>Scheduled functions</div>
              <div style={{ fontFamily: 'ui-monospace,monospace', fontSize: 14, color: C.tealInk, lineHeight: 1.7 }}>
                <div>/api/sync-toast<span style={{ color: 'rgba(16,50,63,0.5)' }}> · every 15 min</span></div>
                <div>/api/daily-report<span style={{ color: 'rgba(16,50,63,0.5)' }}> · 6:00 AM daily</span></div>
              </div>
            </div>
            <div style={{ padding: 14, background: C.creamSoft, borderRadius: 12 }}>
              <div style={{ fontFamily: '"Barlow Condensed",system-ui,sans-serif', fontSize: 14, textTransform: 'uppercase', letterSpacing: '0.16em', color: 'rgba(16,50,63,0.5)', fontWeight: 700, marginBottom: 8 }}>Environment variables · encrypted</div>
              <div style={{ fontFamily: 'ui-monospace,monospace', fontSize: 14, color: C.tealInk, lineHeight: 1.8 }}>
                <div>TOAST_CLIENT_SECRET&nbsp;&nbsp;••••••••</div>
                <div>QBO_REFRESH_TOKEN&nbsp;&nbsp;&nbsp;&nbsp;••••••••</div>
                <div>SUPABASE_SERVICE_KEY&nbsp;••••••••</div>
              </div>
            </div>
            <div style={{ fontFamily: 'ui-monospace,monospace', fontSize: 14, color: 'rgba(16,50,63,0.6)' }}>finance.gelaticelesti.app</div>
          </div>
        </MockFrame>
      </div>
      <Chrome num={num} total={total} />
    </Slide>);

}

// ─── Grand finale — culminating statement ──────────────────────────────
function S_Finale({ num, total }) {
  const peach = { color: C.peach };
  return (
    <Slide bg={C.tealDeep} ink={C.cream} pad={false} label="38 Finale" style={{ position: 'relative', overflow: 'hidden' }}>
      <Checker height={22} style={{ position: 'absolute', top: 0, left: 0, right: 0 }} />
      <Checker height={22} style={{ position: 'absolute', bottom: 0, left: 0, right: 0 }} />
      <div style={{
        position: 'absolute', inset: 0,
        padding: `${SPACING.paddingTop}px ${SPACING.paddingX}px`,
        display: 'flex', flexDirection: 'column', justifyContent: 'center'
      }}>
        <div style={{
          fontFamily: '"Barlow Condensed",system-ui,sans-serif',
          textTransform: 'uppercase', letterSpacing: '0.22em', whiteSpace: 'nowrap',
          fontSize: 26, color: C.peach, fontWeight: 600, marginBottom: 36,
          display: 'flex', alignItems: 'center', gap: 18
        }}>
          <Star size={24} color={C.peach} />
          The real takeaway
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 44 }}>
          <div style={{ fontSize: 42, fontWeight: 600, color: 'rgba(243,236,223,0.92)', lineHeight: 1.2 }}>I learn from <span style={peach}>Claude.</span></div>
          <div style={{ fontSize: 42, fontWeight: 600, color: 'rgba(243,236,223,0.92)', lineHeight: 1.2 }}>My code and scripts learn from <span style={peach}>Claude.</span></div>
          <div style={{ fontSize: 42, fontWeight: 600, color: 'rgba(243,236,223,0.92)', lineHeight: 1.2 }}><span style={peach}>Claude</span> learns from <span style={peach}>Claude.</span></div>
        </div>
        <div style={{
          fontSize: 82, fontWeight: 800, lineHeight: 1.06, letterSpacing: '-0.02em',
          color: C.cream, maxWidth: 1500
        }}>
          It's all about <span style={peach}>continuing to get better.</span>
        </div>
        <div style={{
          marginTop: 52, fontSize: 34, lineHeight: 1.4, color: 'rgba(243,236,223,0.78)',
          maxWidth: 1420, textWrap: 'pretty'
        }}>
          These skills are all learnable — and Claude can help you learn and deploy them in a way that resonates
          with <em style={{ fontStyle: 'normal', color: C.aqua }}>you</em>: your own learning style, inside your own company's ecosystem.
        </div>
      </div>
      <Chrome num={num} total={total} ink={C.cream} />
    </Slide>);

}

Object.assign(window, {
  S17_SectionII, S18_ClaudeVsCode, S19_Projects, S20_BuildLoop,
  S21_SectionIII, S22_DirectVsStaging, S23_Supabase, S24_PowerBI,
  S25_SectionIV, LessonSlide, S26_OAuth, S27_Toast, S28_Brittle, S29_Imposter,
  S30_Reframe, S31_Forum, ForumCard, S32_Closing, Reason,
  StackCard, S_TechStack, FlowNode, FlowArrow, Legend, S_DataFlowMap,
  S_GitHub, S_Vercel, S_Finale
});