// slides-2.jsx — Section dividers + the six automations + time reclaimed

// ─── Reusable: Section divider ───────────────────────────────────────────
function SectionDivider({ num, total, partRoman, partLabel, title, kicker, bg, fg, accent, label }) {
  return (
    <Slide bg={bg || C.tealDeep} ink={fg || C.cream} label={label}>
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
        <div style={{
          fontFamily: '"Barlow Condensed",system-ui,sans-serif',
          textTransform: 'uppercase', letterSpacing: '0.28em',
          fontSize: 32, color: accent || C.peach, fontWeight: 600, marginBottom: 50,
          display: 'flex', alignItems: 'center', gap: 28
        }}>
          <span style={{
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            width: 84, height: 84, borderRadius: '50%',
            border: `2px solid ${accent || C.peach}`,
            fontSize: 36, fontWeight: 700, letterSpacing: '0.04em'
          }}>{partRoman}</span>
          {partLabel}
        </div>
        <div style={{
          fontSize: TYPE_SCALE.sectionTitle, fontWeight: 800, lineHeight: 1, letterSpacing: '-0.03em',
          color: fg || C.cream, textWrap: 'balance', maxWidth: 1500
        }}>
          {title}
        </div>
        {kicker &&
        <div style={{
          marginTop: 50, fontSize: 40, lineHeight: 1.3,
          color: fg ? 'rgba(243,236,223,0.65)' : 'rgba(243,236,223,0.7)',
          maxWidth: 1300, textWrap: 'pretty'
        }}>
            {kicker}
          </div>
        }
      </div>
      <Checker height={18} style={{ position: 'absolute', bottom: 0, left: 0, right: 0 }} />
      <Chrome num={num} total={total} ink={fg || C.cream} />
    </Slide>);

}

// ─── Slide 8: Section I divider ─────────────────────────────────────────
function S08_SectionI({ num, total }) {
  return (
    <SectionDivider
      num={num} total={total}
      partRoman="I" partLabel="Part one"
      title={<>Six automations,<br />running in production.</>}
      kicker="Each one solves a recurring pain. I'll show before and after, what broke, and what the build actually cost in time."
      label="08 Section I" />);


}

// ─── Slide 9: The slate (all six at once) ───────────────────────────────
const AUTOMATIONS = [
{ n: '01', name: 'Payroll PDF Parser', from: '90 min', to: '2 min', tag: 'Bi-weekly', tint: C.peach },
{ n: '02', name: '9:30 AM Daily Sales Report', from: '45 min', to: 'Auto', tag: 'Every morning', tint: C.coralSoft },
{ n: '03', name: 'Toast + QBO Cash Flow Forecast', from: '4 hrs', to: '15 min', tag: 'Weekly', tint: C.aqua },
{ n: '04', name: 'Landlord Sales Reports', from: '3 hrs', to: 'Auto', tag: 'Monthly · 11 stores', tint: C.powder },
{ n: '05', name: 'Power Automate Email Distribution', from: 'Manual', to: 'Auto', tag: 'Per-recipient routing', tint: C.butter },
{ n: '06', name: 'Past-Due Collections PDFs', from: '60 min', to: '4 min', tag: 'On-demand · brand-styled', tint: C.pink }];


function S09_Slate({ num, total }) {
  return (
    <Slide bg={C.cream} label="09 Slate">
      <TitleBlock eyebrow="The slate" title="Six things, every week, on autopilot." />
      <div style={{
        marginTop: 60, flex: 1,
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, gridAutoRows: '1fr'
      }}>
        {AUTOMATIONS.map((a) =>
        <div key={a.n} style={{
          background: C.white, borderRadius: 22, padding: '28px 36px',
          display: 'grid', gridTemplateColumns: '92px 1fr 220px', alignItems: 'center', gap: 24,
          boxShadow: '0 1px 2px rgba(16,50,63,0.04), 0 6px 18px rgba(16,50,63,0.04)'
        }}>
            <div style={{
            width: 76, height: 76, borderRadius: 18, background: a.tint,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontFamily: '"Barlow Condensed",system-ui,sans-serif', fontWeight: 700,
            fontSize: 36, color: C.tealInk, letterSpacing: '0.02em'
          }}>{a.n}</div>
            <div style={{ minWidth: 0 }}>
              <div style={{ fontSize: 28, fontWeight: 700, color: C.tealInk, lineHeight: 1.15 }}>{a.name}</div>
              <div style={{
              marginTop: 6, fontSize: 18, color: 'rgba(16,50,63,0.55)',
              fontFamily: '"Barlow Condensed",system-ui,sans-serif',
              textTransform: 'uppercase', letterSpacing: '0.16em', fontWeight: 600
            }}>{a.tag}</div>
            </div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, fontVariantNumeric: 'tabular-nums', whiteSpace: 'nowrap', justifyContent: 'flex-end' }}>
              <span style={{ fontSize: 22, color: 'rgba(16,50,63,0.45)', textDecoration: 'line-through' }}>{a.from}</span>
              <span style={{ color: C.coral, fontSize: 22 }}>→</span>
              <span style={{ fontSize: 32, fontWeight: 800, color: C.teal }}>{a.to}</span>
            </div>
          </div>
        )}
      </div>
      <Chrome num={num} total={total} />
    </Slide>);

}

