// slides.jsx — AI Ready RVA deck slide components
// Gelati Celesti palette, 1920×1080

const TYPE_SCALE = {
  display: 200, // monster cover figure
  hero: 128, // very large numbers
  title: 88, // slide titles
  sectionTitle: 140, // section divider titles
  subtitle: 52,
  lead: 44,
  body: 34,
  small: 28,
  eyebrow: 24
};

const SPACING = {
  paddingTop: 110,
  paddingBottom: 110,
  paddingX: 130,
  titleGap: 56,
  itemGap: 32
};

const C = {
  teal: '#1C4754',
  tealDeep: '#143946',
  tealInk: '#10323F',
  cream: '#F3ECDF',
  creamSoft: '#EFE6D6',
  creamDeep: '#E7DDC8',
  powder: '#A9C7DB',
  powderSoft: '#CBDDEA',
  aqua: '#BEE1DE',
  coral: '#E8604C',
  coralSoft: '#F28D7E',
  pink: '#F4C1C1',
  peach: '#F6B24E',
  butter: '#E9A63E',
  white: '#FFFFFF'
};

// ─── Primitive: Slide frame ──────────────────────────────────────────────
function Slide({ bg = C.cream, ink = C.tealInk, children, style, pad = true, label }) {
  return (
    <section data-screen-label={label} style={{
      background: bg,
      color: ink,
      fontFamily: '"DM Sans","Figtree",system-ui,sans-serif',
      padding: pad ? `${SPACING.paddingTop}px ${SPACING.paddingX}px ${SPACING.paddingBottom}px` : 0,
      display: 'flex',
      flexDirection: 'column',
      ...style
    }}>
      {children}
    </section>);

}

// ─── Primitive: Eyebrow + Title block ────────────────────────────────────
function TitleBlock({ eyebrow, title, kicker, color, eyebrowColor, kickerColor, maxWidth = 1500 }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 28, maxWidth }}>
      {title &&
      <h1 style={{
        fontSize: TYPE_SCALE.title,
        fontWeight: 700,
        letterSpacing: '-0.02em',
        lineHeight: 1.05,
        margin: 0,
        color: color || 'inherit',
        textWrap: 'balance'
      }}>{title}</h1>
      }
      {kicker &&
      <p style={{
        fontSize: TYPE_SCALE.lead,
        lineHeight: 1.3,
        margin: 0,
        color: kickerColor || 'rgba(16,50,63,0.7)',
        textWrap: 'pretty',
        maxWidth: 1200
      }}>{kicker}</p>
      }
    </div>);

}

// ─── Primitive: Page chrome (slide number + brand mark) ──────────────────
function Chrome({ num, total, ink = C.tealInk, hide }) {
  if (hide) return null;
  return (
    <div style={{
      position: 'absolute', left: SPACING.paddingX, right: SPACING.paddingX, bottom: 50,
      display: 'flex', alignItems: 'center', justifyContent: 'flex-end',
      fontFamily: '"Barlow Condensed",system-ui,sans-serif',
      textTransform: 'uppercase', letterSpacing: '0.18em',
      fontSize: 20, color: ink, opacity: 0.55, fontWeight: 600
    }}>
      <div style={{ fontVariantNumeric: 'tabular-nums' }}>{String(num).padStart(2, '0')} / {String(total).padStart(2, '0')}</div>
    </div>);

}

// ─── Primitive: Checker row divider ──────────────────────────────────────
function Checker({ height = 18, style, colors = [C.teal, C.coral, C.peach, C.powder] }) {
  const tile = 36;
  const bg = colors.map((c, i) => `linear-gradient(90deg, ${c} 50%, transparent 50%)`).join(',');
  const sizes = colors.map(() => `${tile * colors.length}px ${height}px`).join(',');
  const positions = colors.map((_, i) => `${i * tile}px 0`).join(',');
  return (
    <div style={{
      height,
      backgroundImage: bg,
      backgroundSize: sizes,
      backgroundPosition: positions,
      backgroundRepeat: 'repeat-x',
      ...style
    }} />);

}

// ─── Primitive: Star glyph (matches wordmark stars) ──────────────────────
function Star({ size = 28, color = C.coral, style }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" style={style} aria-hidden>
      <path d="M12 2 L13.6 9.4 L21 11 L13.6 12.6 L12 20 L10.4 12.6 L3 11 L10.4 9.4 Z"
      fill={color} />
    </svg>);

}

