// fello-tweaks-2.jsx — Tweaks island, bridges to window.FELLO.applyTweaks
const FELLO_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "displayFont": "Instrument",
  "accent": "#18B6B0",
  "glassBlur": 26,
  "scrubLength": 400,
  "productColor": "dusty-rose",
  "idleFloat": true,
  "orbitDrift": true
}/*EDITMODE-END*/;

function FelloTweaks() {
  const [t, setTweak] = useTweaks(FELLO_TWEAK_DEFAULTS);

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

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Typografie" />
      <TweakRadio label="Display-Schrift" value={t.displayFont}
        options={['Instrument', 'Fraunces']}
        onChange={(v) => setTweak('displayFont', v)} />

      <TweakSection label="Akzent & Glas" />
      <TweakColor label="Akzentfarbe" value={t.accent}
        options={['#18B6B0', '#0E8C87', '#6E7BE8']}
        onChange={(v) => setTweak('accent', v)} />
      <TweakSlider label="Glass-Blur" value={t.glassBlur} min={8} max={56} step={2} unit="px"
        onChange={(v) => setTweak('glassBlur', v)} />

      <TweakSection label="Produkt" />
      <TweakSelect label="Geräte-Farbe" value={t.productColor}
        options={['dusty-rose', 'coral', 'sky', 'slate']}
        onChange={(v) => setTweak('productColor', v)} />
      <TweakToggle label="Idle-Float" value={t.idleFloat}
        onChange={(v) => setTweak('idleFloat', v)} />

      <TweakSection label="Hero" />
      <TweakSlider label="Scroll-Länge" value={t.scrubLength} min={360} max={760} step={20} unit="vh"
        onChange={(v) => setTweak('scrubLength', v)} />
      <TweakToggle label="Orbit-Drift" value={t.orbitDrift}
        onChange={(v) => setTweak('orbitDrift', v)} />
    </TweaksPanel>
  );
}

(function mountTweaks() {
  const el = document.createElement('div');
  el.id = 'fello-tweaks-root';
  document.body.appendChild(el);
  ReactDOM.createRoot(el).render(<FelloTweaks />);
})();