// ─── Reusable: Automation deep-dive slide ───────────────────────────────
function AutomationSlide({ num, total, n, title, painLabel, painText, fixLabel, fixText, before, after, frequency, stack, metrics, metricsNote, mockup, accent = C.coral, label }) {
  return (
    <Slide bg={C.cream} label={label}>
      <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: 40, flex: 1,
        display: 'grid', gridTemplateColumns: mockup ? '1fr 0.9fr' : '1fr', gap: 60, minHeight: 0
      }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 22, minHeight: 0 }}>
          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 30 }}>
            <PainFix label={painLabel || 'The pain'} text={painText} accent={C.coral} icon="—" />
            <PainFix label={fixLabel || 'What I built'} text={fixText} accent={C.teal} icon="+" />
          </div>
          {metrics &&
          <div style={{
            paddingTop: 26, borderTop: `1px solid ${C.creamDeep}`,
            display: 'flex', alignItems: 'flex-end', gap: 52, flexWrap: 'wrap'
          }}>
            {metrics.map((m) =>
            <div key={m.label}>
              <div style={{
                fontFamily: '"Barlow Condensed",system-ui,sans-serif',
                textTransform: 'uppercase', letterSpacing: '0.14em',
                fontSize: 18, color: 'rgba(16,50,63,0.55)', fontWeight: 700, marginBottom: 8, whiteSpace: 'nowrap'
              }}>{m.label}</div>
              <div style={{
                fontSize: 42, fontWeight: 800, lineHeight: 1, letterSpacing: '-0.02em',
                color: m.hi ? C.coral : C.teal, fontVariantNumeric: 'tabular-nums', whiteSpace: 'nowrap'
              }}>{m.value}</div>
            </div>
            )}
            {metricsNote &&
            <div style={{
              fontSize: 22, color: 'rgba(16,50,63,0.5)', fontStyle: 'italic',
              lineHeight: 1.3, paddingBottom: 4
            }}>{metricsNote}</div>}
          </div>}
        </div>
        {mockup}
      </div>
      <Chrome num={num} total={total} />
    </Slide>);

}

function PainFix({ label, text, accent, icon }) {
  return (
    <div>
      <div style={{
        fontFamily: '"Barlow Condensed",system-ui,sans-serif',
        textTransform: 'uppercase', letterSpacing: '0.14em',
        fontSize: 22, color: accent, fontWeight: 700, marginBottom: 16,
        display: 'flex', alignItems: 'center', gap: 12
      }}>
        <span style={{
          width: 30, height: 30, borderRadius: 8, background: accent,
          color: C.cream, display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 20, fontWeight: 800
        }}>{icon}</span>
        {label}
      </div>
      <div style={{ fontSize: 28, fontWeight: 500, lineHeight: 1.3, color: C.tealInk, textWrap: 'pretty' }}>
        {text}
      </div>
    </div>);

}