// ─── Slide 1: Cover ──────────────────────────────────────────────────────
function S01_Cover({ num, total }) {
  return (
    <Slide bg={C.tealDeep} ink={C.cream} pad={false} label="01 Cover" style={{ position: 'relative', overflow: 'hidden' }}>
      {/* Checker accent strip */}
      <Checker height={22} style={{ position: 'absolute', top: 0, left: 0, right: 0 }} />

      {/* Soft cream half */}
      <div style={{
        position: 'absolute', right: 0, top: 0, bottom: 0, width: '38%',
        background: C.cream
      }} />
      {/* Logo badge */}
      <img src="assets/logo-badge.png" alt=""
      style={{ position: 'absolute', right: 130, top: 130, width: 220, opacity: 0.95 }} />

      <div style={{
        position: 'absolute', left: 130, top: 0, bottom: 0,
        display: 'flex', flexDirection: 'column', justifyContent: 'center',
        width: '58%'
      }}>
        <div style={{
          fontFamily: '"Barlow Condensed",system-ui,sans-serif',
          textTransform: 'uppercase', letterSpacing: '0.22em',
          fontSize: 26, color: C.coralSoft, fontWeight: 600, marginBottom: 36,
          display: 'flex', alignItems: 'center', gap: 18
        }}>
          <Star size={22} color={C.peach} />
          AI Ready RVA · June 11, 2026
        </div>

        <div style={{
          fontSize: 132, fontWeight: 800, lineHeight: 0.98,
          letterSpacing: '-0.025em', color: C.cream, textWrap: 'balance'
        }}>
          AI in the<br />
          <span style={{ color: C.peach }}>Finance Seat.</span>
        </div>

        <div style={{
          marginTop: 50, fontSize: 44, lineHeight: 1.25,
          color: 'rgba(243,236,223,0.78)', maxWidth: 1100, textWrap: 'pretty'
        }}>
          A practitioner's field report on 6 months of building<br />
          production automation with AI at Gelati Celesti Ice Cream.
        </div>

        <div style={{
          marginTop: 80,
          display: 'flex', alignItems: 'center', gap: 24,
          fontFamily: '"Barlow Condensed",system-ui,sans-serif',
          textTransform: 'uppercase', letterSpacing: '0.18em',
          fontSize: 24, color: C.aqua, fontWeight: 600
        }}>
          <span>CHRIS CLARK</span>
          <span style={{ opacity: 0.4 }}>·</span>
          <span>Director of Finance, Gelati Celesti</span>
        </div>
      </div>

      <Checker height={22} style={{ position: 'absolute', bottom: 0, left: 0, right: 0 }} />
    </Slide>);

}

// ─── Slide 2: Subtitle slate ─────────────────────────────────────────────
function S02_Subtitle({ num, total }) {
  return (
    <Slide bg={C.cream} label="02 Subtitle">
      <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: TYPE_SCALE.eyebrow, color: C.coral, fontWeight: 600, marginBottom: 40
        }}>
          What you're going to hear
        </div>
        <div style={{
          fontSize: 96, fontWeight: 700, lineHeight: 1.05,
          letterSpacing: '-0.02em', color: C.tealInk, maxWidth: 1500, textWrap: 'balance'
        }}>What we've built. What problem it solved. What broke. The lesson.  


        </div>
        <div style={{
          marginTop: 60, fontSize: TYPE_SCALE.lead, color: 'rgba(16,50,63,0.62)',
          fontStyle: 'italic'
        }}>

        </div>
      </div>
      <Chrome num={num} total={total} />
    </Slide>);

}

// ─── Slide 3: The Speaker ────────────────────────────────────────────────
function S03_Speaker({ num, total }) {
  return (
    <Slide bg={C.cream} label="03 Speaker">
      <TitleBlock eyebrow="Who's talking" title="The speaker." />
      <div style={{
        marginTop: 80, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, flex: 1
      }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 36 }}>
          <FactRow label="Name" value="Chris Clark" />
          <FactRow label="Role" value="Director of Finance, Gelati Celesti" />
          <FactRow label="Team size" value="2 people" />
          <FactRow label="Background" value="Finance & Accounting, Education via JMU" />
          <FactRow label="" value={<>a.k.a. Mr. Quickbooks<br />a.k.a. that guy who does payroll</>} />
        </div>
        <div style={{
          background: C.teal, color: C.cream, borderRadius: 28, padding: 56,
          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: 600, marginBottom: 24
          }}>

          </div>
          <div style={{ fontSize: 40, lineHeight: 1.25, fontWeight: 500, textWrap: 'pretty' }}>
            I'm not a consultant. I'm not an engineer. I'm a finance leader
            who learned to build, on the job, with Claude.
          </div>
          <div style={{
            marginTop: 40, fontSize: 28, color: C.aqua, fontStyle: 'italic'
          }}>

          </div>
        </div>
      </div>
      <Chrome num={num} total={total} />
    </Slide>);

}

