// scene-act4.jsx — Act IV: 3-panel comic close ("How Standards Proliferate")
// Total ~16s. Beats:
//  0.0–1.0   Title types in
//  1.0–5.5   Panel 1 draws (Situation: 14 standards)
//  5.5–10.5  Panel 2 draws (Two devs: "we need ONE universal standard")
// 10.5–14.5  Panel 3 draws (Soon: 15 standards)
// 14.5–16.0  Caption holds: "Same AI. Better process."

function SceneAct4() {
  return (
    <Timeline duration={16000} sceneId="act4" label="Act IV — Standards Proliferate">
      <CaptionScene>
        <div className="scene-bg scene-cream-bg" />
        <div style={{ position: 'absolute', inset: 0 }}>
          <Act4Title />
          <ComicGrid />
          <Act4Punchline />
        </div>
        <SceneCaption text="Same AI. Better process." from={14000} typeDur={1100} hold={900} />
      </CaptionScene>
    </Timeline>
  );
}

// ── Title ─────────────────────────────────────────────
function Act4Title() {
  const t = useT();
  const op = Math.min(1, Math.max(0, (t - 200) / 600));
  return (
    <div style={{
      position: 'absolute', top: 60, left: 0, right: 0,
      textAlign: 'center', opacity: op,
    }}>
      <div style={{
        fontFamily: 'Caveat, cursive',
        fontSize: 64, color: '#2C2C2C',
        letterSpacing: '0.02em',
      }}>
        HOW STANDARDS PROLIFERATE:
      </div>
      <div style={{
        fontFamily: 'Caveat, cursive',
        fontSize: 30, color: '#2C2C2C',
        marginTop: 4,
      }}>
        (SEE: A/C CHARGERS, CHARACTER ENCODINGS, INSTANT MESSAGING, ETC.)
      </div>
    </div>
  );
}

// ── 3-panel grid ──────────────────────────────────────
function ComicGrid() {
  const W = 500;
  const H = 580;
  const G = 30;
  const totalW = W*3 + G*2;
  const x0 = (1920 - totalW) / 2;
  const y0 = 220;

  const panels = [
    { x: x0,             y: y0, start: 1000,  render: <Panel1 /> },
    { x: x0 + (W+G),     y: y0, start: 5500,  render: <Panel2 /> },
    { x: x0 + (W+G)*2,   y: y0, start: 10500, render: <Panel3 /> },
  ];

  return (
    <>
      {panels.map((p, i) => (
        <ComicPanel key={i} x={p.x} y={p.y} w={W} h={H} start={p.start}>
          {p.render}
        </ComicPanel>
      ))}
    </>
  );
}

function ComicPanel({ x, y, w, h, start, children }) {
  const t = useT();
  const op = Math.min(1, Math.max(0, (t - start) / 400));
  return (
    <div style={{
      position: 'absolute',
      left: x, top: y, width: w, height: h,
      background: 'var(--cream-base)',
      border: '3px solid var(--ink)',
      opacity: op,
      overflow: 'hidden',
    }}>
      <svg width={w} height={h} viewBox={`0 0 ${w} ${h}`} style={{ display: 'block' }}>
        {children}
      </svg>
    </div>
  );
}

// helpers
function HandText({ x, y, from, duration = 800, size = 28, children, anchor = 'middle', weight = 'normal' }) {
  const t = useT();
  if (t < from) return null;
  const op = Math.min(1, (t - from) / duration);
  return (
    <text x={x} y={y}
      fontFamily="Caveat, cursive"
      fontSize={size}
      fontWeight={weight}
      fill="#2C2C2C"
      textAnchor={anchor}
      opacity={op}
    >{children}</text>
  );
}

// ── PANEL 1 — SITUATION: 14 standards ─────────────────
function Panel1() {
  const start = 1000;
  return (
    <g stroke="#2C2C2C" strokeWidth="3" fill="none" strokeLinecap="round" strokeLinejoin="round">
      <HandText x={250} y={150} from={start+400} duration={500} size={48} weight="bold">SITUATION:</HandText>
      <HandText x={250} y={260} from={start+1200} duration={500} size={38}>THERE ARE</HandText>
      <HandText x={250} y={320} from={start+1800} duration={500} size={38}>14 COMPETING</HandText>
      <HandText x={250} y={380} from={start+2400} duration={500} size={38}>STANDARDS.</HandText>
    </g>
  );
}