function BeforeAfter({ before, after, accent }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 28 }}>
      <div>
        <div style={{
          fontFamily: '"Barlow Condensed",system-ui,sans-serif',
          textTransform: 'uppercase', letterSpacing: '0.16em',
          fontSize: 18, color: 'rgba(16,50,63,0.5)', fontWeight: 600, marginBottom: 6
        }}></div>
        <div style={{ fontSize: 36, fontWeight: 800, color: 'rgba(16,50,63,0.55)', textDecoration: 'line-through', fontVariantNumeric: 'tabular-nums', whiteSpace: 'nowrap' }}>{before}</div>
      </div>
      <div style={{ fontSize: 36, color: accent }}></div>
      <div>
        <div style={{
          fontFamily: '"Barlow Condensed",system-ui,sans-serif',
          textTransform: 'uppercase', letterSpacing: '0.16em',
          fontSize: 18, color: accent, fontWeight: 600, marginBottom: 6
        }}></div>
        <div style={{ fontSize: 48, fontWeight: 800, color: C.teal, fontVariantNumeric: 'tabular-nums', letterSpacing: '-0.02em', whiteSpace: 'nowrap' }}>{after}</div>
      </div>
    </div>);

}

// ─── Mockup primitives ───────────────────────────────────────────────────
function MockFrame({ children, title, kind = 'pdf' }) {
  return (
    <div style={{
      background: C.white, borderRadius: 22, overflow: 'hidden',
      boxShadow: '0 1px 2px rgba(16,50,63,0.05), 0 18px 40px rgba(16,50,63,0.08)',
      border: `1px solid ${C.creamDeep}`,
      display: 'flex', flexDirection: 'column', minHeight: 0
    }}>
      <div style={{
        height: 44, background: C.creamSoft, borderBottom: `1px solid ${C.creamDeep}`,
        display: 'flex', alignItems: 'center', gap: 8, padding: '0 16px'
      }}>
        <span style={{ width: 12, height: 12, borderRadius: '50%', background: '#E76A5C' }} />
        <span style={{ width: 12, height: 12, borderRadius: '50%', background: C.peach }} />
        <span style={{ width: 12, height: 12, borderRadius: '50%', background: '#7BC68F' }} />
        <span style={{
          marginLeft: 16, fontFamily: '"Barlow Condensed",system-ui,sans-serif',
          fontSize: 18, fontWeight: 600, color: 'rgba(16,50,63,0.55)',
          textTransform: 'uppercase', letterSpacing: '0.14em'
        }}>{title}</span>
      </div>
      <div style={{ flex: 1, padding: 28, minHeight: 0, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
        {children}
      </div>
    </div>);

}

// ─── Slide 10: Payroll PDF parser — the problem only (the fix unfolds
// over the next slides; metrics land after video 3 on S_Workflow2) ──────
function S10_Payroll({ num, total }) {
  const traits = [
  { t: 'Tedious', s: 'Same steps after every payroll: open the PDF, hunt the numbers, retype them into Excel.' },
  { t: 'Never urgent', s: 'Never bad enough to escalate — so it never got fixed.' },
  { t: 'Always annoying', s: 'Bi-weekly, forever. It bothered me every single time.' }];

  return (
    <Slide bg={C.cream} label="10 Payroll Parser">
      <TitleBlock eyebrow="Automation 01 · The problem" title="The Labor Report — Production." />

      <div style={{
        marginTop: 36, fontSize: 38, fontWeight: 500, lineHeight: 1.4,
        color: 'rgba(16,50,63,0.72)', maxWidth: 1500, textWrap: 'pretty'
      }}>
        A manual report I produce once payroll is complete. I just didn't want to do it anymore.
      </div>

      <div style={{
        marginTop: 56, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 26
      }}>
        {traits.map((b) =>
        <div key={b.t} style={{
          background: C.creamSoft, borderRadius: 24, padding: '32px 32px',
          borderTop: `4px solid ${C.coral}`,
          display: 'flex', flexDirection: 'column', gap: 14
        }}>
            <div style={{ fontSize: 34, fontWeight: 800, color: C.tealInk, lineHeight: 1.15, letterSpacing: '-0.01em' }}>{b.t}</div>
            <div style={{ fontSize: 25, color: 'rgba(16,50,63,0.62)', lineHeight: 1.4, textWrap: 'pretty' }}>{b.s}</div>
          </div>
        )}
      </div>

      <div style={{
        marginTop: 'auto', display: 'flex', alignItems: 'center', gap: 24,
        background: C.teal, color: C.cream, borderRadius: 22, padding: '28px 44px'
      }}>
        <div style={{ fontSize: 44, fontWeight: 800, lineHeight: 1, flexShrink: 0, color: C.peach }}>→</div>
        <div style={{ fontSize: 36, fontWeight: 800, letterSpacing: '-0.01em', lineHeight: 1.1, whiteSpace: 'nowrap' }}>
          Here's what it looked like.
        </div>
      </div>

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


}

// ─── Slide: Retail Labor Report (Automation 02) ────────────────────────
// Same payroll PDF as Automation 01, written to a retail workbook, then an
// API call pulls actual POS hours — the lead-in to the "What is an API" slide.
function S_RetailLabor({ num, total }) {
  const mockup =
  <MockFrame title="retail_labor.py">
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12, fontSize: 14, color: C.tealInk, lineHeight: 1.6 }}>
        <div style={{ fontFamily: 'ui-monospace,monospace', fontSize: 14, color: 'rgba(16,50,63,0.55)' }}>$ python retail_labor.py</div>
        <div style={{ fontFamily: 'ui-monospace,monospace', fontSize: 14, color: 'rgba(16,50,63,0.7)' }}>→ Reading payroll-2026-04-15.pdf (same file)</div>
        <div style={{ fontFamily: 'ui-monospace,monospace', fontSize: 14, color: 'rgba(16,50,63,0.7)' }}>→ Extracted retail labor · 8 store locations</div>
        <div style={{ fontFamily: 'ui-monospace,monospace', fontSize: 14, color: 'rgba(16,50,63,0.7)' }}>→ Wrote Retail Labor.xlsx</div>
        <div style={{ fontFamily: 'ui-monospace,monospace', fontSize: 14, color: C.coral, fontWeight: 700, background: 'rgba(232,96,76,0.12)', padding: '5px 8px', borderRadius: 6 }}>→ GET api.toasttab.com/labor/v2 · 200 OK   ← the API</div>
        <div style={{ fontFamily: 'ui-monospace,monospace', fontSize: 14, color: C.teal, fontWeight: 700 }}>✓ Merged POS hours · workbook ready</div>
        <div style={{ marginTop: 14, padding: 14, background: C.creamSoft, borderRadius: 12, fontSize: 14, fontFamily: 'ui-monospace,monospace' }}>
          <div style={{ color: 'rgba(16,50,63,0.55)' }}>// store, scheduled, actual, variance</div>
          <div>Carytown     412.0   438.5   +26.5</div>
          <div>Short Pump   388.5   371.0   −17.5</div>
          <div>Stony Point  305.0   309.0    +4.0</div>
          <div style={{ color: 'rgba(16,50,63,0.45)' }}>...5 more locations</div>
        </div>
      </div>
    </MockFrame>;

  return (
    <AutomationSlide
      num={num} total={total}
      n="02" frequency="Bi-weekly · same PDF"
      title="The Labor Report  - Retail"
      painLabel="The problem"
      fixLabel="The solution"
      painText="Same payroll PDF, but retail needs its own workbook. This report combines labor totals on a per location basis with sales from Toast (our point-of-sale system). The new problem: it introduced an API call to Toast."
      fixText="The same parser writes retail labor to Excel, then calls the Toast API for the real hours and flags the variance."
      metrics={[
        { label: 'Build time', value: '2 hrs' },
        { label: 'Time saved', value: '1 hr / mo' },
        { label: 'ROI', value: '~2 mo', hi: true },
      ]}
      metricsNote="…now that one paid off."
      label="Retail Labor Report" />);


}

// ─── Slide 12: Cash flow forecast ───────────────────────────────────────
function S12_Cashflow({ num, total }) {
  const mockup =
  <MockFrame title="cashflow-13week.xlsx">
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14, fontSize: 14 }}>
        <div style={{
        display: 'grid', gridTemplateColumns: '1.2fr repeat(6, 1fr)', gap: 8,
        fontFamily: '"Barlow Condensed",system-ui,sans-serif', fontSize: 13,
        textTransform: 'uppercase', letterSpacing: '0.14em', fontWeight: 700,
        color: 'rgba(16,50,63,0.55)', borderBottom: `1px solid ${C.creamDeep}`, paddingBottom: 8
      }}>
          <div>Week of</div>
          <div>4/27</div><div>5/4</div><div>5/11</div><div>5/18</div><div>5/25</div><div>6/1</div>
        </div>
        {[
      { l: 'Toast revenue (fcst)', v: ['168k', '172k', '181k', '205k', '218k', '203k'] },
      { l: 'Wholesale + cake', v: ['28k', '30k', '32k', '41k', '38k', '34k'] },
      { l: 'COGS', v: ['-58k', '-60k', '-63k', '-72k', '-77k', '-71k'] },
      { l: 'Payroll', v: ['-79k', '-79k', '-82k', '-82k', '-86k', '-86k'] },
      { l: 'Rent + opex', v: ['', '-44k', '', '', '-44k', ''] }].
      map((r) =>
      <div key={r.l} style={{
        display: 'grid', gridTemplateColumns: '1.2fr repeat(6, 1fr)', gap: 8,
        fontVariantNumeric: 'tabular-nums', fontSize: 13, color: C.tealInk
      }}>
            <div>{r.l}</div>
            {r.v.map((x, i) => <div key={i} style={{ color: x.startsWith('-') ? C.coral : 'inherit' }}>{x}</div>)}
          </div>
      )}
        <div style={{
        display: 'grid', gridTemplateColumns: '1.2fr repeat(6, 1fr)', gap: 8,
        fontVariantNumeric: 'tabular-nums', fontSize: 14, fontWeight: 800, color: C.teal,
        borderTop: `2px solid ${C.creamDeep}`, paddingTop: 8
      }}>
          <div>Net cash</div>
          <div>59k</div><div>19k</div><div>68k</div><div>92k</div><div>49k</div><div>80k</div>
        </div>
      </div>
    </MockFrame>;

  return (
    <AutomationSlide
      num={num} total={total}
      n="03" frequency="Weekly · 13-week rolling"
      title="13-week cash flow, from Toast and QBO."
      painText="A real cash forecast needs revenue from Toast and AP/payroll from QuickBooks, married up by week. That used to be a four-hour Excel ritual every Monday."
      fixText="A scheduled job pulls Toast revenue, QBO obligations, layers in seasonality, and writes a 13-week forecast straight to Power BI. Monday morning it's already there."
      before="4 hrs"
      after="15 min"
      stack={['Toast', 'QuickBooks', 'Python', 'Supabase', 'Power BI']}
      mockup={mockup}
      accent={C.teal}
      label="12 Cash Flow" />);


}