function FactRow({ label, value }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8, borderBottom: `1px solid ${C.creamDeep}`, paddingBottom: 24 }}>
      <div style={{
        fontFamily: '"Barlow Condensed",system-ui,sans-serif',
        textTransform: 'uppercase', letterSpacing: '0.18em',
        fontSize: 20, color: 'rgba(16,50,63,0.55)', fontWeight: 600
      }}>{label}</div>
      <div style={{ fontSize: 38, fontWeight: 600, color: C.tealInk }}>{value}</div>
    </div>);

}

// ─── Slide 4: Where I'm calling from ─────────────────────────────────────
function S04_Company({ num, total }) {
  return (
    <Slide bg={C.cream} pad={false} label="04 Company" style={{ position: 'relative' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', height: '100%' }}>
        <div style={{
          padding: `${SPACING.paddingTop}px 80px ${SPACING.paddingBottom}px ${SPACING.paddingX}px`,
          display: 'flex', flexDirection: 'column', justifyContent: 'center'
        }}>
          <TitleBlock
            eyebrow="The context"
            title={<>Where I'm <span style={{ color: C.coral }}>calling from.</span></>} />
          
          <div style={{
            marginTop: 70, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40
          }}>
            <BigStat n="11" label="Retail locations" />
            <BigStat n="2" label="Person finance team" />
            <BigStat n="1985" label="Family-owned since" />
          </div>
        </div>
        <div style={{
          background: C.peach, position: 'relative', overflow: 'hidden',
          backgroundImage: 'url(assets/cover-cone.png)',
          backgroundSize: 'contain',
          backgroundRepeat: 'no-repeat',
          backgroundPosition: 'center'
        }}>
        </div>
      </div>
      <Chrome num={num} total={total} />
    </Slide>);

}

function BigStat({ n, label }) {
  return (
    <div>
      <div style={{
        fontSize: 96, fontWeight: 800, color: C.teal, lineHeight: 1,
        letterSpacing: '-0.03em', fontVariantNumeric: 'tabular-nums'
      }}>{n}</div>
      <div style={{
        marginTop: 12, fontSize: 24, color: 'rgba(16,50,63,0.62)',
        textTransform: 'uppercase', letterSpacing: '0.14em', fontWeight: 600,
        fontFamily: '"Barlow Condensed",system-ui,sans-serif'
      }}>{label}</div>
    </div>);

}

// ─── Slide 5: The question — How? ────────────────────────────────────────
function S05_IsIsnt({ num, total }) {
  const covers = [
  { k: '01', t: 'Real screen recordings', s: 'The automations actually running' },
  { k: '02', t: 'Python + APIs', s: 'The plumbing under the hood' },
  { k: '03', t: 'Automated workflows', s: 'What I built and why' },
  { k: '04', t: 'What I learned', s: 'Where it broke, what stuck' },
  { k: '05', t: 'The system', s: 'How it all fits together' }];

  return (
    <Slide bg={C.cream} label="05 How">
      <TitleBlock title={<>All the AI talk is great.<br />No one's talking to <span style={{ color: C.coral }}>the finance seat.</span></>} />

      <div style={{
        marginTop: 40, fontSize: 34, fontWeight: 500, lineHeight: 1.4,
        color: 'rgba(16,50,63,0.72)', maxWidth: 1480, textWrap: 'pretty'
      }}>
        I've immersed myself in this — talks, interviews, articles. What I could never find: how a <em style={{ fontStyle: 'normal', color: C.tealInk, fontWeight: 700 }}>resource-constrained business</em> actually uses AI to build tools and solve problems. So this is the talk I wish someone would give me.
      </div>

      <div style={{
        marginTop: 'auto', paddingTop: 48,
        display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 22
      }}>
        {covers.map((c) =>
        <div key={c.k} style={{
          background: C.creamSoft, border: `1px solid ${C.creamDeep}`, borderRadius: 20, padding: '30px 26px',
          display: 'flex', flexDirection: 'column', gap: 14
        }}>
            <div style={{
              fontFamily: '"Barlow Condensed",system-ui,sans-serif',
              fontSize: 26, fontWeight: 700, color: C.coral, letterSpacing: '0.04em'
            }}>{c.k}</div>
            <div style={{ fontSize: 28, fontWeight: 700, color: C.tealInk, lineHeight: 1.2 }}>{c.t}</div>
            <div style={{ fontSize: 21, color: 'rgba(16,50,63,0.55)', lineHeight: 1.35, textWrap: 'pretty' }}>{c.s}</div>
          </div>
        )}
      </div>
      <Chrome num={num} total={total} />
    </Slide>);

}

function Panel({ title, items, accent, muted }) {
  return (
    <div style={{
      background: muted ? 'transparent' : C.creamSoft,
      border: muted ? `2px dashed ${C.creamDeep}` : 'none',
      borderRadius: 28, padding: 56,
      display: 'flex', flexDirection: 'column'
    }}>
      <div style={{
        fontFamily: '"Barlow Condensed",system-ui,sans-serif',
        textTransform: 'uppercase', letterSpacing: '0.18em',
        fontSize: 22, color: accent, fontWeight: 700, marginBottom: 36
      }}>{title}</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
        {items.map((t, i) =>
        <div key={i} style={{
          display: 'flex', gap: 20, alignItems: 'flex-start',
          fontSize: 36, fontWeight: 500, lineHeight: 1.3,
          color: muted ? 'rgba(16,50,63,0.55)' : C.tealInk,
          textDecoration: muted ? 'line-through' : 'none',
          textDecorationColor: muted ? 'rgba(232,96,76,0.5)' : 'transparent',
          textDecorationThickness: muted ? '2px' : 'auto'
        }}>
            <span style={{ color: accent, marginTop: 14 }}></span>
            <span>{t}</span>
          </div>
        )}
      </div>
    </div>);

}

// ─── Slide 6: The thesis ─────────────────────────────────────────────────
function S06_Thesis({ num, total }) {
  return (
    <Slide bg={C.teal} ink={C.cream} label="06 Thesis">
      <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: TYPE_SCALE.eyebrow, color: C.peach, fontWeight: 600, marginBottom: 50,
          display: 'flex', alignItems: 'center', gap: 18
        }}>
          <Star size={22} color={C.peach} />
          The thesis
        </div>
        <div style={{
          fontSize: 92, fontWeight: 600, lineHeight: 1.1,
          letterSpacing: '-0.02em', color: C.cream, maxWidth: 1600, textWrap: 'balance'
        }}>
          A finance leader with no formal coding background can build
          <span style={{ color: C.peach }}> production-grade infrastructure</span> —
          and the leverage changes what the finance function can be.
        </div>
        <div style={{
          marginTop: 60, fontSize: 36, color: 'rgba(243,236,223,0.6)', fontStyle: 'italic'
        }}>
          This isn't about replacing accountants. It's about expanding the surface area
          of problems finance can own.
        </div>
      </div>
      <Chrome num={num} total={total} ink={C.cream} />
    </Slide>);

}

// ─── Slide 7: 18 months in numbers ───────────────────────────────────────
function S07_Numbers({ num, total }) {
  return (
    <Slide bg={C.cream} label="07 Numbers">
      <TitleBlock eyebrow="Snapshot" title="18 months, in numbers." />
      <div style={{
        marginTop: 90, flex: 1,
        display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 40
      }}>
        <NumberCard n="6" label="Production automations running daily" bg={C.teal} fg={C.cream} accent={C.peach} />
        <NumberCard n="~22 hrs" label="Reclaimed each week, finance team" bg={C.coral} fg={C.cream} accent={C.cream} />
        <NumberCard n="0" label="Engineers on staff" bg={C.peach} fg={C.tealInk} accent={C.teal} />
        <NumberCard n="$0" label="Engineering hires made" bg={C.powder} fg={C.tealInk} accent={C.teal} />
        <NumberCard n="3" label="Production outages worth a lesson" bg={C.aqua} fg={C.tealInk} accent={C.teal} />
        <NumberCard n="1" label="Finance team that quietly became a software team" bg={C.cream} fg={C.tealInk} accent={C.coral} bordered />
      </div>
      <Chrome num={num} total={total} />
    </Slide>);

}

function NumberCard({ n, label, bg, fg, accent, bordered }) {
  return (
    <div style={{
      background: bg, color: fg, borderRadius: 28, padding: 44,
      border: bordered ? `2px solid ${accent}` : 'none',
      display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
      minHeight: 280
    }}>
      <div style={{
        fontSize: 110, fontWeight: 800, lineHeight: 1, letterSpacing: '-0.03em',
        fontVariantNumeric: 'tabular-nums', color: accent
      }}>{n}</div>
      <div style={{ fontSize: 28, fontWeight: 500, lineHeight: 1.3, textWrap: 'pretty' }}>{label}</div>
    </div>);

}

Object.assign(window, {
  C, TYPE_SCALE, SPACING,
  Slide, TitleBlock, Chrome, Checker, Star, FactRow, BigStat, Panel, NumberCard,
  S01_Cover, S02_Subtitle, S03_Speaker, S04_Company, S05_IsIsnt, S06_Thesis, S07_Numbers
});