// Gnosis Homepage — Tweaks
const { useEffect } = React;

function GnosisTweaks() {
  const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "variant": "cinematic",
    "motion": "cinema",
    "cursor": true,
    "ambient": true,
    "bg": "deep",
    "accent": "#E2C685",
    "video": true
  }/*EDITMODE-END*/;

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

  useEffect(() => {
    if (!window.GnosisHomepage) return;
    window.GnosisHomepage.setVariant(t.variant);
    window.GnosisHomepage.setMotion(t.motion === 'cinema' ? 'cinematic' : t.motion);
    window.GnosisHomepage.setCursor(t.cursor);
    window.GnosisHomepage.setAmbient(t.ambient);
    window.GnosisHomepage.setBg(t.bg);
    window.GnosisHomepage.setAccent(t.accent);
    window.GnosisHomepage.setVideo(t.video);
  }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Hero variant" />
      <TweakRadio
        label="Mode"
        value={t.variant}
        onChange={v => setTweak('variant', v)}
        options={[
          {value:'cinematic', label:'Cinema'},
          {value:'editorial', label:'Editorial'},
        ]}
      />

      <TweakSection label="Motion" />
      <TweakRadio
        label="Intensity"
        value={t.motion}
        onChange={v => setTweak('motion', v)}
        options={[
          {value:'calm', label:'Calm'},
          {value:'cinema', label:'Cinema'},
          {value:'wild', label:'Wild'},
        ]}
      />

      <TweakSection label="Atmosphere" />
      <TweakRadio
        label="Darkness"
        value={t.bg}
        onChange={v => setTweak('bg', v)}
        options={[
          {value:'deep', label:'Void'},
          {value:'mid', label:'Mid'},
          {value:'soft', label:'Soft'},
        ]}
      />
      <TweakColor
        label="Accent"
        value={t.accent}
        onChange={v => setTweak('accent', v)}
        options={['#E2C685', '#D8D5C6', '#BCACD6', '#8ACDF0', '#B0E4CC']}
      />

      <TweakSection label="Layers" />
      <TweakToggle label="Magnetic cursor" value={t.cursor} onChange={v => setTweak('cursor', v)} />
      <TweakToggle label="Ambient particles" value={t.ambient} onChange={v => setTweak('ambient', v)} />
      <TweakToggle label="Video playback" value={t.video} onChange={v => setTweak('video', v)} />

      <TweakSection label="Intro" />
      <TweakButton label="Replay diagnostic" onClick={() => {
        const intro = document.getElementById('intro');
        if (!intro) return;
        intro.style.display = 'grid';
        intro.style.opacity = '1';
        intro.style.transform = 'scale(1)';
        document.body.classList.remove('intro-done');
        window.scrollTo({top:0, behavior:'instant'});
      }} />
    </TweaksPanel>
  );
}

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