// slides-paths.jsx — the fork after "hands": the two parallel builds.
// Path 1 = the orchestration agent (manager). Path 2 = the ERP (house).
// Globals used: C, Slide, TitleBlock, Chrome.

// ─── Transition: two paths ───────────────────────────────────────────────
function S_TwoPaths({ num, total }) {
  const Label = ({ children, color }) => (
    <div style={{
      fontFamily: '"Barlow Condensed",system-ui,sans-serif',
      textTransform: 'uppercase', letterSpacing: '0.18em', fontSize: 24, fontWeight: 700, color,
    }}>{children}</div>
  );
  return (
    <Slide bg={C.cream} label="Two paths">
      <TitleBlock title={<>From here, <span style={{ color: C.coral }}>two paths.</span></>} />

      <div style={{
        marginTop: 28, fontSize: 34, fontWeight: 500, lineHeight: 1.4,
        color: 'rgba(16,50,63,0.72)', maxWidth: 1520, textWrap: 'pretty',
      }}>
        The thread so far has been one line — tool, worker, hands. From here I'm building two things at once, trying to figure out how a real agent should reason through all of it.
      </div>

      <div style={{ flex: 1, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 36, alignContent: 'center' }}>
        <div style={{
          background: C.teal, color: C.cream, borderRadius: 26, padding: '48px 52px',
          display: 'flex', flexDirection: 'column', gap: 18,
        }}>
          <Label color={C.peach}>Path 1 · The manager</Label>
          <div style={{ fontSize: 50, fontWeight: 800, lineHeight: 1.05, letterSpacing: '-0.02em' }}>The orchestration agent.</div>
          <div style={{ fontSize: 28, lineHeight: 1.4, color: 'rgba(243,236,223,0.85)', textWrap: 'pretty' }}>
            One command chains all four payroll workflows together — in parallel, with me gating every irreversible step.
          </div>
        </div>
        <div style={{
          background: C.coral, color: C.cream, borderRadius: 26, padding: '48px 52px',
          display: 'flex', flexDirection: 'column', gap: 18,
        }}>
          <Label color={'rgba(243,236,223,0.85)'}>Path 2 · The house</Label>
          <div style={{ fontSize: 50, fontWeight: 800, lineHeight: 1.05, letterSpacing: '-0.02em' }}>The ERP.</div>
          <div style={{ fontSize: 28, lineHeight: 1.4, color: 'rgba(243,236,223,0.92)', textWrap: 'pretty' }}>
            The system everything lives in — where my team can run the workflows without me in the terminal.
          </div>
        </div>
      </div>

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

// ─── The chaining map: one command, four workflows in parallel ───────────
function S_ChainMap({ num, total }) {
  const wfs = [
    { n: '1', name: 'Production Labor', desc: 'Parse the iSolved PDF into the labor workbook.', tag: 'Parallel', gate: false },
    { n: '2', name: 'Labor → Sales', desc: 'Join Toast sales with labor across 11 stores.', tag: 'Parallel · API', gate: false },
    { n: '4', name: 'Tip Credit', desc: 'Toast tips checked against the $12.77 threshold.', tag: 'Parallel · API', gate: false },
    { n: '3', name: 'Payroll JE → QBO', desc: 'GL becomes a 163-line journal entry.', tag: 'Approval gate', gate: true },
  ];
  const Wf = ({ n, name, desc, tag, gate }) => (
    <div style={{
      background: C.creamSoft, border: `1px solid ${C.creamDeep}`, borderRadius: 18,
      padding: '24px 24px', display: 'flex', flexDirection: 'column', gap: 12,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <span style={{
          width: 40, height: 40, borderRadius: 10, background: gate ? C.coral : C.tealInk, color: C.cream,
          display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
          fontSize: 22, fontWeight: 800, fontFamily: '"Barlow Condensed",system-ui,sans-serif',
        }}>{n}</span>
        <div style={{ fontSize: 25, fontWeight: 800, color: C.tealInk, lineHeight: 1.1, letterSpacing: '-0.01em' }}>{name}</div>
      </div>
      <div style={{ fontSize: 24, color: 'rgba(16,50,63,0.62)', lineHeight: 1.35, textWrap: 'pretty' }}>{desc}</div>
      <div style={{
        marginTop: 'auto', alignSelf: 'flex-start',
        fontFamily: '"Barlow Condensed",system-ui,sans-serif', textTransform: 'uppercase',
        letterSpacing: '0.1em', fontSize: 18, fontWeight: 700,
        color: gate ? C.coral : C.teal,
        background: gate ? 'rgba(232,96,76,0.13)' : 'rgba(28,71,84,0.10)',
        borderRadius: 999, padding: '6px 14px', whiteSpace: 'nowrap',
      }}>{tag}</div>
    </div>
  );
  return (
    <Slide bg={C.cream} label="Chaining workflows">
      <TitleBlock title="One command runs all four." />

      <div style={{
        marginTop: 24, fontSize: 34, fontWeight: 500, lineHeight: 1.4,
        color: 'rgba(16,50,63,0.72)', maxWidth: 1520, textWrap: 'pretty',
      }}>
        “Run payroll process.” The agent fires the workflows in parallel, gates the irreversible steps, then reasons across every output to catch anomalies.
      </div>

      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 22 }}>
        <div style={{
          background: C.tealInk, color: C.cream, borderRadius: 18, padding: '22px 32px',
          display: 'flex', flexDirection: 'column', gap: 8,
        }}>
          <span style={{
            fontFamily: '"Barlow Condensed",system-ui,sans-serif', textTransform: 'uppercase',
            letterSpacing: '0.16em', fontSize: 20, fontWeight: 700, color: C.peach,
          }}>Orchestration Agent</span>
          <span style={{ fontFamily: 'ui-monospace,"SF Mono",Menlo,monospace', fontSize: 28, color: C.cream }}>“run payroll process”</span>
        </div>

        <div style={{
          fontFamily: '"Barlow Condensed",system-ui,sans-serif', textTransform: 'uppercase',
          letterSpacing: '0.16em', fontSize: 20, fontWeight: 700, color: 'rgba(16,50,63,0.5)', textAlign: 'center',
        }}>Dispatches in parallel ↓</div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }}>
          {wfs.map((w) => <Wf key={w.n} {...w} />)}
        </div>

        <div style={{
          background: C.aqua, border: `1px solid ${C.creamDeep}`, borderRadius: 18,
          padding: '24px 30px', display: 'flex', alignItems: 'center', gap: 20,
        }}>
          <div style={{ fontSize: 38, lineHeight: 1, flexShrink: 0, color: C.teal }}>↻</div>
          <div style={{ fontSize: 26, lineHeight: 1.4, color: C.tealInk, textWrap: 'pretty' }}>
            <strong style={{ color: C.teal }}>Then a retrospective.</strong> It reads all four outputs together — missing employees, odd labor ratios, a journal entry that doesn't tie — and flags them before anything's final.
          </div>
        </div>
      </div>

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

// ─── The honest part: the two paths haven't met yet ──────────────────────
function S_PathsHonest({ num, total }) {
  const Label = ({ children, color }) => (
    <div style={{
      fontFamily: '"Barlow Condensed",system-ui,sans-serif',
      textTransform: 'uppercase', letterSpacing: '0.18em', fontSize: 24, fontWeight: 700, color,
    }}>{children}</div>
  );
  return (
    <Slide bg={C.cream} label="The honest part">
      <TitleBlock title="The honest part." />

      <div style={{
        marginTop: 28, fontSize: 34, fontWeight: 500, lineHeight: 1.4,
        color: 'rgba(16,50,63,0.72)', maxWidth: 1520, textWrap: 'pretty',
      }}>
        Two paths — and they haven't fully met yet.
      </div>

      <div style={{ flex: 1, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 36, alignContent: 'center' }}>
        <div style={{
          background: C.teal, color: C.cream, borderRadius: 26, padding: '48px 52px',
          display: 'flex', flexDirection: 'column', gap: 18,
        }}>
          <Label color={C.peach}>In progress</Label>
          <div style={{ fontSize: 46, fontWeight: 800, lineHeight: 1.06, letterSpacing: '-0.02em' }}>Workflows → the ERP.</div>
          <div style={{ fontSize: 28, lineHeight: 1.4, color: 'rgba(243,236,223,0.85)', textWrap: 'pretty' }}>
            I'm moving the workflows into the ERP so my staff accountant can run them herself — no terminal required.
          </div>
        </div>
        <div style={{
          background: C.cream, color: C.tealInk, borderRadius: 26, padding: '48px 52px',
          border: `2px dashed ${C.coral}`, display: 'flex', flexDirection: 'column', gap: 18,
        }}>
          <Label color={C.coral}>Not yet</Label>
          <div style={{ fontSize: 46, fontWeight: 800, lineHeight: 1.06, letterSpacing: '-0.02em' }}>The agent → the ERP.</div>
          <div style={{ fontSize: 28, lineHeight: 1.4, color: 'rgba(16,50,63,0.7)', textWrap: 'pretty' }}>
            The orchestration agent isn't in the ERP yet — and honestly, I'm not sure how. A parallel, human-gated agent inside a web app is a different problem than one I run from my terminal.
          </div>
        </div>
      </div>

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

// ─── The four workflow pipelines, side by side (process map) ─────────────
const PIPE = {
  input:  { c: '#E9A63E', label: 'Input' },
  script: { c: '#4E9D6B', label: 'Script' },
  api:    { c: '#8E7BD0', label: 'API' },
  output: { c: '#4C84C4', label: 'Output' },
  human:  { c: '#E8604C', label: 'Human' },
};

function S_WorkflowPipelines({ num, total }) {
  const cols = [
    { n: '1', name: 'Production Labor', steps: [
      { k: 'input', t: 'iSolved labor-detail PDF' },
      { k: 'script', t: 'extract_payroll.py parses & matches employees' },
      { k: 'output', t: 'Production Labor.xlsx' },
      { k: 'human', t: 'Confirm PDF cleanup' },
    ]},
    { n: '2', name: 'Retail Labor Report', steps: [
      { k: 'input', t: 'iSolved PDF — all 11 stores' },
      { k: 'api', t: 'Toast POS — net sales per store' },
      { k: 'script', t: 'Join labor $ with revenue' },
      { k: 'output', t: 'Labor-to-Sales workbook' },
      { k: 'human', t: 'Review labor-to-sales' },
    ]},
    { n: '3', name: 'Payroll Journal Entry', steps: [
      { k: 'input', t: 'iSolved GL PDF' },
      { k: 'script', t: 'payroll_je.py maps GL → QBO' },
      { k: 'human', t: 'Approve the 163-line JE' },
      { k: 'api', t: 'QuickBooks Online — post' },
      { k: 'output', t: 'JE posted + audit JSON' },
    ]},
    { n: '4', name: 'Tip Credit Compliance', steps: [
      { k: 'input', t: 'SwipeClock CSVs + overrides' },
      { k: 'api', t: 'Toast POS — CC tips' },
      { k: 'script', t: 'Check the $12.77/hr threshold' },
      { k: 'output', t: 'Compliance report.xlsx' },
      { k: 'human', t: 'Review flagged employees' },
    ]},
  ];

  const Chip = ({ k }) => (
    <div style={{
      background: C.creamSoft, border: `1px solid ${C.creamDeep}`, borderRadius: 12,
      padding: '20px 16px', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 12,
    }}>
      <span style={{ width: 13, height: 13, borderRadius: 4, background: PIPE[k].c, flexShrink: 0 }} />
      <span style={{
        fontFamily: '"Barlow Condensed",system-ui,sans-serif', textTransform: 'uppercase',
        letterSpacing: '0.16em', fontSize: 24, fontWeight: 700, color: PIPE[k].c,
      }}>{PIPE[k].label}</span>
    </div>
  );

  return (
    <Slide bg={C.cream} label="The four pipelines">
      <h1 style={{
        fontSize: 60, fontWeight: 800, letterSpacing: '-0.02em', lineHeight: 1.05,
        margin: 0, color: C.tealInk, textWrap: 'balance',
      }}>Four workflows, one process.</h1>

      <div style={{
        marginTop: 18, fontSize: 28, fontWeight: 500, lineHeight: 1.35,
        color: 'rgba(16,50,63,0.72)', maxWidth: 1520, textWrap: 'pretty',
      }}>
        Each runs on its own — input, script, API, output, and me at every irreversible step. <span style={{ color: C.tealInk, fontWeight: 700 }}>The honest part:</span> I built an orchestration agent to chain all four — and <span style={{ color: C.coral, fontWeight: 700 }}>retired it</span>. A human checkpoint on every workflow is the point, and that's exactly how the ERP works.
      </div>

      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '10px 26px', marginTop: 22 }}>
        {Object.keys(PIPE).map((k) =>
        <div key={k} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{ width: 12, height: 12, borderRadius: 3, background: PIPE[k].c }} />
          <span style={{
            fontFamily: '"Barlow Condensed",system-ui,sans-serif', textTransform: 'uppercase',
            letterSpacing: '0.1em', fontSize: 18, fontWeight: 700, color: 'rgba(16,50,63,0.6)',
          }}>{PIPE[k].label}</span>
        </div>
        )}
      </div>

      <div style={{ flex: 1, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24, marginTop: 26, minHeight: 0 }}>
        {cols.map((col) =>
        <div key={col.n} style={{ display: 'flex', flexDirection: 'column', minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
            <span style={{
              width: 34, height: 34, borderRadius: 9, background: C.tealInk, color: C.cream,
              display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
              fontSize: 19, fontWeight: 800, fontFamily: '"Barlow Condensed",system-ui,sans-serif',
            }}>{col.n}</span>
            <span style={{ fontSize: 23, fontWeight: 800, color: C.tealInk, lineHeight: 1.1, letterSpacing: '-0.01em', whiteSpace: 'nowrap' }}>{col.name}</span>
          </div>
          {col.steps.map((s, i) =>
          <React.Fragment key={i}>
            <Chip k={s.k} />
            {i < col.steps.length - 1 &&
            <div style={{ textAlign: 'center', color: 'rgba(16,50,63,0.35)', fontSize: 16, lineHeight: 1, padding: '5px 0' }}>▼</div>}
          </React.Fragment>
          )}
        </div>
        )}
      </div>

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

Object.assign(window, { S_TwoPaths, S_ChainMap, S_PathsHonest, S_WorkflowPipelines });
