// Vlontia — Tweaks panel (spacing + atmosphere)
const VL_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "resultsGap": 24,
  "sectionSpacing": 112,
  "orbs": true,
  "cursorGlow": true
}/*EDITMODE-END*/;

function VlTweaks() {
  const [t, setTweak] = useTweaks(VL_TWEAK_DEFAULTS);

  React.useEffect(() => {
    const r = document.documentElement.style;
    r.setProperty('--results-gap', t.resultsGap + 'px');
    r.setProperty('--secpad', t.sectionSpacing + 'px');
    document.body.classList.toggle('no-orbs', !t.orbs);
    document.body.classList.toggle('no-glow', !t.cursorGlow);
  }, [t]);

  return (
    <TweaksPanel>
      <TweakSection label="Spacing" />
      <TweakSlider label="Gap above “The Vlontia effect”" value={t.resultsGap} min={0} max={112} step={4} unit="px"
                   onChange={(v) => setTweak('resultsGap', v)} />
      <TweakSlider label="Section spacing" value={t.sectionSpacing} min={56} max={160} step={4} unit="px"
                   onChange={(v) => setTweak('sectionSpacing', v)} />
      <TweakSection label="Atmosphere" />
      <TweakToggle label="Glow orbs" value={t.orbs}
                   onChange={(v) => setTweak('orbs', v)} />
      <TweakToggle label="Cursor glow" value={t.cursorGlow}
                   onChange={(v) => setTweak('cursorGlow', v)} />
    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.getElementById('tweaks-root')).render(<VlTweaks />);