// frame.jsx — HUD chrome shared by every slide. Top: logo + eyebrow. Bottom: slide index + section label + timestamp.

const TOTAL_SLIDES = 24;

// Ambient deck position — provided by index.html at render time.
// Chrome reads from this instead of hardcoded slideNo props, so
// inserting/reordering slides only requires updating the slides array.
const DeckCtx = React.createContext({ slideNo: 1, total: TOTAL_SLIDES });

// Design-system tokens, locally stored
const GOLD = "#c5ae4f";
const GOLD_DARK = "#b4993e";
const GOLD_DEEP = "#9b7a33";
// Vibrant crimson — brightened for legibility on dark backgrounds.
// Used for problem/dealbreaker accents; avoid layering over red-tinted fills.
const CRIMSON = "#e94560";
const CRIMSON_DEEP = "#b5253f";
const DK_BG = "#090A0D";
const DK_FG = "#F4F3F0";
// Brighter muted FG so small copy stays readable on dark + tinted panels.
const DK_FG_MUTED = "#B8C3CE";
const DK_BORDER = "#2B2E35";
const DK_BORDER_SOFT = "#1F2126";
const CREAM = "#F7F5F0";
const CREAM_FG = "#2A2622";
const CREAM_BORDER = "#D4CFC5";
const CREAM_MUTED = "#5C5449";

// Type scale (px, slide-appropriate at 1920x1080).
// Small/micro/nano were bumped a step after a legibility review — keep
// these in sync with any per-slide sizes so tiny chrome stays readable
// at projected resolution.
const TS = {
  display: 140,
  hero: 96,
  title: 64,
  subtitle: 40,
  body: 28,
  small: 22,
  micro: 16,
  nano: 13,
};
const SP = {
  paddingTop: 120,
  paddingBottom: 100,
  paddingX: 120,
  titleGap: 44,
  itemGap: 20,
};

// Reusable corner brackets — the #1 Ludus motif
function Brackets({ size = 18, color = GOLD, thickness = 1, inset = 16 }) {
  const corners = [
    ["top","left"], ["top","right"], ["bottom","left"], ["bottom","right"]
  ];
  return (
    <>
      {corners.map(([y,x]) => (
        <span key={y+x} style={{
          position: "absolute",
          [y]: inset,
          [x]: inset,
          width: size,
          height: size,
          [`border${y==="top"?"Top":"Bottom"}`]: `${thickness}px solid ${color}`,
          [`border${x==="left"?"Left":"Right"}`]: `${thickness}px solid ${color}`,
          pointerEvents: "none",
          zIndex: 5,
        }}/>
      ))}
    </>
  );
}

// Ambient scanlines overlay (~2% gold)
function Scanlines({ opacity = 0.05 }) {
  return (
    <div style={{
      position: "absolute", inset: 0, pointerEvents: "none", zIndex: 2,
      background: `repeating-linear-gradient(180deg, rgba(180,153,62,${opacity}) 0 1px, transparent 1px 3px)`,
    }}/>
  );
}

// Tech grid (dot grid background)
function TechGrid({ spacing = 40, color = "rgba(180,153,62,0.08)", fade = true }) {
  return (
    <div style={{
      position: "absolute", inset: 0, pointerEvents: "none", zIndex: 1,
      backgroundImage: `linear-gradient(${color} 1px, transparent 1px), linear-gradient(90deg, ${color} 1px, transparent 1px)`,
      backgroundSize: `${spacing}px ${spacing}px`,
      maskImage: fade ? "radial-gradient(ellipse at 50% 50%, #000 30%, transparent 85%)" : undefined,
      WebkitMaskImage: fade ? "radial-gradient(ellipse at 50% 50%, #000 30%, transparent 85%)" : undefined,
    }}/>
  );
}

// The persistent HUD chrome — top bar + bottom bar. Rendered on every slide.
function Chrome({ section, dark = true, hideBrackets = false }) {
  const { slideNo, total } = React.useContext(DeckCtx);
  const fg = dark ? DK_FG : CREAM_FG;
  const fgMuted = dark ? DK_FG_MUTED : CREAM_MUTED;
  const border = dark ? DK_BORDER : CREAM_BORDER;
  const logoSrc = dark ? "assets/ludus-logo-no-subtitle-white.png" : "assets/ludus-logo-black.svg";

  return (
    <>
      {/* TOP HUD BAR */}
      <div style={{
        position: "absolute", top: 0, left: 0, right: 0, height: 64,
        display: "flex", alignItems: "center", justifyContent: "space-between",
        padding: "0 44px", zIndex: 40,
        borderBottom: `1px solid ${border}`,
        color: fgMuted,
        fontSize: 11, letterSpacing: "0.25em", textTransform: "uppercase",
      }}>
        <div style={{display:"flex", alignItems:"center", gap: 16}}>
          <img src={logoSrc} alt="Ludus" style={{height: 28, width: "auto", display:"block"}}/>
        </div>
        <div style={{color: fgMuted}}>BAD SECTOR LABS</div>
      </div>

      {/* BOTTOM HUD BAR */}
      <div style={{
        position: "absolute", bottom: 0, left: 0, right: 0, height: 52,
        display: "flex", alignItems: "center", justifyContent: "space-between",
        padding: "0 44px", zIndex: 40,
        borderTop: `1px solid ${border}`,
        color: fgMuted,
        fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase",
        fontVariantNumeric: "tabular-nums",
      }}>
        <div style={{display:"flex", alignItems:"center", gap: 18}}>
          <span style={{color: GOLD, fontWeight: 700}}>
            {String(slideNo).padStart(2,"0")} <span style={{color: fgMuted, fontWeight: 400}}>/ {String(total).padStart(2,"0")}</span>
          </span>
          <span style={{color: border, fontSize: 14}}>│</span>
          <span>{section}</span>
        </div>
        <div style={{display:"flex", alignItems:"center", gap: 18}}>
          <span>LUDUS USE CASES · BRIEF</span>
          <span style={{color: border, fontSize: 14}}>│</span>
          <span style={{color: fg}}>BSL · 2026</span>
        </div>
      </div>

      {/* Slide-level corner brackets (large, outside main content padding) */}
      {!hideBrackets && <Brackets size={24} color={dark ? "rgba(197,174,79,0.5)" : "rgba(180,153,62,0.55)"} inset={80}/>}
    </>
  );
}

