// Shared UI primitives — Button, IconChip, Eyebrow, SectionNum, Logo, GoldUnderline

const Button = ({ variant = "primary", size = "md", onClick, href, children, style, iconEnd }) => {
  const [hover, setHover] = React.useState(false);
  const sizes = {
    sm: { height: 38, padding: "0 16px", fontSize: 13, borderRadius: 999 },
    md: { height: 46, padding: "0 22px", fontSize: 14, borderRadius: 999 },
    lg: { height: 58, padding: "0 32px", fontSize: 15, borderRadius: 999 },
  };
  const variants = {
    primary: {
      background: hover ? "var(--gold-400)" : "var(--gold-500)",
      color: "var(--navy-500)",
      boxShadow: hover ? "0 0 32px rgba(255,229,0,0.55)" : "var(--shadow-glow-gold)",
      border: "1px solid transparent",
    },
    dark: {
      background: hover ? "var(--navy-400)" : "var(--navy-500)",
      color: "var(--fog-100)",
      border: "1px solid transparent",
    },
    ghost: {
      background: hover ? "rgba(12,28,53,0.05)" : "transparent",
      color: "var(--navy-500)",
      border: "1px solid var(--border)",
    },
    outlineLight: {
      background: hover ? "rgba(253,252,248,0.1)" : "transparent",
      color: "var(--fog-100)",
      border: "1px solid rgba(253,252,248,0.25)",
    },
  };
  const s = {
    display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 8,
    fontFamily: "var(--font-body)", fontWeight: 600, cursor: "pointer",
    textDecoration: "none", whiteSpace: "nowrap",
    transition: "all 200ms var(--ease-out)",
    ...sizes[size], ...variants[variant], ...style,
  };
  const content = <>{children}{iconEnd}</>;
  const props = {
    onMouseEnter: () => setHover(true),
    onMouseLeave: () => setHover(false),
    style: s,
  };
  if (href) return <a href={href} {...props}>{content}</a>;
  return <button type="button" onClick={onClick} {...props}>{content}</button>;
};

const IconChip = ({ children, tint = "ocean", size = 48, radius = 14 }) => {
  const tints = {
    ocean: { bg: "rgba(46,109,212,.10)", fg: "var(--ocean-500)" },
    navy:  { bg: "rgba(12,28,53,.08)",   fg: "var(--navy-500)" },
    gold:  { bg: "rgba(255,229,0,.18)",  fg: "var(--navy-500)" },
    steel: { bg: "rgba(107,122,144,.18)", fg: "var(--steel-600)" },
    fog:   { bg: "rgba(253,252,248,0.12)", fg: "var(--fog-100)" },
  };
  const t = tints[tint];
  return (
    <div style={{ width: size, height: size, borderRadius: radius, background: t.bg,
                  display: "inline-flex", alignItems: "center", justifyContent: "center",
                  color: t.fg, flexShrink: 0 }}>
      {children}
    </div>
  );
};

const Eyebrow = ({ children, tint = "ocean", style }) => {
  const colors = {
    ocean: { fg: "var(--ocean-500)" },
    navy:  { fg: "var(--navy-500)" },
    gold:  { fg: "var(--gold-700)" },
    fog:   { fg: "var(--fog-100)" },
  }[tint];
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 10,
                   color: colors.fg, fontSize: 12, fontWeight: 600,
                   textTransform: "uppercase", letterSpacing: ".18em",
                   fontFamily: "var(--font-body)", ...style }}>
      <span style={{ width: 24, height: 1, background: "currentColor", opacity: 0.6 }} />
      {children}
    </span>
  );
};

// Section number — big Lora serif 01/02/03 used as editorial marker
const SectionNum = ({ n, total = 6, color = "var(--ocean-500)" }) => (
  <div style={{ display: "flex", alignItems: "baseline", gap: 8, fontFamily: "var(--font-heading)" }}>
    <span style={{ fontSize: 14, fontWeight: 600, color, letterSpacing: ".15em" }}>
      {String(n).padStart(2, "0")}
    </span>
    <span style={{ fontSize: 12, color: "var(--muted-foreground)", letterSpacing: ".15em" }}>
      / {String(total).padStart(2, "0")}
    </span>
  </div>
);

// Gold underline — signature flourish echoing the gold "A" in the logo
const GoldUnderline = ({ children, thickness = 10, offset = 0 }) => (
  <span style={{ position: "relative", display: "inline-block", whiteSpace: "nowrap" }}>
    <span style={{
      position: "absolute", left: -2, right: -2, bottom: offset, height: thickness,
      background: "var(--gold-500)", opacity: 0.85, zIndex: 0, borderRadius: 2,
    }}/>
    <span style={{ position: "relative", zIndex: 1 }}>{children}</span>
  </span>
);

// Ocean accent (thin underline)
const OceanUnderline = ({ children }) => (
  <span style={{ position: "relative", display: "inline-block", color: "var(--ocean-500)" }}>
    {children}
  </span>
);

const Logo = ({ variant = "light", height = 30 }) => {
  // light = ocean-blue on fog pages; dark = white-on-navy pages
  const fg = variant === "dark" ? "#FDFCF8" : "#2E6DD4";
  const gold = "#FFE500";
  const fontSize = height * 1.05;
  return (
    <span style={{
      display: "inline-block",
      position: "relative",
      transform: "rotate(-4deg)",
      transformOrigin: "left center",
      paddingTop: fontSize * 0.42,
      paddingBottom: fontSize * 0.22,
      textDecoration: "none",
    }}>
      <span style={{
        fontFamily: "'Caveat', cursive",
        fontWeight: 700,
        lineHeight: 1,
        fontSize,
        color: fg,
        whiteSpace: "nowrap",
        letterSpacing: "-0.01em",
        textDecoration: "none",
      }}>
        <span style={{ color: gold }}>U</span>
        <span>ni</span>
        <span style={{ color: gold }}>P</span>
        <span style={{ color: gold }}>A</span>
        <span>ith</span>
      </span>
      {/* Double wobbly crayon underline — two stacked strokes */}
      <svg viewBox="0 0 200 16" preserveAspectRatio="none" style={{
        position: "absolute",
        left: 0,
        right: 0,
        bottom: -fontSize * 0.02,
        width: "100%",
        height: fontSize * 0.20,
        pointerEvents: "none",
        overflow: "visible",
      }}>
        <path d="M6,4 C 45,1 85,6 125,3 C 160,1 182,5 194,3"
              stroke={fg} strokeWidth="2.8" strokeLinecap="round"
              fill="none" opacity="0.95"/>
        <path d="M3,11 C 38,8 78,13 118,10 C 155,7 180,12 197,10"
              stroke={fg} strokeWidth="2.2" strokeLinecap="round"
              fill="none" opacity="0.8"/>
      </svg>
    </span>
  );
};

// Tiny gold dot accent
const GoldDot = ({ size = 6 }) => (
  <span style={{
    display: "inline-block", width: size, height: size, borderRadius: "50%",
    background: "var(--gold-500)", boxShadow: "0 0 12px rgba(255,229,0,0.6)"
  }}/>
);

// Fine divider
const Rule = ({ color = "var(--border)", style }) => (
  <div style={{ height: 1, background: color, width: "100%", ...style }} />
);

Object.assign(window, {
  Button, IconChip, Eyebrow, SectionNum, GoldUnderline, OceanUnderline, Logo, GoldDot, Rule
});