/* BnbScout — Tweaks panel. Violet-primary accent palettes + motion controls.
   Bridges to the vanilla app via window.__bnb* hooks. */
const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": ["#7C6CFF", "#F5B43C", "#16B8A6"],
  "motion": 8,
  "reduceMotion": false
}/*EDITMODE-END*/;

const PALETTES = [
  ["#7C6CFF", "#F5B43C", "#16B8A6"],   // signal (default)
  ["#6C5CE7", "#F2A93B", "#13C2B2"],   // deep violet
  ["#8B5CF6", "#FBBF24", "#2DD4BF"],   // vivid
  ["#5A47E0", "#FF9F43", "#0EA5A0"],   // electric
  ["#9B6CFF", "#FFC65C", "#22D3B7"],   // soft
];

function TweaksApp() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffect(() => { window.__bnbApplyAccents && window.__bnbApplyAccents(t.palette); }, [t.palette]);
  useEffect(() => { window.__bnbSetMotion && window.__bnbSetMotion(t.reduceMotion ? 0 : t.motion / 10); }, [t.motion, t.reduceMotion]);
  useEffect(() => { window.__bnbSetReduced && window.__bnbSetReduced(t.reduceMotion); }, [t.reduceMotion]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Accent palette" />
      <TweakColor
        label="Violet · Gold · Cyan"
        value={t.palette}
        options={PALETTES}
        onChange={(v) => setTweak("palette", v)}
      />
      <TweakSection label="Motion" />
      <TweakSlider label="Intensity" value={t.motion} min={0} max={10} step={1}
                   onChange={(v) => setTweak("motion", v)} />
      <TweakToggle label="Reduce motion" value={t.reduceMotion}
                   onChange={(v) => setTweak("reduceMotion", v)} />
    </TweaksPanel>
  );
}

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