/* Mission Relearn slide-deck components — Part 1: primitives */

const TYPE_SCALE = {
  display: 140,    // hero/cover
  bigNum: 220,     // huge stats
  title: 96,       // standard slide title
  titleSm: 72,     // smaller titles
  subtitle: 44,
  lead: 38,
  body: 30,
  small: 26,
  eyebrow: 24,
  caption: 22,
};

const SPACING = {
  paddingTop: 100,
  paddingBottom: 140,
  paddingX: 100,
  titleGap: 52,
  itemGap: 28,
  blockGap: 64,
};

const COLORS = {
  coral: "hsl(8 85% 65%)",
  coralLight: "hsl(15 90% 72%)",
  coralSoft: "hsla(8, 85%, 65%, 0.10)",
  navy: "hsl(230 25% 12%)",
  navyDeep: "hsl(230 30% 8%)",
  border: "hsl(214 32% 91%)",
  muted: "hsl(220 10% 45%)",
};

/* ---------- Lucide icon helper ---------- */
function Icon({ name, size = 32, color = "currentColor", strokeWidth = 1.75, style }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (ref.current && window.lucide) {
      ref.current.innerHTML = "";
      const el = document.createElement("i");
      el.setAttribute("data-lucide", name);
      ref.current.appendChild(el);
      window.lucide.createIcons({
        attrs: { width: size, height: size, "stroke-width": strokeWidth, stroke: color },
      });
    }
  }, [name, size, color, strokeWidth]);
  return <span ref={ref} style={{ display: "inline-flex", lineHeight: 0, ...style }} />;
}

/* ---------- Slide chrome (footer) ---------- */
function SlideChrome({ idx, total, section, dark = false }) {
  return (
    <div className="slide-chrome">
      <div style={{ display: "flex", alignItems: "center", gap: 18 }}>
        <img
          src={dark ? "assets/logo-header-light.png" : "assets/logo-header-dark.png"}
          alt="Mission Relearn"
        />
        {section && (
          <>
            <span style={{ opacity: 0.4 }}>—</span>
            <span style={{ letterSpacing: "0.16em", textTransform: "uppercase", fontSize: 14, fontWeight: 600 }}>
              {section}
            </span>
          </>
        )}
      </div>
      <div style={{ fontVariantNumeric: "tabular-nums", fontSize: 16, fontWeight: 500 }}>
        {String(idx).padStart(2, "0")} / {String(total).padStart(2, "0")}
      </div>
    </div>
  );
}

/* ---------- Layout label (top-right) ---------- */
function LayoutLabel({ children }) {
  return <div className="layout-label">{children}</div>;
}

/* ---------- Section eyebrow ---------- */
function Eyebrow({ children, dark = false, color }) {
  return (
    <div
      className={"eyebrow " + (dark ? "eyebrow-on-dark" : "")}
      style={{ fontSize: TYPE_SCALE.eyebrow, color: color }}
    >
      {children}
    </div>
  );
}

/* ---------- Frame (title-only top wrap) ---------- */
function Frame({ children, padBottom = SPACING.paddingBottom, padTop = SPACING.paddingTop, padX = SPACING.paddingX, style, ...rest }) {
  return (
    <div
      className="slide-pad"
      style={{
        padding: `${padTop}px ${padX}px ${padBottom}px`,
        ...style,
      }}
      {...rest}
    >
      {children}
    </div>
  );
}

Object.assign(window, { TYPE_SCALE, SPACING, COLORS, Icon, SlideChrome, LayoutLabel, Eyebrow, Frame });