// spontane.net — Tweaks panel (React root, independent of the vanilla site)
const SPONTANE_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#E0492A",
  "motion": "cesur",
  "cursorDot": true,
  "paperTexture": false
}/*EDITMODE-END*/;

function SpontaneTweaks() {
  const [t, setTweak] = useTweaks(SPONTANE_TWEAK_DEFAULTS);

  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty("--dot", t.accent);
    const deep = { "#E0492A": "#C23A1F", "#4F6BF0": "#3B53C9", "#1F8A5B": "#177347" }[t.accent] || t.accent;
    root.style.setProperty("--dot-deep", deep);
    document.body.classList.toggle("motion-calm", t.motion === "sakin");
    document.body.classList.toggle("motion-mid", t.motion === "dengeli");
    document.body.classList.toggle("grain", !!t.paperTexture);
    const cd = document.getElementById("cursor-dot");
    if (cd) cd.style.display = (t.cursorDot && t.motion !== "sakin") ? "" : "none";
  }, [t]);

  return (
    <TweaksPanel>
      <TweakSection label="Marka" />
      <TweakColor label="Nokta rengi" value={t.accent}
        options={["#E0492A", "#4F6BF0", "#1F8A5B"]}
        onChange={(v) => setTweak("accent", v)} />
      <TweakToggle label="Kağıt dokusu" value={t.paperTexture}
        onChange={(v) => setTweak("paperTexture", v)} />
      <TweakSection label="Hareket" />
      <TweakRadio label="Animasyon" value={t.motion}
        options={["cesur", "dengeli", "sakin"]}
        onChange={(v) => setTweak("motion", v)} />
      <TweakToggle label="İmleç noktası" value={t.cursorDot}
        onChange={(v) => setTweak("cursorDot", v)} />
      <TweakButton label="Açılış animasyonunu tekrar oynat" onClick={() => {
        sessionStorage.removeItem("spontane-intro");
        location.reload();
      }} />
    </TweaksPanel>
  );
}

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