// ─── Slide 13: Landlord sales reports ──────────────────────────────────
function S13_Landlord({ num, total }) {
  const stores = ['Carytown', 'Short Pump', 'Stony Point', 'Innsbrook', 'Westhampton', 'Midlothian', 'VA Center', 'Hilltop', 'Greenbrier', 'Newmarket', 'Williamsburg'];
  const mockup =
  <MockFrame title="landlord-reports — Apr 2026">
      <div style={{ display: 'flex', flexDirection: 'column', gap: 6, fontSize: 13 }}>
        <div style={{
        fontFamily: '"Barlow Condensed",system-ui,sans-serif', fontSize: 14, fontWeight: 700,
        textTransform: 'uppercase', letterSpacing: '0.16em', color: 'rgba(16,50,63,0.55)',
        display: 'grid', gridTemplateColumns: '1.4fr 1fr 80px', gap: 10,
        paddingBottom: 8, borderBottom: `1px solid ${C.creamDeep}`
      }}>
          <div>Location</div><div>Status</div><div style={{ textAlign: 'right' }}>Try</div>
        </div>
        {stores.map((s, i) => {
        const status = i === 4 ? 'retried Mon 7:14am' : i === 9 ? 'retried Sat 11:02am' : 'sent Fri 6:00pm';
        const tries = i === 4 ? '2/3' : i === 9 ? '2/3' : '1/3';
        const ok = true;
        return (
          <div key={s} style={{
            display: 'grid', gridTemplateColumns: '1.4fr 1fr 80px', gap: 10,
            fontVariantNumeric: 'tabular-nums', fontSize: 13, padding: '4px 0',
            color: C.tealInk, alignItems: 'center'
          }}>
              <div>{s}</div>
              <div style={{ color: status.includes('retried') ? C.peach : '#2F8B5A', fontWeight: 600 }}>
                ✓ {status}
              </div>
              <div style={{ textAlign: 'right', color: 'rgba(16,50,63,0.55)' }}>{tries}</div>
            </div>);

      })}
      </div>
    </MockFrame>;

  return (
    <AutomationSlide
      num={num} total={total}
      n="04" frequency="Monthly · 11 stores · 11 deadlines"
      title="Landlord sales reports, with weekend retry."
      painText="Most percentage-rent leases require a sales report by the 5th. Eleven landlords. Eleven formats. Different deadlines. Forget once and you owe a $2,500 cure-period fee."
      fixText="A job builds each landlord's format, emails on Friday, and retries Saturday morning if a sender bounces. A status board shows me what landed and what didn't."
      before="3 hrs"
      after="Auto"
      stack={['Python', 'Toast', 'Power Automate', 'cron']}
      mockup={mockup}
      accent={C.powder}
      label="13 Landlord Reports" />);


}

