// Pravaa Tweaks Panel
// Drives cursor mode, motion intensity, palette tone, hero variant.
// Persists via localStorage (handled by shared/site.js → window.PravaaPrefs).

const PravaaTweaksDefaults = /*EDITMODE-BEGIN*/{
  "cursor": "cell",
  "motion": "medium",
  "palette": "light",
  "hero": "cells"
}/*EDITMODE-END*/;

function PravaaTweaksApp() {
  // Read current prefs from localStorage so values persist across pages.
  const initial = (typeof window !== 'undefined' && window.PravaaPrefs)
    ? window.PravaaPrefs.get()
    : PravaaTweaksDefaults;
  const [t, setTweak] = useTweaks(initial);

  // Mirror every change to PravaaPrefs so cursor/motion/etc react globally.
  React.useEffect(() => {
    if (window.PravaaPrefs) {
      window.PravaaPrefs.set({
        cursor: t.cursor,
        motion: t.motion,
        palette: t.palette,
        hero: t.hero,
      });
    }
  }, [t.cursor, t.motion, t.palette, t.hero]);

  return (
    <TweaksPanel>
      <TweakSection label="Cursor" />
      <TweakSelect
        label="Style"
        value={t.cursor}
        options={[
          { value: 'cell', label: 'Cell membrane (trail)' },
          { value: 'leaf', label: 'Leaf drift' },
          { value: 'magnetic', label: 'Magnetic (no trail)' },
          { value: 'off', label: 'System cursor' },
        ]}
        onChange={(v) => setTweak('cursor', v)}
      />

      <TweakSection label="Motion" />
      <TweakRadio
        label="Intensity"
        value={t.motion}
        options={['subtle', 'medium', 'heavy']}
        onChange={(v) => setTweak('motion', v)}
      />

      <TweakSection label="Hero" />
      <TweakRadio
        label="Reveal"
        value={t.hero}
        options={['cells', 'lens']}
        onChange={(v) => setTweak('hero', v)}
      />

      <TweakSection label="Palette" />
      <TweakRadio
        label="Tone"
        value={t.palette}
        options={['light', 'deep']}
        onChange={(v) => setTweak('palette', v)}
      />
    </TweaksPanel>
  );
}

(function mount() {
  const el = document.getElementById('tweaks-mount');
  if (!el) return;
  const root = ReactDOM.createRoot(el);
  root.render(<PravaaTweaksApp />);
})();