/* Casa Alegria — Tweaks panel.
   Mounts into #tweaks-root and applies live changes to the page. */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "azulejo",
  "displayFont": "Cormorant",
  "showStamp": true,
  "animate": true
}/*EDITMODE-END*/;

const FONT_STACKS = {
  "Cormorant": '"Cormorant Garamond", Georgia, serif',
  "Marcellus": '"Marcellus", Georgia, serif',
  "DM Serif":  '"DM Serif Display", Georgia, serif'
};

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

  React.useEffect(() => {
    const root = document.documentElement;
    root.setAttribute("data-theme", t.theme);
  }, [t.theme]);

  React.useEffect(() => {
    document.documentElement.style.setProperty("--serif", FONT_STACKS[t.displayFont] || FONT_STACKS.Cormorant);
  }, [t.displayFont]);

  React.useEffect(() => {
    const stamp = document.querySelector(".hero-art .stamp");
    if (stamp) stamp.style.display = t.showStamp ? "" : "none";
  }, [t.showStamp]);

  React.useEffect(() => {
    const existing = document.getElementById("__no-anim");
    if (!t.animate) {
      const style = existing || document.createElement("style");
      style.id = "__no-anim";
      style.textContent = ".reveal{opacity:1!important;transform:none!important;transition:none!important}";
      if (!existing) document.head.appendChild(style);
      document.querySelectorAll(".reveal").forEach((el) => el.classList.add("in"));
    } else if (existing) {
      existing.remove();
    }
  }, [t.animate]);

  return (
    <TweaksPanel>
      <TweakSection label="Palette" />
      <TweakRadio
        label="Theme"
        value={t.theme}
        options={["terracotta", "azulejo", "olive"]}
        onChange={(v) => setTweak("theme", v)}
      />
      <TweakSection label="Typography" />
      <TweakSelect
        label="Display font"
        value={t.displayFont}
        options={["Cormorant", "Marcellus", "DM Serif"]}
        onChange={(v) => setTweak("displayFont", v)}
      />
      <TweakSection label="Details" />
      <TweakToggle
        label={'"Alegria" hero badge'}
        value={t.showStamp}
        onChange={(v) => setTweak("showStamp", v)}
      />
      <TweakToggle
        label="Scroll animations"
        value={t.animate}
        onChange={(v) => setTweak("animate", v)}
      />
    </TweaksPanel>
  );
}

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