/* global React */
const { useState, useEffect } = React;

// ─── projection-scale tokens ───────────────────────────────
const TYPE_SCALE = { display: 132, title: 80, subtitle: 52, body: 34, small: 28, micro: 22 };
const SPACING = { paddingTop: 100, paddingBottom: 88, paddingX: 120, titleGap: 52, itemGap: 32 };

// ─── slide frame ───────────────────────────────────────────
function Slide({ surface = "campfire", children, style, align = "flex-start", justify = "flex-start", padded = true }) {
  const bg = surface === "lab"
    ? "radial-gradient(ellipse 1200px 800px at 85% 15%, rgba(0,240,255,0.10), transparent 60%), radial-gradient(ellipse 1000px 700px at 15% 90%, rgba(176,38,255,0.10), transparent 60%), var(--bg-primary)"
    : surface === "kraft"
      ? "radial-gradient(ellipse 1200px 800px at 80% 20%, rgba(255,107,53,0.18), transparent 60%), radial-gradient(ellipse 1000px 700px at 20% 90%, rgba(242,169,59,0.14), transparent 60%), var(--bg-bark)"
      : surface === "paper"
        ? "var(--comic-paper)"
        : "radial-gradient(ellipse 1200px 800px at 80% 15%, rgba(255,107,53,0.14), transparent 60%), radial-gradient(ellipse 900px 600px at 15% 95%, rgba(168,255,176,0.06), transparent 60%), var(--bg-primary)";
  return (
    <div style={{
      width: "100%", height: "100%",
      background: bg, color: surface === "paper" ? "var(--comic-ink)" : "var(--text-moonlight)",
      padding: padded ? `${SPACING.paddingTop}px ${SPACING.paddingX}px ${SPACING.paddingBottom}px` : 0,
      display: "flex", flexDirection: "column",
      justifyContent: justify, alignItems: align,
      position: "relative", overflow: "hidden",
      ...style,
    }}>{children}</div>
  );
}

function Halftone({ opacity = 0.18, size = 8 }) {
  return <div style={{
    position: "absolute", inset: 0, pointerEvents: "none", opacity,
    backgroundImage: "radial-gradient(circle, rgba(0,0,0,0.6) 1.2px, transparent 1.6px)",
    backgroundSize: `${size}px ${size}px`,
  }} />;
}

function Sunburst({ from = "#FF6B35", opacity = 0.10, x = "50%", y = "50%" }) {
  return <div style={{
    position: "absolute", inset: -200, pointerEvents: "none",
    background: `conic-gradient(from 0deg at ${x} ${y}, transparent 0deg, ${from} 8deg, transparent 16deg, transparent 24deg, ${from} 32deg, transparent 40deg, transparent 48deg, ${from} 56deg, transparent 64deg, transparent 72deg, ${from} 80deg, transparent 88deg, transparent 96deg, ${from} 104deg, transparent 112deg, transparent 120deg, ${from} 128deg, transparent 136deg, transparent 144deg, ${from} 152deg, transparent 160deg, transparent 168deg, ${from} 176deg, transparent 184deg, transparent 192deg, ${from} 200deg, transparent 208deg, transparent 216deg, ${from} 224deg, transparent 232deg, transparent 240deg, ${from} 248deg, transparent 256deg, transparent 264deg, ${from} 272deg, transparent 280deg, transparent 288deg, ${from} 296deg, transparent 304deg, transparent 312deg, ${from} 320deg, transparent 328deg, transparent 336deg, ${from} 344deg, transparent 352deg)`,
    opacity,
  }} />;
}

function Eyebrow({ children, color = "var(--accent-ember)", style }) {
  return <div style={{
    fontFamily: "var(--font-mono)", fontSize: TYPE_SCALE.micro,
    letterSpacing: "0.22em", textTransform: "uppercase", color,
    ...style,
  }}>{children}</div>;
}

function Title({ children, color, style }) {
  return <h1 style={{
    fontFamily: "var(--font-display)", fontSize: TYPE_SCALE.title,
    lineHeight: 0.95, letterSpacing: "-0.02em",
    color: color || "var(--text-moonlight)",
    margin: 0, textWrap: "balance", ...style,
  }}>{children}</h1>;
}

function Hand({ children, color = "var(--accent-ember)", rotate = -2, size = 44, style }) {
  return <span style={{
    fontFamily: "var(--font-hand)", fontSize: size,
    color, transform: `rotate(${rotate}deg)`, display: "inline-block",
    lineHeight: 1, ...style,
  }}>{children}</span>;
}

function StampBig({ text, color = "var(--comic-varsity-red)", rotate = -4, style }) {
  return <span style={{
    display: "inline-block", fontFamily: "var(--font-camp)",
    fontSize: TYPE_SCALE.micro, letterSpacing: "0.14em", textTransform: "uppercase",
    padding: "8px 18px", border: `3px solid ${color}`, borderRadius: 4,
    color, transform: `rotate(${rotate}deg)`, opacity: 0.9, ...style,
  }}>{text}</span>;
}

function CornerLabel({ children, color = "var(--accent-ember)", side = "tl" }) {
  const positions = {
    tl: { top: 48, left: 56 }, tr: { top: 48, right: 56 },
    bl: { bottom: 48, left: 56 }, br: { bottom: 48, right: 56 },
  };
  return <div style={{
    position: "absolute", ...positions[side],
    fontFamily: "var(--font-mono)", fontSize: TYPE_SCALE.micro,
    letterSpacing: "0.22em", textTransform: "uppercase", color,
  }}>{children}</div>;
}

function CarlSig({ section = "camp", color }) {
  const map = {
    camp:    { glyph: "∿", c: "var(--accent-ember)" },
    grounds: { glyph: "⌬", c: "var(--accent-spark)" },
    lab:     { glyph: "◊", c: "var(--neon-cyan)" },
  };
  const s = map[section] || map.camp;
  const c = color || s.c;
  return (
    <div style={{ position: "absolute", top: 48, left: 56, display: "flex", alignItems: "center", gap: 12 }}>
      <div style={{
        width: 40, height: 40, borderRadius: "50%",
        border: `1.5px solid ${c}`, color: c,
        display: "flex", alignItems: "center", justifyContent: "center",
        fontFamily: "var(--font-camp)", fontSize: 18,
      }}>{s.glyph}</div>
      <div style={{ display: "flex", flexDirection: "column", lineHeight: 1, gap: 2 }}>
        <span style={{ fontFamily: "var(--font-handwritten)", fontWeight: 800, fontSize: 28, color: c }}>Carl</span>
        <span style={{ fontFamily: "var(--font-display)", fontSize: 13, color: "var(--text-moonlight)", letterSpacing: "0.04em" }}>{section}</span>
      </div>
    </div>
  );
}

function PageNum({ n, total, color = "var(--text-smoke)" }) {
  return <div style={{
    position: "absolute", bottom: 48, right: 56,
    fontFamily: "var(--font-mono)", fontSize: TYPE_SCALE.micro,
    letterSpacing: "0.22em", color,
  }}>{String(n).padStart(2, "0")} / {String(total).padStart(2, "0")}</div>;
}

Object.assign(window, {
  TYPE_SCALE, SPACING,
  Slide, Halftone, Sunburst, Eyebrow, Title, Hand, StampBig, CornerLabel, CarlSig, PageNum,
});