// Crest & Code — Tweaks panel
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "cursor": true,
  "marqueeSpeed": 28,
  "heroAmp": true,
  "tiltDepth": 7,
  "accent": "#8A9C8E"
}/*EDITMODE-END*/;

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

  React.useEffect(() => {
    if (window.__setCursorEnabled) window.__setCursorEnabled(t.cursor);
  }, [t.cursor]);

  React.useEffect(() => {
    document.documentElement.style.setProperty('--marquee-speed', t.marqueeSpeed + 's');
  }, [t.marqueeSpeed]);

  React.useEffect(() => {
    const amp = document.querySelector('.hero-amp');
    if (amp) amp.style.display = t.heroAmp ? '' : 'none';
  }, [t.heroAmp]);

  React.useEffect(() => {
    window.__tiltDepth = t.tiltDepth;
  }, [t.tiltDepth]);

  React.useEffect(() => {
    document.documentElement.style.setProperty('--sage', t.accent);
  }, [t.accent]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Motion" />
      <TweakToggle label="Custom cursor" value={t.cursor} onChange={(v) => setTweak('cursor', v)} />
      <TweakSlider label="Marquee speed" value={t.marqueeSpeed} min={10} max={60} step={1} unit="s" onChange={(v) => setTweak('marqueeSpeed', v)} />
      <TweakSlider label="Card tilt depth" value={t.tiltDepth} min={0} max={16} step={1} unit="°" onChange={(v) => setTweak('tiltDepth', v)} />
      <TweakSection label="Look" />
      <TweakToggle label="Giant “&” in hero" value={t.heroAmp} onChange={(v) => setTweak('heroAmp', v)} />
      <TweakColor label="Accent (sage)" value={t.accent} options={['#8A9C8E', '#A9B7AC', '#6E8A6F', '#9AA38B']} onChange={(v) => setTweak('accent', v)} />
    </TweaksPanel>
  );
}

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