// ─── Slide 14: Power Automate distribution ─────────────────────────────
function S14_PowerAuto({ num, total }) {
  const mockup =
  <MockFrame title="power-automate · daily-flash flow">
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12, fontSize: 14 }}>
        {[
      { c: '⬇', t: 'Trigger · file added to /reports', s: C.teal },
      { c: '⊙', t: 'Parse · extract recipient list from Excel', s: C.coral },
      { c: '⊕', t: 'Branch · route by role (ops / owner / store)', s: C.peach },
      { c: '✉', t: 'Send · per-recipient subject + body', s: C.butter },
      { c: '✓', t: 'Log · write status to staging table', s: '#2F8B5A' }].
      map((step, i) =>
      <div key={i} style={{
        display: 'flex', alignItems: 'center', gap: 16, padding: '14px 18px',
        background: C.creamSoft, borderRadius: 14,
        borderLeft: `4px solid ${step.s}`
      }}>
            <div style={{
          width: 36, height: 36, borderRadius: 10, background: step.s, color: C.cream,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 18, fontWeight: 700
        }}>{step.c}</div>
            <div style={{ fontSize: 16, fontWeight: 600, color: C.tealInk }}>{step.t}</div>
          </div>
      )}
      </div>
    </MockFrame>;

  return (
    <AutomationSlide
      num={num} total={total}
      n="05" frequency="Triggered · every distribution"
      title="Email distribution, one flow, many recipients."
      painText="Different reports go to different people, with different subject lines, on different cadences. Maintaining a dozen Outlook rules and forwarding chains is the kind of work that punishes attention."
      fixText="One Power Automate flow that watches a folder, parses recipient + role from the file, and sends per-recipient emails with the right tone. New recipients are a row, not a deploy."
      before="Manual"
      after="Auto"
      stack={['Power Automate', 'SharePoint', 'Outlook 365']}
      mockup={mockup}
      accent={C.butter}
      label="14 Power Automate" />);


}

