/* Tweaks island — applies values onto the vanilla page via CSS vars */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "font": "Inter Tight",
  "grain": 55,
  "motion": 1.15,
  "aiAccent": "#5BE08A"
}/*EDITMODE-END*/;

const FONT_STACKS = {
  "Inter Tight": "'Inter Tight', 'Helvetica Neue', Helvetica, Arial, sans-serif",
  "Archivo": "'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif",
  "Helvetica Neue": "'Helvetica Neue', Helvetica, Arial, sans-serif"
};

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

  React.useEffect(() => {
    const r = document.documentElement.style;
    r.setProperty('--font-display', FONT_STACKS[t.font] || FONT_STACKS["Inter Tight"]);
    r.setProperty('--grain', String((t.grain || 0) / 100));
    r.setProperty('--motion', String(t.motion));
    r.setProperty('--ai-accent', t.aiAccent);
    // lazy-load Archivo if chosen
    if (t.font === 'Archivo' && !document.getElementById('archivo-font')) {
      const l = document.createElement('link');
      l.id = 'archivo-font'; l.rel = 'stylesheet';
      l.href = 'https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&display=swap';
      document.head.appendChild(l);
    }
  }, [t]);

  return (
    <TweaksPanel>
      <TweakSection label="Typografie" />
      <TweakSelect label="Display-Schrift" value={t.font}
        options={["Inter Tight", "Archivo", "Helvetica Neue"]}
        onChange={(v) => setTweak('font', v)} />

      <TweakSection label="Textur & Bewegung" />
      <TweakSlider label="Film-Grain" value={t.grain} min={0} max={100} unit="%"
        onChange={(v) => setTweak('grain', v)} />
      <TweakSlider label="Motion-Stärke" value={t.motion} min={0.5} max={1.6} step={0.05} unit="×"
        onChange={(v) => setTweak('motion', v)} />

      <TweakSection label="KI-Sektion" />
      <TweakColor label="Akzent" value={t.aiAccent}
        options={["#5BE08A", "#EDEDE6", "#E0A35B", "#6FA8FF"]}
        onChange={(v) => setTweak('aiAccent', v)} />
    </TweaksPanel>
  );
}

(function mount() {
  const el = document.getElementById('tweaks-root');
  if (el) ReactDOM.createRoot(el).render(<TweaksApp />);
})();