/* Tweaks island — drives CSS variables on :root. Brochure DOM stays vanilla. */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": ["#a9802c", "#c89a3e", "#ece0c4"],
  "headline": "Editorial",
  "paper": "Warm cream"
}/*EDITMODE-END*/;

const HEADLINE_FONTS = {
  "Editorial": '"Newsreader", Georgia, serif',
  "Contemporary": '"Source Serif 4", Georgia, serif',
  "Grotesk": '"Hanken Grotesk", system-ui, sans-serif'
};

const PAPERS = {
  "Warm cream": { paper: "#faf6ec", paper2: "#f3ebda", card: "#fffdf8" },
  "Cool white": { paper: "#f4f5f7", paper2: "#eaecef", card: "#ffffff" }
};

function applyTweaks(t) {
  const r = document.documentElement.style;
  const a = t.accent || TWEAK_DEFAULTS.accent;
  r.setProperty("--gold", a[0]);
  r.setProperty("--gold-2", a[1]);
  r.setProperty("--gold-tint", a[2]);
  r.setProperty("--serif", HEADLINE_FONTS[t.headline] || HEADLINE_FONTS.Editorial);
  const p = PAPERS[t.paper] || PAPERS["Warm cream"];
  r.setProperty("--paper", p.paper);
  r.setProperty("--paper-2", p.paper2);
  r.setProperty("--paper-card", p.card);
}

function TweaksApp() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  React.useEffect(() => { applyTweaks(t); }, [t]);
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Accent colour" />
      <TweakColor
        label="Accent"
        value={t.accent}
        options={[
          ["#a9802c", "#c89a3e", "#ece0c4"],
          ["#4f7a43", "#6a9a5b", "#dbe7d4"],
          ["#1c63b0", "#3f86d6", "#d2e1f3"]
        ]}
        onChange={(v) => setTweak("accent", v)}
      />
      <TweakSection label="Typography" />
      <TweakRadio
        label="Headlines"
        value={t.headline}
        options={["Editorial", "Contemporary", "Grotesk"]}
        onChange={(v) => setTweak("headline", v)}
      />
      <TweakSection label="Paper" />
      <TweakRadio
        label="Background"
        value={t.paper}
        options={["Warm cream", "Cool white"]}
        onChange={(v) => setTweak("paper", v)}
      />
    </TweaksPanel>
  );
}

(function mount() {
  const root = document.createElement("div");
  root.id = "tweaks-root";
  document.body.appendChild(root);
  ReactDOM.createRoot(root).render(<TweaksApp />);
})();