// Generic slide frame — handles bg + chrome
function Slide({ section, dark = true, bg, chromeless = false, hideBrackets = false, children, style = {} }) {
  const backdrop = bg || (dark ? DK_BG : CREAM);
  return (
    <div style={{
      position: "absolute", inset: 0,
      background: backdrop,
      color: dark ? DK_FG : CREAM_FG,
      fontFamily: `"JetBrains Mono", ui-monospace, monospace`,
      overflow: "hidden",
      ...style,
    }}>
      {children}
      {!chromeless && <Chrome section={section} dark={dark} hideBrackets={hideBrackets}/>}
    </div>
  );
}

// Reusable eyebrow
function Eyebrow({ children, color = GOLD, style = {} }) {
  return (
    <div style={{
      fontSize: TS.small, letterSpacing: "0.3em", textTransform: "uppercase",
      color, fontWeight: 500,
      ...style,
    }}>{children}</div>
  );
}

// Eyebrow with auto-numbered "// NN · " prefix from DeckCtx. Use when the
// slide's eyebrow should track its deck position; fall back to plain
// <Eyebrow> for summary/case-indexed labels.
function NumberedEyebrow({ children, color, style }) {
  const { slideNo } = React.useContext(DeckCtx);
  return (
    <Eyebrow color={color} style={style}>
      {`// ${String(slideNo).padStart(2, "0")} · `}{children}
    </Eyebrow>
  );
}

// Slide title (large, bold, slight tightening)
function Title({ children, style = {}, size = TS.title }) {
  return (
    <h1 style={{
      fontSize: size, fontWeight: 700, letterSpacing: "-0.02em",
      lineHeight: 1.05, margin: 0, textWrap: "balance",
      ...style,
    }}>{children}</h1>
  );
}

// Standard slide inner content area — accounts for chrome
function Content({ children, style = {} }) {
  return (
    <div style={{
      position: "absolute",
      top: 64, bottom: 52, left: 0, right: 0,
      padding: `${SP.paddingTop - 64}px ${SP.paddingX}px ${SP.paddingBottom - 52}px`,
      display: "flex", flexDirection: "column",
      zIndex: 10,
      ...style,
    }}>
      {children}
    </div>
  );
}

// A "HUD card" — dark panel with brackets; used a lot
function HUDCard({ children, style = {}, padding = 40, bracketColor = "rgba(197,174,79,0.45)", dark = true }) {
  return (
    <div style={{
      position: "relative",
      border: `1px solid ${dark ? DK_BORDER : CREAM_BORDER}`,
      background: dark ? "rgba(25,28,34,0.55)" : "rgba(255,255,255,0.6)",
      padding,
      ...style,
    }}>
      <Brackets size={14} color={bracketColor} inset={6}/>
      {children}
    </div>
  );
}

// Section number marker for dividers
function BigNumeral({ n }) {
  return (
    <div style={{
      fontSize: 320, fontWeight: 700, lineHeight: 0.85, letterSpacing: "-0.04em",
      color: GOLD, fontVariantNumeric: "tabular-nums",
    }}>{String(n).padStart(2,"0")}</div>
  );
}

// Divider line with label centred
function LabeledDivider({ label, color = DK_BORDER }) {
  return (
    <div style={{display:"flex", alignItems:"center", gap: 16, color: DK_FG_MUTED, fontSize: TS.micro, letterSpacing: "0.3em", textTransform: "uppercase"}}>
      <div style={{flex:1, height: 1, background: color}}/>
      <span>{label}</span>
      <div style={{flex:1, height: 1, background: color}}/>
    </div>
  );
}

Object.assign(window, {
  TOTAL_SLIDES, DeckCtx,
  GOLD, GOLD_DARK, GOLD_DEEP, CRIMSON, DK_BG, DK_FG, DK_FG_MUTED,
  DK_BORDER, DK_BORDER_SOFT, CREAM, CREAM_FG, CREAM_BORDER, CREAM_MUTED,
  TS, SP,
  Brackets, Scanlines, TechGrid, Chrome, Slide, Eyebrow, NumberedEyebrow, Title, Content,
  HUDCard, BigNumeral, LabeledDivider,
});