// slides-4.jsx — New slides for the restructured talk:
//   • Agentic vs Deterministic (conceptual)
//   • Payroll workflow orchestration agent (live HTML demo frame)
//   • The ERP we're building
// Relies on globals from slides.jsx / slides-2.jsx: C, TYPE_SCALE, SPACING,
// Slide, TitleBlock, Chrome, Checker, Star, MockFrame.

// ─── Agentic vs Deterministic ───────────────────────────────────────────
function S_Agentic({ num, total }) {
  const Col = ({ accent, badge, headline, bullets, where }) => (
    <div style={{
      background: C.white, borderRadius: 28, padding: 48,
      border: `2px solid ${accent}`,
      display: 'flex', flexDirection: 'column', gap: 22, minHeight: 0,
    }}>
      <div>
        <span style={{
          display: 'inline-block', padding: '9px 18px',
          background: accent, color: C.cream, borderRadius: 8, fontSize: 18,
          fontFamily: '"Barlow Condensed",system-ui,sans-serif', fontWeight: 700,
          letterSpacing: '0.08em', textTransform: 'uppercase', whiteSpace: 'nowrap',
        }}>{badge}</span>
      </div>
      <div style={{ fontSize: 32, fontWeight: 800, color: C.tealInk, letterSpacing: '-0.02em', lineHeight: 1.15 }}>{headline}</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        {bullets.map((b) => (
          <div key={b} style={{ display: 'flex', gap: 14, alignItems: 'flex-start', fontSize: 26, lineHeight: 1.35, color: C.tealInk }}>
            <span style={{ color: accent, marginTop: 6 }}>—</span><span>{b}</span>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 'auto', paddingTop: 20, borderTop: `1px solid ${C.creamDeep}` }}>
        <div style={{
          fontFamily: '"Barlow Condensed",system-ui,sans-serif', fontSize: 18, color: accent,
          fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: 10,
        }}>Where I use it</div>
        <div style={{ fontSize: 24, lineHeight: 1.35, color: 'rgba(16,50,63,0.72)' }}>{where}</div>
      </div>
    </div>
  );
  return (
    <Slide bg={C.cream} label="Agentic vs Deterministic">
      <TitleBlock eyebrow="How I think about it" title="Agentic, or deterministic?" />
      <div style={{ marginTop: 50, flex: 1, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40, minHeight: 0 }}>
        <Col
          accent={C.teal} badge="Deterministic"
          headline="Fixed steps. Same input, same output."
          bullets={[
            'Scripted, scheduled, predictable.',
            'I can read every branch in advance.',
            'Cheap, fast, and trivially auditable.',
          ]}
          where="Parsing a payroll PDF, pulling Toast on a schedule, formatting a report, posting a journal entry."
        />
        <Col
          accent={C.coral} badge="Agentic"
          headline="The model decides the steps."
          bullets={[
            'Absorbs ambiguity and exceptions.',
            'Judgment: classify, match, draft, explain.',
            'Needs guardrails and a human in the loop.',
          ]}
          where="Coding a messy vendor invoice, triaging an anomaly, drafting the collections note that fits the situation."
        />
      </div>
      <div style={{
        marginTop: 24, padding: '20px 32px', borderRadius: 18, background: C.teal, color: C.cream,
        fontSize: 28, textWrap: 'pretty', lineHeight: 1.35,
      }}>
        <span style={{ color: C.peach, fontWeight: 700 }}>My rule: </span>
        deterministic plumbing for everything I can, with a small agentic core only where real judgment is required.
      </div>
      <Chrome num={num} total={total} />
    </Slide>
  );
}

// ─── Payroll workflow orchestration agent (live HTML demo frame) ─────────
function S_PayrollAgent({ num, total }) {
  const steps = [
    { n: '1', t: 'Intake', d: 'Drop the payroll PDF onto the page.', tint: C.peach },
    { n: '2', t: 'Agent reads', d: 'Extracts employees, hours, cost centers; flags anything ambiguous.', tint: C.coral },
    { n: '3', t: 'Deterministic check', d: 'Totals reconcile, GL mapping applied, math validated.', tint: C.powder },
    { n: '4', t: 'Human review', d: 'I approve or correct on screen — the agent learns the correction.', tint: C.aqua },
    { n: '5', t: 'Post', d: 'One journal entry written to QuickBooks.', tint: C.butter },
  ];
  return (
    <Slide bg={C.cream} label="Payroll Agent">
      <TitleBlock eyebrow="Let's look at one" title="The payroll orchestration agent." />
      <div style={{ marginTop: 44, flex: 1, display: 'grid', gridTemplateColumns: '0.85fr 1.15fr', gap: 56, minHeight: 0 }}>
        {/* How it works */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16, minHeight: 0 }}>
          <div style={{
            fontFamily: '"Barlow Condensed",system-ui,sans-serif', fontSize: 22, color: C.coral,
            fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase',
          }}>How it works</div>
          {steps.map((s) => (
            <div key={s.n} style={{ display: 'flex', gap: 18, alignItems: 'flex-start' }}>
              <div style={{
                width: 46, height: 46, borderRadius: '50%', background: s.tint, flexShrink: 0,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 24, fontWeight: 800, color: C.tealInk,
              }}>{s.n}</div>
              <div>
                <div style={{ fontSize: 28, fontWeight: 700, color: C.tealInk, lineHeight: 1.2 }}>{s.t}</div>
                <div style={{ fontSize: 22, color: 'rgba(16,50,63,0.68)', lineHeight: 1.3 }}>{s.d}</div>
              </div>
            </div>
          ))}
        </div>
        {/* Browser window placeholder for the live HTML */}
        <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: 52, background: C.creamSoft, borderBottom: `1px solid ${C.creamDeep}`,
            display: 'flex', alignItems: 'center', gap: 8, padding: '0 18px',
          }}>
            <span style={{ width: 13, height: 13, borderRadius: '50%', background: '#E76A5C' }} />
            <span style={{ width: 13, height: 13, borderRadius: '50%', background: C.peach }} />
            <span style={{ width: 13, height: 13, borderRadius: '50%', background: '#7BC68F' }} />
            <div style={{
              marginLeft: 16, flex: 1, height: 30, borderRadius: 8, background: C.white,
              border: `1px solid ${C.creamDeep}`, display: 'flex', alignItems: 'center', padding: '0 14px',
              fontFamily: 'ui-monospace,monospace', fontSize: 16, color: 'rgba(16,50,63,0.6)',
            }}>payroll-agent.html</div>
          </div>
          <div style={{
            flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
            gap: 20, padding: 32, textAlign: 'center',
            background: `repeating-linear-gradient(45deg, ${C.creamSoft} 0 16px, ${C.cream} 16px 32px)`,
          }}>
            <div style={{
              border: `3px dashed ${C.coral}`, borderRadius: 18, padding: '40px 48px',
              background: 'rgba(243,236,223,0.9)', maxWidth: 520,
            }}>
              <div style={{
                fontFamily: '"Barlow Condensed",system-ui,sans-serif', fontSize: 22, color: C.coral,
                fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: 14,
              }}>Live demo</div>
              <div style={{ fontSize: 30, fontWeight: 700, color: C.tealInk, lineHeight: 1.3, marginBottom: 12 }}>
                Switch to the real <code style={{ fontFamily: 'ui-monospace,monospace', color: C.coral }}>payroll-agent.html</code> here.
              </div>
              <div style={{ fontSize: 22, color: 'rgba(16,50,63,0.6)', lineHeight: 1.4 }}>
                [ Placeholder — drop in a screenshot or embed the live page before the talk. ]
              </div>
            </div>
          </div>
        </div>
      </div>
      <Chrome num={num} total={total} />
    </Slide>
  );
}

