/* ============================================================
   nexsure-tweaks.jsx — small Tweaks island (accent / grid / motion)
   The page itself is vanilla; this only drives CSS variables.
   ============================================================ */

const NS_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": ["oklch(0.66 0.19 256)", "oklch(0.80 0.14 210)"],
  "grid": true,
  "motion": true
}/*EDITMODE-END*/;

function NexsureTweaks() {
  const [t, setTweak] = useTweaks(NS_TWEAK_DEFAULTS);

  React.useEffect(() => {
    const r = document.documentElement;
    const [a, a2] = t.palette;
    r.style.setProperty("--accent", a);
    r.style.setProperty("--accent-2", a2);
    r.style.setProperty("--accent-soft", `color-mix(in oklch, ${a} 16%, transparent)`);
    document.body.classList.toggle("no-grid", !t.grid);
    document.body.classList.toggle("no-motion", !t.motion);
  }, [t.palette, t.grid, t.motion]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Accent" />
      <TweakColor
        label="Palette"
        value={t.palette}
        options={[
          ["oklch(0.66 0.19 256)", "oklch(0.80 0.14 210)"],
          ["oklch(0.72 0.13 200)", "oklch(0.84 0.12 185)"],
          ["oklch(0.78 0.17 150)", "oklch(0.86 0.15 165)"],
          ["oklch(0.62 0.20 285)", "oklch(0.78 0.15 250)"],
        ]}
        onChange={(v) => setTweak("palette", v)}
      />
      <TweakSection label="Atmosphere" />
      <TweakToggle label="Grid texture" value={t.grid} onChange={(v) => setTweak("grid", v)} />
      <TweakToggle label="Motion" value={t.motion} onChange={(v) => setTweak("motion", v)} />
    </TweaksPanel>
  );
}

const nsHost = document.createElement("div");
document.body.appendChild(nsHost);
ReactDOM.createRoot(nsHost).render(<NexsureTweaks />);