// Rabbit Made Ya — Tweaks panel
// Lets the user explore variants without editing code.

const { useEffect } = React;

function RmyTweaks() {
  const [t, setTweak] = useTweaks(window.__TWEAK_DEFAULTS);

  // mirror tweak state onto <body> data attrs (CSS reacts via [data-*] rules)
  useEffect(() => { document.body.dataset.accent = t.accent; }, [t.accent]);
  useEffect(() => { document.body.dataset.grain  = t.grain  ? 'on' : 'off'; }, [t.grain]);
  useEffect(() => { document.body.dataset.stroke = t.stroke ? 'on' : 'off'; }, [t.stroke]);
  useEffect(() => {
    const trk = document.querySelector('.marquee-track');
    if (trk) trk.style.animationDuration = t.marqueeSpeed + 's';
  }, [t.marqueeSpeed]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Palette" />
      <TweakColor
        label="Accent"
        value={t.accent === 'ember' ? '#ff5722'
             : t.accent === 'lime'  ? '#c7ff3a'
             : t.accent === 'pink'  ? '#ff3aa3'
             : t.accent === 'ice'   ? '#6ce6ff'
             : '#ece4d3'}
        options={['#ff5722', '#c7ff3a', '#ff3aa3', '#6ce6ff', '#ece4d3']}
        onChange={(v) => {
          const map = { '#ff5722':'ember', '#c7ff3a':'lime', '#ff3aa3':'pink', '#6ce6ff':'ice', '#ece4d3':'mono' };
          setTweak('accent', map[v] || 'ember');
        }}
      />

      <TweakSection label="Texture" />
      <TweakToggle label="Film grain"   value={t.grain}  onChange={(v) => setTweak('grain', v)} />
      <TweakToggle label="Outline type" value={t.stroke} onChange={(v) => setTweak('stroke', v)} />

      <TweakSection label="Motion" />
      <TweakSlider
        label="Marquee speed"
        value={t.marqueeSpeed}
        min={12} max={80} step={2} unit="s"
        onChange={(v) => setTweak('marqueeSpeed', v)}
      />
    </TweaksPanel>
  );
}

const root = document.createElement('div');
document.body.appendChild(root);
ReactDOM.createRoot(root).render(<RmyTweaks />);