// ─── Slide 15: Past-due collections PDF ────────────────────────────────
function S15_Collections({ num, total }) {
  const mockup =
  <div style={{
    background: C.cream, borderRadius: 22, padding: 32,
    boxShadow: '0 1px 2px rgba(16,50,63,0.05), 0 18px 40px rgba(16,50,63,0.08)',
    border: `1px solid ${C.creamDeep}`, display: 'flex', flexDirection: 'column', minHeight: 0
  }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 20 }}>
        <img src="assets/logo-primary.png" alt="" style={{ height: 36, opacity: 0.92 }} />
        <div style={{
        fontFamily: '"Barlow Condensed",system-ui,sans-serif',
        fontSize: 16, color: C.coral, fontWeight: 700,
        textTransform: 'uppercase', letterSpacing: '0.18em'
      }}>Past-due statement</div>
      </div>
      <div style={{ fontSize: 13, color: 'rgba(16,50,63,0.6)', lineHeight: 1.4 }}>Acme Catering Co.<br />Attn: Accounts Payable</div>
      <div style={{ height: 1, background: C.creamDeep, margin: '14px 0' }} />
      <div style={{ display: 'flex', flexDirection: 'column', gap: 6, fontSize: 12 }}>
        {[
      ['INV-4421', 'Mar 02', '$1,840.00', '57'],
      ['INV-4438', 'Mar 14', '$2,205.50', '45'],
      ['INV-4456', 'Mar 28', '$988.20', '31'],
      ['INV-4471', 'Apr 09', '$1,402.00', '19']].
      map((r, i) =>
      <div key={i} style={{
        display: 'grid', gridTemplateColumns: '1.2fr 1fr 1fr 80px', gap: 10,
        fontVariantNumeric: 'tabular-nums', fontSize: 12, color: C.tealInk,
        padding: '4px 0', borderBottom: i < 3 ? `1px dashed ${C.creamDeep}` : 'none'
      }}>
            <div>{r[0]}</div><div>{r[1]}</div><div>{r[2]}</div>
            <div style={{ textAlign: 'right', color: parseInt(r[3]) > 30 ? C.coral : 'rgba(16,50,63,0.6)', fontWeight: 600 }}>{r[3]} days</div>
          </div>
      )}
      </div>
      <div style={{ marginTop: 14, padding: 14, background: C.teal, color: C.cream, borderRadius: 10, display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
        <div style={{
        fontFamily: '"Barlow Condensed",system-ui,sans-serif', fontSize: 13,
        textTransform: 'uppercase', letterSpacing: '0.16em', fontWeight: 700
      }}>Total past due</div>
        <div style={{ fontSize: 22, fontWeight: 800, fontVariantNumeric: 'tabular-nums' }}>$6,435.70</div>
      </div>
      <div style={{ marginTop: 12, fontSize: 11, color: 'rgba(16,50,63,0.5)', fontStyle: 'italic' }}>
        Generated 2026-04-27 · gelaticelesti.com · 804.555.0143
      </div>
    </div>;

  return (
    <AutomationSlide
      num={num} total={total}
      n="06" frequency="On-demand · 1-click per customer"
      title="Past-due collections, brand-styled, in seconds."
      painText="Wholesale customers go past-due. The polite first-touch is a branded statement. Building those by hand was an hour with copy-paste. Most of the time, we just sent a less-effective email."
      fixText="One click generates a branded PDF for any customer pulled from QBO — letterhead, aging buckets, tone matched to days late. Sending five takes less time than sending one used to."
      before="60 min"
      after="4 min"
      stack={['QuickBooks', 'WeasyPrint', 'Python', 'Claude (copy)']}
      mockup={mockup}
      accent={C.pink}
      label="15 Collections PDF" />);


}

// ─── Slide 16: Time reclaimed ──────────────────────────────────────────
function S16_TimeReclaimed({ num, total }) {
  return (
    <Slide bg={C.coral} ink={C.cream} label="16 Time Reclaimed">
      <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: 28, color: C.cream, opacity: 0.85, fontWeight: 600, marginBottom: 36
        }}>The aggregate</div>
        <div style={{
          display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 80, alignItems: 'center'
        }}>
          <div>
            <div style={{
              fontSize: 280, fontWeight: 800, color: C.cream, lineHeight: 0.92,
              letterSpacing: '-0.04em', fontVariantNumeric: 'tabular-nums'
            }}>~22</div>
            <div style={{
              fontSize: 56, fontWeight: 700, color: C.cream, marginTop: 8
            }}>hours, every week.</div>
            <div style={{
              marginTop: 30, fontSize: 32, color: 'rgba(243,236,223,0.78)',
              maxWidth: 760, textWrap: 'pretty', lineHeight: 1.35
            }}>
              Reclaimed from a two-person finance team. That is the whole job
              of an entry-level analyst, repurposed for work that compounds.
            </div>
          </div>
          <div style={{
            background: 'rgba(20,57,70,0.35)', borderRadius: 28, padding: 48,
            border: '1px solid rgba(243,236,223,0.25)'
          }}>
            <div style={{
              fontFamily: '"Barlow Condensed",system-ui,sans-serif',
              fontSize: 22, color: C.peach, fontWeight: 700,
              textTransform: 'uppercase', letterSpacing: '0.18em', marginBottom: 24
            }}>What that buys</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 22, fontSize: 30, lineHeight: 1.3, color: C.cream }}>
              <div>— A real 13-week forecast, every Monday.</div>
              <div>— Margin analysis by store and flavor.</div>
              <div>— A finance team that says yes more often.</div>
            </div>
          </div>
        </div>
      </div>
      <Chrome num={num} total={total} ink={C.cream} />
    </Slide>);

}

Object.assign(window, {
  SectionDivider, AutomationSlide, PainFix, BeforeAfter, MockFrame,
  S08_SectionI, S09_Slate, S10_Payroll, S_RetailLabor, S12_Cashflow,
  S13_Landlord, S14_PowerAuto, S15_Collections, S16_TimeReclaimed
});