/* West 57th — Tweaks panel app (drives :root CSS vars) */
const { useEffect } = React;

const W57_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "Saddle",
  "headingFont": "Libre Caslon Display",
  "accent": "#9a5a30",
  "grain": true
}/*EDITMODE-END*/;

const PALETTE_KEY = { "Saddle": "", "Charcoal": "charcoal", "Hunter": "hunter" };
const PALETTE_ACCENT = { "Saddle": "#9a5a30", "Charcoal": "#a9842f", "Hunter": "#9a6a38" };

function W57Tweaks() {
  const [t, setTweak] = useTweaks(W57_DEFAULTS);

  // Apply palette (and reset accent to palette default when palette changes)
  useEffect(() => {
    const root = document.documentElement;
    const key = PALETTE_KEY[t.palette] || "";
    if (key) root.setAttribute("data-palette", key);
    else root.removeAttribute("data-palette");
  }, [t.palette]);

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

  useEffect(() => {
    const stack = `'${t.headingFont}', Georgia, 'Times New Roman', serif`;
    document.documentElement.style.setProperty("--font-display", stack);
  }, [t.headingFont]);

  useEffect(() => {
    document.body.setAttribute("data-grain", t.grain ? "on" : "off");
  }, [t.grain]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Palette" />
      <TweakRadio
        label="Color story"
        value={t.palette}
        options={["Saddle", "Charcoal", "Hunter"]}
        onChange={(v) => setTweak({ palette: v, accent: PALETTE_ACCENT[v] })}
      />
      <TweakColor
        label="Accent"
        value={t.accent}
        options={["#9a5a30", "#7a4322", "#a9842f", "#2f5641", "#8a4b52"]}
        onChange={(v) => setTweak("accent", v)}
      />
      <TweakSection label="Type" />
      <TweakSelect
        label="Headlines"
        value={t.headingFont}
        options={["Libre Caslon Display", "Marcellus", "Spectral"]}
        onChange={(v) => setTweak("headingFont", v)}
      />
      <TweakSection label="Texture" />
      <TweakToggle
        label="Paper grain"
        value={t.grain}
        onChange={(v) => setTweak("grain", v)}
      />
    </TweaksPanel>
  );
}

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