/* Waan Thai — Tweaks island. Drives window.applyTweaks() on every change. */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "dark",
  "heroStyle": "film",
  "font": "cormorant",
  "accent": "#e8b84b",
  "jungle": 78,
  "motion": "lagom",
  "frameTop": 92,
  "frameSide": 16,
  "frameBottom": 16
}/*EDITMODE-END*/;

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

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

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Tema & känsla" />
      <TweakRadio label="Färgtema" value={t.theme}
        options={[{ value: 'dark', label: 'Mörk djungel' }, { value: 'light', label: 'Ljus' }]}
        onChange={(v) => setTweak('theme', v)} />
      <TweakSlider label="Djungelintensitet" value={t.jungle} min={0} max={100} unit="%"
        onChange={(v) => setTweak('jungle', v)} />
      <TweakColor label="Accentfärg" value={t.accent}
        options={['#e8b84b', '#ff2d8a', '#d2542f', '#19e3c4']}
        onChange={(v) => setTweak('accent', v)} />

      <TweakSection label="Hero" />
      <TweakRadio label="Hero-stil" value={t.heroStyle}
        options={[{ value: 'film', label: 'Filmisk' }, { value: 'edit', label: 'Editorial' }, { value: 'neon', label: 'Neon' }]}
        onChange={(v) => setTweak('heroStyle', v)} />

      <TweakSection label="Typografi & rörelse" />
      <TweakSelect label="Rubriktypsnitt" value={t.font}
        options={[
          { value: 'cormorant', label: 'Cormorant (kursiv serif)' },
          { value: 'dm', label: 'DM Serif (dramatisk)' },
          { value: 'sans', label: 'Grotesk (modern sans)' }
        ]}
        onChange={(v) => setTweak('font', v)} />
      <TweakRadio label="Animation" value={t.motion}
        options={[{ value: 'off', label: 'Av' }, { value: 'lagom', label: 'Lagom' }, { value: 'mycket', label: 'Mycket' }]}
        onChange={(v) => setTweak('motion', v)} />
    </TweaksPanel>
  );
}

(function mountWaanTweaks() {
  const host = document.createElement('div');
  host.id = 'waan-tweaks-root';
  document.body.appendChild(host);
  ReactDOM.createRoot(host).render(React.createElement(WaanTweaks));
})();