/* ════════ IGNITE v2 — Tweaks island ════════ */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#DE0000",
  "imagery": "B&W",
  "heroMedia": "Red gel line",
  "headline": "Condensed",
  "density": "Regular"
}/*EDITMODE-END*/;

const ACCENTS = {
  "#DE0000": "#FFFFFF",   // red  -> white ink (AA-contrast accessible red)
  "#FF7A1A": "#0E0E10",   // amber-> dark ink
  "#1E63E9": "#FFFFFF",   // cobalt
  "#111116": "#FFFFFF"    // mono
};

const HERO_MAP = {
  "Red gel line": "gel",
  "Manufacturing video": "video",
  "Fragrance lab": "lab",
  "Factory floor": "floor",
  "Leaf line": "leaf"
};

const HEADLINES = {
  "Condensed": { family: '"Roboto Condensed", system-ui, sans-serif', weight: 900, tracking: "-0.01em", transform: "uppercase" },
  "Block":     { family: '"Roboto", system-ui, sans-serif', weight: 900, tracking: "-0.02em", transform: "uppercase" },
  "Editorial": { family: '"Roboto", system-ui, sans-serif', weight: 300, tracking: "-0.03em", transform: "none" }
};

const DENSITY = { "Compact": "96px", "Regular": "132px", "Spacious": "168px" };

function TweaksApp() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    const r = document.documentElement.style;
    r.setProperty("--accent", t.accent);
    r.setProperty("--accent-ink", ACCENTS[t.accent] || "#FFFFFF");
    r.setProperty("--img-gray", t.imagery === "B&W" ? "100%" : "0%");
    const h = HEADLINES[t.headline] || HEADLINES.Condensed;
    r.setProperty("--font-display", h.family);
    r.setProperty("--font-disp-weight", h.weight);
    r.setProperty("--font-disp-tracking", h.tracking);
    r.setProperty("--font-disp-transform", h.transform);
    r.setProperty("--sectionY", DENSITY[t.density] || "132px");
  }, [t.accent, t.imagery, t.headline, t.density]);

  React.useEffect(() => {
    if (window.__setHeroMedia) window.__setHeroMedia(HERO_MAP[t.heroMedia] || "gel");
  }, [t.heroMedia]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Brand" />
      <TweakColor label="Accent" value={t.accent}
        options={["#DE0000", "#FF7A1A", "#1E63E9", "#111116"]}
        onChange={(v) => setTweak("accent", v)} />
      <TweakRadio label="Imagery" value={t.imagery}
        options={["B&W", "Colour"]}
        onChange={(v) => setTweak("imagery", v)} />

      <TweakSection label="Hero" />
      <TweakSelect label="Hero media" value={t.heroMedia}
        options={["Red gel line", "Manufacturing video", "Fragrance lab", "Factory floor", "Leaf line"]}
        onChange={(v) => setTweak("heroMedia", v)} />

      <TweakSection label="Typography & Layout" />
      <TweakRadio label="Headline" value={t.headline}
        options={["Condensed", "Block", "Editorial"]}
        onChange={(v) => setTweak("headline", v)} />
      <TweakRadio label="Density" value={t.density}
        options={["Compact", "Regular", "Spacious"]}
        onChange={(v) => setTweak("density", v)} />
    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.getElementById("tweaks-root")).render(<TweaksApp />);