// ── PANEL 2 — Two stick figures conversing ────────────
function Panel2() {
  const start = 5500;
  return (
    <g stroke="#2C2C2C" strokeWidth="3" fill="none" strokeLinecap="round" strokeLinejoin="round">
      {/* Big speech bubble */}
      <DrawPath
        d="M 50 50 L 460 50 Q 480 50, 480 70 L 480 240 Q 480 260, 460 260 L 240 260 L 220 285 L 230 260 L 70 260 Q 50 260, 50 240 L 50 70 Q 50 50, 70 50 Z"
        from={start+200} duration={900}
      />

      <HandText x={75} y={95} from={start+400} duration={500} size={26} anchor="start" weight="bold">14?! RIDICULOUS!</HandText>
      <HandText x={75} y={130} from={start+1100} duration={500} size={24} anchor="start">WE NEED TO DEVELOP</HandText>
      <HandText x={75} y={160} from={start+1700} duration={500} size={24} anchor="start">ONE UNIVERSAL STANDARD</HandText>
      <HandText x={75} y={190} from={start+2300} duration={500} size={24} anchor="start">THAT COVERS EVERYONE'S</HandText>
      <HandText x={75} y={220} from={start+2900} duration={500} size={24} anchor="start">USE CASES.</HandText>

      {/* Small "Yeah!" bubble (right) */}
      <DrawPath
        d="M 320 320 L 410 320 Q 425 320, 425 335 L 425 365 Q 425 380, 410 380 L 360 380 L 345 400 L 355 380 L 335 380 Q 320 380, 320 365 L 320 335 Q 320 320, 335 320 Z"
        from={start+3300} duration={500}
      />
      <HandText x={372} y={357} from={start+3700} duration={400} size={22} weight="bold">YEAH!</HandText>

      {/* Stick figure 1 (left) — pointing up at bubble */}
      {/* head */}
      <DrawPath d="M 170 330 m -22 0 a 22 22 0 1 0 44 0 a 22 22 0 1 0 -44 0" from={start+1500} duration={400} />
      {/* body */}
      <DrawPath d="M 170 352 L 170 460" from={start+1900} duration={400} />
      {/* arm pointing up */}
      <DrawPath d="M 170 380 L 130 320" from={start+2300} duration={300} />
      {/* arm down */}
      <DrawPath d="M 170 380 L 200 430" from={start+2400} duration={300} />
      {/* legs */}
      <DrawPath d="M 170 460 L 145 540" from={start+2700} duration={300} />
      <DrawPath d="M 170 460 L 195 540" from={start+2700} duration={300} />

      {/* Stick figure 2 (right) — woman with ponytail */}
      {/* head */}
      <DrawPath d="M 310 360 m -20 0 a 20 20 0 1 0 40 0 a 20 20 0 1 0 -40 0" from={start+3000} duration={400} />
      {/* ponytail */}
      <DrawPath d="M 327 348 Q 350 340, 355 320" from={start+3400} duration={400} />
      {/* body */}
      <DrawPath d="M 310 380 L 310 480" from={start+3500} duration={400} />
      {/* arms */}
      <DrawPath d="M 310 405 L 280 440" from={start+3800} duration={300} />
      <DrawPath d="M 310 405 L 340 440" from={start+3800} duration={300} />
      {/* legs */}
      <DrawPath d="M 310 480 L 290 540" from={start+4000} duration={300} />
      <DrawPath d="M 310 480 L 330 540" from={start+4000} duration={300} />
    </g>
  );
}

// ── PANEL 3 — SOON: 15 standards ──────────────────────
function Panel3() {
  const start = 10500;
  return (
    <g stroke="#2C2C2C" strokeWidth="3" fill="none" strokeLinecap="round" strokeLinejoin="round">
      {/* "SOON:" label boxed top-right */}
      <DrawPath d="M 320 50 L 460 50 L 460 100 L 320 100 Z" from={start+200} duration={500} />
      <HandText x={390} y={88} from={start+700} duration={400} size={32} weight="bold">SOON:</HandText>

      <HandText x={250} y={220} from={start+1200} duration={500} size={48} weight="bold">SITUATION:</HandText>
      <HandText x={250} y={310} from={start+1800} duration={500} size={38}>THERE ARE</HandText>
      <HandText x={250} y={370} from={start+2400} duration={500} size={38}>15 COMPETING</HandText>
      <HandText x={250} y={430} from={start+3000} duration={500} size={38}>STANDARDS.</HandText>
    </g>
  );
}

// ── final fade end card hint ───────────────────────────
function Act4Punchline() {
  const t = useT();
  if (t < 15200) return null;
  const op = Math.min(1, (t - 15200) / 600);
  return (
    <div style={{
      position: 'absolute',
      left: 0, right: 0, bottom: 40,
      textAlign: 'center',
      opacity: op,
      fontFamily: 'var(--font-mono)',
      fontSize: 20, color: 'var(--ink-faint)',
      letterSpacing: '0.18em', textTransform: 'uppercase',
    }}>
      apologies to randall munroe · xkcd #927
    </div>
  );
}

window.SceneAct4 = SceneAct4;