// 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.cream} label="ERP">
      <div style={{ maxWidth: 1560 }}>
        <h1 style={{
          fontSize: 70, fontWeight: 800, letterSpacing: '-0.02em',
          lineHeight: 1.05, margin: 0, color: C.tealInk, textWrap: 'balance'
        }}>We're building our own <span style={{ color: C.coral }}>ERP</span>.</h1>
        <p style={{
          fontSize: TYPE_SCALE.lead, lineHeight: 1.3, margin: '24px 0 0', maxWidth: 1560,
          color: 'rgba(16,50,63,0.7)', 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: 40, flex: 1, display: 'flex', alignItems: 'center', gap: 24 }}>
        {/* Sources */}
        <div style={{
          flex: 1, background: C.creamSoft, border: `1px solid ${C.creamDeep}`,
          borderTop: `5px solid ${C.peach}`, borderRadius: 20, padding: '40px 30px',
          height: 480, display: 'flex', flexDirection: 'column', gap: 16,
          alignItems: 'center', textAlign: 'center'
        }}>
          <div style={{
            fontFamily: '"Barlow Condensed",system-ui,sans-serif', fontSize: 24, color: C.butter,
            fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase'
          }}>Sources · via API</div>
          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 22 }}>
            {sources.map((s) =>
            <div key={s} style={{ fontSize: 32, fontWeight: 600, color: C.tealInk, lineHeight: 1.2 }}>{s}</div>
            )}
          </div>
        </div>

        <div style={{ color: C.coral, fontSize: 38, fontWeight: 700, flexShrink: 0 }}>→</div>

        {/* Core tech stack */}
        <div style={{
          flex: 1.15, background: 'rgba(232,96,76,0.06)', border: `1px solid ${C.coral}`,
          borderTop: `5px solid ${C.coral}`, borderRadius: 20, padding: '40px 30px',
          height: 480, display: 'flex', flexDirection: 'column', gap: 16,
          alignItems: 'center', textAlign: 'center'
        }}>
          <div style={{
            fontFamily: '"Barlow Condensed",system-ui,sans-serif', fontSize: 24, color: C.coral,
            fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase'
          }}>Core stack</div>
          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 30 }}>
            {core.map((c) =>
            <div key={c.name}>
                <div style={{ fontSize: 34, fontWeight: 700, color: C.tealInk, lineHeight: 1.15 }}>{c.name}</div>
                <div style={{ fontSize: 23, color: 'rgba(16,50,63,0.6)', lineHeight: 1.2, marginTop: 4 }}>{c.role}</div>
              </div>
            )}
          </div>
        </div>

        <div style={{ color: C.coral, fontSize: 38, fontWeight: 700, flexShrink: 0 }}>→</div>

        {/* Interface */}
        <div style={{
          flex: 1, background: C.creamSoft, border: `1px solid ${C.teal}`,
          borderTop: `5px solid ${C.teal}`, borderRadius: 20, padding: '40px 30px',
          height: 480, display: 'flex', flexDirection: 'column', gap: 16,
          alignItems: 'center', textAlign: 'center'
        }}>
          <div style={{
            fontFamily: '"Barlow Condensed",system-ui,sans-serif', fontSize: 24, color: C.teal,
            fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase'
          }}>Interface</div>
          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 16, maxWidth: 420 }}>
            <div style={{ fontSize: 34, fontWeight: 700, color: C.tealInk, lineHeight: 1.2 }}>The web app</div>
            <div style={{ fontSize: 25, color: 'rgba(16,50,63,0.65)', lineHeight: 1.35, textWrap: 'pretty' }}>
              What we're building for users to actually interact with the data.
            </div>
          </div>
        </div>
      </div>

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

}

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