// FullInfill — Tweaks panel
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "auto",
  "accentHue": 290,
  "motion": 1.0,
  "heroVariant": "A",
  "showcaseLayout": "split",
  "scrollDamp": 1,
  "bgGyroid": true
}/*EDITMODE-END*/;

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

  React.useEffect(() => {
    if (t.theme === 'light' || t.theme === 'dark') window.__fiSetTheme && window.__fiSetTheme(t.theme);
  }, [t.theme]);
  React.useEffect(() => { window.__fiSetAccent && window.__fiSetAccent(t.accentHue); }, [t.accentHue]);
  React.useEffect(() => { window.__fiSetMotion && window.__fiSetMotion(t.motion); }, [t.motion]);
  React.useEffect(() => { window.__fiSetHeroVariant && window.__fiSetHeroVariant(t.heroVariant); }, [t.heroVariant]);
  React.useEffect(() => { window.__fiSetShowcaseLayout && window.__fiSetShowcaseLayout(t.showcaseLayout); }, [t.showcaseLayout]);
  React.useEffect(() => { window.__fiSetScrollDamp && window.__fiSetScrollDamp(t.scrollDamp); }, [t.scrollDamp]);
  React.useEffect(() => { window.__fiSetBgVisible && window.__fiSetBgVisible(!!t.bgGyroid); }, [t.bgGyroid]);

  return (
    <TweaksPanel>
      <TweakSection label="Theme" />
      <TweakRadio label="Mode" value={t.theme === 'auto' ? 'auto' : t.theme}
        options={['auto','light','dark']}
        onChange={(v) => {
          setTweak('theme', v);
          if (v !== 'auto') window.__fiSetTheme && window.__fiSetTheme(v);
        }} />
      <TweakSlider label="Accent hue" value={t.accentHue} min={0} max={360} step={5} unit="°"
        onChange={(v) => setTweak('accentHue', v)} />
      <TweakToggle label="Background gyroid" value={t.bgGyroid}
        onChange={(v) => setTweak('bgGyroid', v)} />

      <TweakSection label="Motion" />
      <TweakSlider label="Motion intensity" value={t.motion} min={0} max={2} step={0.1}
        onChange={(v) => setTweak('motion', v)} />
      <TweakSlider label="Scroll damping" value={t.scrollDamp} min={0} max={1} step={0.1}
        onChange={(v) => setTweak('scrollDamp', v)} />

      <TweakSection label="Variants" />
      <TweakRadio label="Hero animation" value={t.heroVariant}
        options={['A','B','C']}
        onChange={(v) => setTweak('heroVariant', v)} />
      <TweakRadio label="Showcase layout" value={t.showcaseLayout}
        options={['split','pinned']}
        onChange={(v) => setTweak('showcaseLayout', v)} />
    </TweaksPanel>
  );
}

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