// ─── The ERP we're building ─────────────────────────────────────────────
function S_ERP({ num, total }) {
  const sources = ['Toast POS', 'QuickBooks', 'Bill.com', 'SharePoint'];
  const core = [
    { name: 'Supabase', role: 'Database' },
    { name: 'GitHub', role: 'Houses the code' },
    { name: 'Vercel', role: 'Build & deploy' },
  ];
  return (
    <Slide bg={C.tealDeep} ink={C.cream} label="ERP">
      <div style={{ maxWidth: 1560 }}>
        <h1 style={{
          fontSize: 70, fontWeight: 800, letterSpacing: '-0.02em',
          lineHeight: 1.05, margin: 0, color: C.cream, textWrap: 'balance',
        }}>We're building our own <span style={{ color: C.peach }}>ERP</span>.</h1>
        <p style={{
          fontSize: TYPE_SCALE.lead, lineHeight: 1.3, margin: '24px 0 0', maxWidth: 1560,
          color: 'rgba(243,236,223,0.72)', textWrap: 'pretty',
        }}>
          With APIs, data flows straight from our SaaS partners into our database — a big
          undertaking, and we're learning a lot as we go.
        </p>
      </div>

      {/* Architecture pipeline: Sources → Core → Interface */}
      <div style={{ marginTop: 64, flex: 1, display: 'flex', alignItems: 'stretch', gap: 18 }}>
        {/* Sources */}
        <div style={{
          flex: 1, background: 'rgba(243,236,223,0.06)', border: '1px solid rgba(243,236,223,0.2)',
          borderTop: `5px solid ${C.peach}`, borderRadius: 20, padding: 30,
          display: 'flex', flexDirection: 'column', gap: 16,
        }}>
          <div style={{
            fontFamily: '"Barlow Condensed",system-ui,sans-serif', fontSize: 22, color: C.peach,
            fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase',
          }}>Sources · via API</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {sources.map((s) => (
              <div key={s} style={{ fontSize: 28, fontWeight: 600, color: C.cream, lineHeight: 1.2 }}>{s}</div>
            ))}
          </div>
        </div>

        <div style={{ alignSelf: 'center', color: C.peach, fontSize: 34, fontWeight: 700, flexShrink: 0 }}>→</div>

        {/* Core tech stack */}
        <div style={{
          flex: 1.25, background: 'rgba(246,178,78,0.08)', border: `1px solid ${C.coral}`,
          borderTop: `5px solid ${C.coral}`, borderRadius: 20, padding: 30,
          display: 'flex', flexDirection: 'column', gap: 16,
        }}>
          <div style={{
            fontFamily: '"Barlow Condensed",system-ui,sans-serif', fontSize: 22, color: C.coralSoft,
            fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase',
          }}>Core stack</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            {core.map((c) => (
              <div key={c.name}>
                <div style={{ fontSize: 30, fontWeight: 700, color: C.cream, lineHeight: 1.15 }}>{c.name}</div>
                <div style={{ fontSize: 21, color: 'rgba(243,236,223,0.62)', lineHeight: 1.2 }}>{c.role}</div>
              </div>
            ))}
          </div>
        </div>

        <div style={{ alignSelf: 'center', color: C.peach, fontSize: 34, fontWeight: 700, flexShrink: 0 }}>→</div>

        {/* Interface */}
        <div style={{
          flex: 1, background: 'rgba(243,236,223,0.06)', border: `1px solid ${C.aqua}`,
          borderTop: `5px solid ${C.aqua}`, borderRadius: 20, padding: 30,
          display: 'flex', flexDirection: 'column', gap: 16,
        }}>
          <div style={{
            fontFamily: '"Barlow Condensed",system-ui,sans-serif', fontSize: 22, color: C.aqua,
            fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase',
          }}>Interface</div>
          <div style={{ fontSize: 30, fontWeight: 700, color: C.cream, lineHeight: 1.2 }}>The web app</div>
          <div style={{ fontSize: 23, color: 'rgba(243,236,223,0.7)', lineHeight: 1.35, textWrap: 'pretty' }}>
            What we're building for users to actually interact with the data.
          </div>
        </div>
      </div>

      <Chrome num={num} total={total} ink={C.cream} />
    </Slide>
  );
}

Object.assign(window, { S_Agentic, S_PayrollAgent, S_ERP });