/* Tweaks for Nectr Lane */
const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "dark",
  "accent": "#ff6b3d",
  "displayFont": "Instrument Serif",
  "cursor": true,
  "dripSpeed": 1
}/*EDITMODE-END*/;

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

  useEffect(() => {
    document.documentElement.setAttribute('data-theme', t.theme);
  }, [t.theme]);

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

  useEffect(() => {
    document.documentElement.style.setProperty('--f-display', `"${t.displayFont}", "Times New Roman", serif`);
  }, [t.displayFont]);

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

  useEffect(() => {
    document.querySelectorAll('.drip').forEach(el => {
      el.style.animationDuration = `${5 / t.dripSpeed}s`;
    });
  }, [t.dripSpeed]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Theme" />
      <TweakRadio label="Mode" value={t.theme}
                  options={['dark', 'light']}
                  onChange={(v) => setTweak('theme', v)} />
      <TweakColor label="Accent" value={t.accent}
                  options={['#ff6b3d', '#ff9d5a', '#d83a2a', '#ffb96b']}
                  onChange={(v) => setTweak('accent', v)} />
      <TweakSection label="Type" />
      <TweakSelect label="Display font" value={t.displayFont}
                   options={['Instrument Serif', 'DM Serif Display', 'Playfair Display', 'Cormorant Garamond']}
                   onChange={(v) => setTweak('displayFont', v)} />
      <TweakSection label="Motion" />
      <TweakSlider label="Drip speed" value={t.dripSpeed} min={0.3} max={2.5} step={0.1}
                   onChange={(v) => setTweak('dripSpeed', v)} />
      <TweakToggle label="Custom cursor" value={t.cursor}
                   onChange={(v) => setTweak('cursor', v)} />
    </TweaksPanel>
  );
}

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