/* Tweaks island — applies values to the dark page via CSS vars. */
const HOLDS_TWEAKS = /*EDITMODE-BEGIN*/{
  "palette": "mono",
  "accent": "#C0473A",
  "logo": "underscore",
  "display": "\"Newsreader\", Georgia, serif",
  "texture": true
}/*EDITMODE-END*/;

// monochrome values applied when palette === "mono"
const MONO = { accent: "#5C5C63", signal: "#FFFFFF", glow: "#CACAD2" };

function HoldsTweaks() {
  const [t, setTweak] = useTweaks(HOLDS_TWEAKS);

  React.useEffect(() => {
    const root = document.documentElement;
    if (t.palette === "mono") {
      root.style.setProperty("--accent", MONO.accent);
      root.style.setProperty("--signal", MONO.signal);
      root.style.setProperty("--glow", MONO.glow);
      document.body.setAttribute("data-palette", "mono");
    } else {
      root.style.setProperty("--accent", t.accent);
      root.style.removeProperty("--signal");   // let CSS re-derive from --accent
      root.style.removeProperty("--glow");
      document.body.setAttribute("data-palette", "signal");
    }
    root.style.setProperty("--font-display", t.display);
    document.body.setAttribute("data-texture", t.texture ? "on" : "off");
    document.body.setAttribute("data-logo", t.logo);
  }, [t.palette, t.accent, t.display, t.texture, t.logo]);

  const mono = t.palette === "mono";

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Palette" />
      <TweakRadio
        label="Mode"
        value={t.palette}
        options={[
          { value: "signal", label: "Signal" },
          { value: "mono", label: "Mono B&W" },
        ]}
        onChange={(v) => setTweak("palette", v)}
      />
      {!mono && (
        <TweakColor
          label="Accent"
          value={t.accent}
          options={["#C0473A", "#E0784E", "#D7A24A", "#6FAE82", "#5B8FE0", "#B57BC9"]}
          onChange={(v) => setTweak("accent", v)}
        />
      )}
      <TweakSection label="Logomark" />
      <TweakSelect
        label="Mark"
        value={t.logo}
        options={[
          { value: "signal", label: "Signal (ring + dot)" },
          { value: "aperture", label: "Aperture" },
          { value: "bracket", label: "Brackets" },
          { value: "square", label: "Square" },
          { value: "diamond", label: "Diamond" },
          { value: "underscore", label: "Held line" },
        ]}
        onChange={(v) => setTweak("logo", v)}
      />
      <TweakSection label="Display type" />
      <TweakSelect
        label="Headline font"
        value={t.display}
        options={[
          { value: "\"Space Grotesk\", system-ui, sans-serif", label: "Space Grotesk" },
          { value: "\"Hanken Grotesk\", system-ui, sans-serif", label: "Hanken Grotesk" },
          { value: "\"Schibsted Grotesk\", system-ui, sans-serif", label: "Schibsted Grotesk" },
          { value: "\"Archivo\", system-ui, sans-serif", label: "Archivo" },
          { value: "\"Bricolage Grotesque\", system-ui, sans-serif", label: "Bricolage Grotesque" },
          { value: "\"Newsreader\", Georgia, serif", label: "Newsreader (serif)" },
          { value: "\"Fraunces\", Georgia, serif", label: "Fraunces (serif)" },
        ]}
        onChange={(v) => setTweak("display", v)}
      />
      <TweakSection label="Surface" />
      <TweakToggle
        label="Film grain"
        value={t.texture}
        onChange={(v) => setTweak("texture", v)}
      />
    </TweaksPanel>
  );
}

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