// slides-framework.jsx — the recurring "how I think about it" framework beats.
// Tool → Worker → Hands → Manager, all revealed to live inside the Institution (ERP).
// Cumulative build: each beat adds one more yellow box in a FIXED slot; empty
// slots stay blank (no foreshadowing). Typographic, on the deck's cream ground.
// Globals used: C, Chrome, Slide, React.

function FrameworkBeat({ num, total, level, headline, kicker, caption }) {
  const ROLES = [
    { key: 'Tool',    map: 'The Python script',       desc: 'Fixed steps. Same input, same output.' },
    { key: 'Worker',  map: 'The agentic workflow',    desc: 'Judgment and memory around the tool.' },
    { key: 'Hands',   map: 'The API',                 desc: 'Reaches out and grabs data itself.' },
    { key: 'Foundation', map: 'The tech stack', desc: 'Supabase · GitHub · Vercel — data, code, deploy.' },
  ];
  const labels = ['', 'Framework · Tool', 'Framework · Worker', 'Framework · Hands', 'Framework · Foundation', 'Framework · Institution'];
  const isHouse = level >= 5;
  const filled = Math.min(level, 4);

  // Fixed-position slot. Filled slots render the yellow box; empty slots render
  // a blank cell that holds the exact same width so nothing shifts as we build.
  const Slot = ({ role, i }) => {
    if (i >= filled) {
      return <div style={{ flex: 1, alignSelf: 'stretch' }} />;
    }
    return (
      <div style={{
        flex: 1, alignSelf: 'stretch',
        borderRadius: 20, padding: '30px 28px',
        display: 'flex', flexDirection: 'column', gap: 12,
        background: C.peach, border: `2px solid ${C.peach}`,
      }}>
        <div style={{
          fontFamily: '"Barlow Condensed",system-ui,sans-serif',
          textTransform: 'uppercase', letterSpacing: '0.16em', fontSize: 26, fontWeight: 700,
          color: C.tealInk,
        }}>{role.key}</div>
        <div style={{
          fontSize: 34, fontWeight: 700, lineHeight: 1.1, letterSpacing: '-0.01em', color: C.tealInk,
        }}>{role.map}</div>
        <div style={{
          fontSize: 24, lineHeight: 1.35, textWrap: 'pretty', color: 'rgba(16,50,63,0.72)',
        }}>{role.desc}</div>
      </div>
    );
  };

  // "+" connector — only visible between two filled boxes, but always occupies
  // the same width so the slots never move.
  const Plus = ({ on }) => (
    <div style={{
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      width: 48, flexShrink: 0, color: C.coral, fontSize: 36, fontWeight: 800,
      opacity: on ? 1 : 0,
    }}>+</div>
  );

  return (
    <Slide bg={C.cream} ink={C.tealInk} label={labels[level]} style={{ position: 'relative' }}>
      <div style={{ maxWidth: 1520 }}>
        <h1 style={{
          fontSize: 84, fontWeight: 800, letterSpacing: '-0.02em',
          lineHeight: 1.04, margin: 0, color: C.tealInk, textWrap: 'balance',
        }}>{headline}</h1>
        {kicker &&
          <p style={{
            fontSize: 34, lineHeight: 1.35, margin: '26px 0 0',
            color: 'rgba(16,50,63,0.72)', maxWidth: 1320, textWrap: 'pretty',
          }}>{kicker}</p>}
      </div>

      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
        <div style={{
          position: 'relative', borderRadius: 30, padding: '48px 44px',
          border: isHouse ? `2.5px solid ${C.teal}` : '2px solid transparent',
          background: isHouse ? 'rgba(28,71,84,0.04)' : 'transparent',
        }}>
          {isHouse &&
            <div style={{
              position: 'absolute', top: -52, left: '50%', transform: 'translateX(-50%)',
              fontFamily: '"Barlow Condensed",system-ui,sans-serif',
              textTransform: 'uppercase', letterSpacing: '0.16em', fontSize: 32, fontWeight: 700,
              color: C.teal, whiteSpace: 'nowrap',
            }}>Institution · The ERP</div>}

          <div style={{ display: 'flex', alignItems: 'stretch', gap: 0 }}>
            {ROLES.map((r, i) => (
              <React.Fragment key={r.key}>
                <Slot role={r} i={i} />
                {i < ROLES.length - 1 && <Plus on={i + 1 < filled} />}
              </React.Fragment>
            ))}
          </div>
        </div>

        {caption &&
          <p style={{
            fontSize: 30, lineHeight: 1.4, margin: '42px 0 0',
            color: 'rgba(16,50,63,0.6)', maxWidth: 1440, textWrap: 'pretty', fontStyle: 'italic',
          }}>{caption}</p>}
      </div>

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

function S_FW_Tool({ num, total }) {
  return (
    <FrameworkBeat num={num} total={total} level={1}
      headline={<>This is the <span style={{ color: C.coral }}>tool</span>.</>}
      kicker="The Python script does one job the same way every time — no judgment, no memory. Powerful, but rigid." />
  );
}
function S_FW_Worker({ num, total }) {
  return (
    <FrameworkBeat num={num} total={total} level={2}
      headline={<>Now it has a <span style={{ color: C.coral }}>worker</span>.</>}
      kicker="Wrap the tool in an agent and you get judgment and memory — a worker that handles what the script alone can't." />
  );
}
function S_FW_Hands({ num, total }) {
  return (
    <FrameworkBeat num={num} total={total} level={3}
      headline={<>Now the worker has <span style={{ color: C.coral }}>hands</span>.</>}
      kicker="An API lets the worker reach out and grab the data it needs — on its own, without me in the middle." />
  );
}
function S_FW_Manager({ num, total }) {
  return (
    <FrameworkBeat num={num} total={total} level={4}
      headline={<>Now the workers have a <span style={{ color: C.coral }}>manager</span>.</>}
      kicker="One orchestration agent runs four payroll workers end to end — the manager who manages the workers." />
  );
}
function S_FW_House({ num, total }) {
  return (
    <FrameworkBeat num={num} total={total} level={5}
      headline={<>And it all lives in an <span style={{ color: C.coral }}>institution</span>.</>}
      kicker="The ERP is the system every tool, worker, and hand lives inside — stood up on a foundation of Supabase, GitHub, and Vercel."
      caption="Not AI as the system — it's AI used to build the system, and to think and work inside it. That's the agentic system we're building right now." />
  );
}

Object.assign(window, {
  FrameworkBeat, S_FW_Tool, S_FW_Worker, S_FW_Hands, S_FW_Manager, S_FW_House,
});