/* MKT Mix — Tweaks panel (only mounts in tweak mode) */
const { useEffect } = React;

const MKTM_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#E0A82E",
  "paper": "#FAFAF7",
  "ink": "#0A0A0A",
  "heroSerif": "Instrument Serif",
  "heroRotation": true,
  "marquee": true
}/*EDITMODE-END*/;

function MktmixTweaks() {
  const [t, setTweak] = useTweaks(MKTM_DEFAULTS);

  useEffect(() => {
    const r = document.documentElement.style;
    r.setProperty("--accent", t.accent);
    r.setProperty("--paper", t.paper);
    r.setProperty("--ink", t.ink);
  }, [t.accent, t.paper, t.ink]);

  useEffect(() => {
    document.querySelectorAll(".hero-headline, .sec-title, .srv-name, .cli, .lead, .t-meta h3, .field input, .m-nav a")
      .forEach(el => { el.style.fontFamily = `"${t.heroSerif}", Georgia, serif`; });
  }, [t.heroSerif]);

  useEffect(() => {
    const m = document.querySelector(".marquee");
    if (m) m.style.display = t.marquee ? "" : "none";
  }, [t.marquee]);

  useEffect(() => {
    document.body.classList.toggle("no-rotate", !t.heroRotation);
  }, [t.heroRotation]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Palette" />
      <TweakColor
        label="Accent yellow"
        value={t.accent}
        onChange={(v) => setTweak("accent", v)}
        options={["#E0A82E", "#EAB54E", "#C99220", "#D4AF37", "#F2C94C"]}
      />
      <TweakColor
        label="Paper"
        value={t.paper}
        onChange={(v) => setTweak("paper", v)}
        options={["#FAFAF7", "#FFFFFF", "#F2F1EC", "#EFEDE6"]}
      />
      <TweakColor
        label="Ink"
        value={t.ink}
        onChange={(v) => setTweak("ink", v)}
        options={["#0A0A0A", "#000000", "#141414", "#1d1d1b"]}
      />

      <TweakSection label="Typography" />
      <TweakSelect
        label="Display serif"
        value={t.heroSerif}
        onChange={(v) => setTweak("heroSerif", v)}
        options={["Instrument Serif", "Times New Roman", "Georgia", "Cormorant Garamond"]}
      />

      <TweakSection label="Hero" />
      <TweakToggle
        label="Editorial rotation"
        value={!!t.heroRotation}
        onChange={(v) => setTweak("heroRotation", v)}
      />
      <TweakToggle
        label="Marquee strip"
        value={!!t.marquee}
        onChange={(v) => setTweak("marquee", v)}
      />
    </TweaksPanel>
  );
}

const mountEl = document.createElement("div");
mountEl.id = "mktmix-tweaks-root";
document.body.appendChild(mountEl);
ReactDOM.createRoot(mountEl).render(<MktmixTweaks />);