/* global React, useTweaks, TweaksPanel, TweakSection, TweakColor, TweakRadio, TweakToggle */
// L3 page tweak controls. Loaded after react, react-dom, babel, and tweaks-panel.jsx.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#F47621",
  "heroBg": "gradient",
  "headlineFont": "serif",
  "density": "comfortable",
  "motion": true
}/*EDITMODE-END*/;

// Each accent maps to a hover tint and a darker "ink" used for accent text on light surfaces.
const L3_ACCENTS = {
  "#F47621": { hot: "#ff8a3a", ink: "#b8551a" }, // EDGE hot orange (default)
  "#FFB216": { hot: "#ffc04d", ink: "#9a6500" }, // warm amber
  "#2A6FDB": { hot: "#508cec", ink: "#1f55ad" }, // signal blue
  "#1F8A5B": { hot: "#28a06c", ink: "#176c47" }  // deep teal
};

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

  React.useEffect(() => {
    const root = document.documentElement;
    const body = document.body;
    const a = L3_ACCENTS[t.accent] || { hot: t.accent, ink: t.accent };
    root.style.setProperty("--orange", t.accent);
    root.style.setProperty("--orange-hot", a.hot);
    root.style.setProperty("--orange-ink", a.ink);
    root.style.setProperty(
      "--serif",
      t.headlineFont === "sans"
        ? "'Outfit', -apple-system, sans-serif"
        : "'DM Serif Display', Georgia, serif"
    );
    body.classList.toggle("tw-hero-flat", t.heroBg === "flat");
    body.classList.toggle("tw-hero-glow", t.heroBg === "glow");
    body.classList.toggle("tw-compact", t.density === "compact");
    body.classList.toggle("tw-no-anim", !t.motion);
  }, [t]);

  return (
    <TweaksPanel>
      <TweakSection label="Brand accent" />
      <TweakColor
        label="Accent color"
        value={t.accent}
        options={Object.keys(L3_ACCENTS)}
        onChange={(v) => setTweak("accent", v)}
      />
      <TweakSection label="Hero" />
      <TweakRadio
        label="Background"
        value={t.heroBg}
        options={["gradient", "flat", "glow"]}
        onChange={(v) => setTweak("heroBg", v)}
      />
      <TweakRadio
        label="Headlines"
        value={t.headlineFont}
        options={["serif", "sans"]}
        onChange={(v) => setTweak("headlineFont", v)}
      />
      <TweakSection label="Layout" />
      <TweakRadio
        label="Density"
        value={t.density}
        options={["compact", "comfortable"]}
        onChange={(v) => setTweak("density", v)}
      />
      <TweakToggle
        label="Entrance motion"
        value={t.motion}
        onChange={(v) => setTweak("motion", v)}
      />
    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.getElementById("tweak-root")).render(<L3Tweaks />);