/* =============================================================
   LuminoMark — single source of truth for the Lumino flower mark.

   Used by every Lumino surface: marketing nav + footer (Academy
   Home, Foundation), portal top-bar, tutor dock, Logo System page,
   login screen, marketing collateral, etc.

   Mirrors the parametric spec from Lumino Logo System.html.

   ── Size ladder rule (baked in so callers don't have to think) ──
     size <  28  →  solid petals, no inner highlight, opaque core
                    (legibility at favicon/topbar/inline-text scale)
     size >= 28  →  stroked petals, inner highlight, hollow core
                    with concentric ring (full expressive form)

   Variants shift which CSS color var is used. `color` overrides.
   ============================================================= */
function LuminoMark({
  size = 22,
  variant = "accent",          // "accent" | "mono" | "onDark" | "onLight"
  color,                       // explicit hex / var — overrides variant
  solid,                       // force solid; undefined = auto by size
  bg,                          // small-size core color; defaults from variant
  className,
  style,
  title = "Lumino",
}) {
  const cx = 100, cy = 100;
  const petalLen = 78, petalBase = 28, petalWidth = 16, petalCount = 12, coreR = 22;
  const baseY = -petalBase, tipY = -petalLen, midY = (baseY + tipY) / 2;
  const outer = `M 0 ${baseY} C ${petalWidth} ${midY+6}, ${petalWidth} ${midY-6}, 0 ${tipY} C ${-petalWidth} ${midY-6}, ${-petalWidth} ${midY+6}, 0 ${baseY} Z`;
  const innerW = petalWidth * 0.5;
  const innerBaseY = baseY - 4, innerTipY = tipY + 8, innerMidY = (innerBaseY + innerTipY) / 2;
  const inner = `M 0 ${innerBaseY} C ${innerW} ${innerMidY+4}, ${innerW} ${innerMidY-4}, 0 ${innerTipY} C ${-innerW} ${innerMidY-4}, ${-innerW} ${innerMidY+4}, 0 ${innerBaseY} Z`;

  const variantColor = {
    accent:  "var(--accent)",
    mono:    "var(--ink-0)",
    onDark:  "#f5eee0",
    onLight: "#1a1714",
  }[variant] || "var(--accent)";
  const stroke = color || variantColor;
  const variantBg = {
    accent:  "var(--accent-ink, #1a1208)",
    mono:    "var(--bg-1, #1c1813)",
    onDark:  "#1a1714",
    onLight: "#f5eee0",
  }[variant] || "var(--accent-ink, #1a1208)";
  const coreBg = bg || variantBg;

  // Canonical size ladder.
  const useSolid = solid === true ? true : solid === false ? false : (size < 28);
  const strokeWidth = 1.4;
  const petalFill  = useSolid ? stroke : "none";
  const coreFill   = useSolid ? coreBg : `color-mix(in oklab, ${stroke} 16%, transparent)`;
  const petalSW    = useSolid ? 0 : strokeWidth;
  const coreSW     = useSolid ? 0 : strokeWidth * 1.1;

  const petals = [];
  for (let i = 0; i < petalCount; i++) {
    const a = (360 / petalCount) * i;
    petals.push(
      <g key={i} transform={`translate(${cx} ${cy}) rotate(${a})`}>
        <path d={outer} fill={petalFill} stroke={stroke} strokeWidth={petalSW} strokeLinejoin="round"/>
        {!useSolid && (
          <path d={inner} fill="none" stroke={stroke}
                strokeWidth={strokeWidth * 0.7} strokeLinejoin="round" opacity="0.75"/>
        )}
      </g>
    );
  }
  return (
    <svg width={size} height={size} viewBox="0 0 200 200" role="img"
         aria-label={title} className={className} style={{display:"block", ...style}}>
      <title>{title}</title>
      {petals}
      <circle cx={cx} cy={cy} r={coreR} fill={coreFill} stroke={stroke} strokeWidth={coreSW}/>
    </svg>
  );
}

/* Preset variants — used by the Lumino Logo System swatch page.
   These are pure data — don't render anything by themselves; consumers
   pass these props through to <LuminoMark/>. Kept here so palette tweaks
   don't require touching multiple files. */
const LUMINO_VARIANTS = [
  // Monochrome
  { id: "mono-ink",          label: "Mono · Ink",          group: "Monochrome", color: "#1a1714", bg: "#f5eee0" },
  { id: "mono-cream",        label: "Mono · Cream",        group: "Monochrome", color: "#f5eee0", bg: "#1a1714" },
  { id: "mono-graphite",     label: "Mono · Graphite",     group: "Monochrome", color: "#6b6660", bg: "#f5eee0" },
  // Studio (warm earthy — primary brand)
  { id: "studio-terracotta", label: "Studio · Terracotta", group: "Studio",     color: "#d97757", bg: "#1a1208" },
  { id: "studio-clay",       label: "Studio · Clay",       group: "Studio",     color: "#c89b7b", bg: "#1a1208" },
  { id: "studio-ochre",      label: "Studio · Ochre",      group: "Studio",     color: "#d9a654", bg: "#1a1208" },
  // Pro
  { id: "pro-slate",         label: "Pro · Slate",         group: "Pro",        color: "#7a8591", bg: "#0e1419" },
  { id: "pro-azure",         label: "Pro · Azure",         group: "Pro",        color: "#5b8fb8", bg: "#0e1419" },
  { id: "pro-emerald",       label: "Pro · Emerald",       group: "Pro",        color: "#5a9a7e", bg: "#0e1914" },
  // Playful
  { id: "play-coral",        label: "Playful · Coral",     group: "Playful",    color: "#ff7a59", bg: "#1a0e09" },
  { id: "play-saffron",      label: "Playful · Saffron",   group: "Playful",    color: "#f5b642", bg: "#1a1206" },
  { id: "play-grape",        label: "Playful · Grape",     group: "Playful",    color: "#a37bd9", bg: "#0f0a1a" },
  { id: "play-seafoam",      label: "Playful · Seafoam",   group: "Playful",    color: "#4fc3a1", bg: "#0a1a14" },
];

// Back-compat aliases — historical name was "LuminoLogo".
const LuminoLogo = LuminoMark;
window.LuminoMark = LuminoMark;
window.LuminoLogo = LuminoLogo;
window.LUMINO_VARIANTS = LUMINO_VARIANTS;