/* Tweaks panel for Liquid Glass portfolio.
   Lets the user flip theme, glass intensity, grain, and motion live.
   Persists via __edit_mode_set_keys to the EDITMODE-BEGIN/END JSON in the host file. */

const { useEffect } = React;

function PortfolioTweaks() {
  const defaults = window.__PORTFOLIO_DEFAULTS;
  const [t, setTweak] = useTweaks(defaults);

  // Apply tweaks to <body> live
  useEffect(() => {
    document.body.dataset.theme  = t.theme;
    document.body.dataset.glass  = t.glass;
    document.body.dataset.grain  = t.grain;
    document.body.dataset.motion = t.motion;
  }, [t.theme, t.glass, t.grain, t.motion]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Тема">
        <TweakSelect
          label="Палитра фона"
          value={t.theme}
          onChange={v => setTweak('theme', v)}
          options={[
            { value: 'ios',    label: 'iOS · минимализм, белый' },
            { value: 'aurora', label: 'Aurora · тёмный + неон' },
            { value: 'sunset', label: 'Sunset · оранж + розовый' },
            { value: 'ocean',  label: 'Ocean · cyan + индиго' },
          ]}
        />
      </TweakSection>

      <TweakSection label="Материал">
        <TweakRadio
          label="Интенсивность стекла"
          value={t.glass}
          onChange={v => setTweak('glass', v)}
          options={[
            { value: 'subtle',   label: 'Тонкое' },
            { value: 'standard', label: 'Норм' },
            { value: 'vivid',    label: 'Яркое' },
          ]}
        />
        <TweakToggle
          label="Зерно (плёночный шум)"
          value={t.grain === 'on'}
          onChange={v => setTweak('grain', v ? 'on' : 'off')}
        />
      </TweakSection>

      <TweakSection label="Движение">
        <TweakToggle
          label="Анимация orbs"
          value={t.motion === 'on'}
          onChange={v => setTweak('motion', v ? 'on' : 'off')}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

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