/* Tweaks panel for the Luder site — mounts its own React root,
   applies changes to the vanilla DOM via window.applyLuderTweaks. */
const { useEffect } = React;

const LUDER_DEFAULTS = /*EDITMODE-BEGIN*/{
  "hero": "light",
  "accent": "#c93c3c",
  "headingFont": "Saira",
  "motif": 1
}/*EDITMODE-END*/;

function LuderTweaks(){
  const [t, setTweak] = useTweaks(LUDER_DEFAULTS);

  useEffect(() => { window.applyLuderTweaks && window.applyLuderTweaks(t); }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Layout-Richtung" />
      <TweakRadio label="Hero" value={t.hero}
        options={[
          {value:'cinematic', label:'Kino-Dunkel'},
          {value:'split',     label:'Editorial'},
          {value:'light',     label:'Blueprint hell'}
        ]}
        onChange={(v) => setTweak('hero', v)} />

      <TweakSection label="Marke" />
      <TweakColor label="Akzentfarbe" value={t.accent}
        options={['#c93c3c','#4a4a4a','#3cc994','#1f2937']}
        onChange={(v) => setTweak('accent', v)} />
      <TweakSlider label="Linien-Motiv" value={t.motif} min={0} max={1.4} step={0.1}
        onChange={(v) => setTweak('motif', v)} />

      <TweakSection label="Typografie" />
      <TweakSelect label="Überschriften" value={t.headingFont}
        options={['Saira','Sora','Archivo','Hanken Grotesk']}
        onChange={(v) => setTweak('headingFont', v)} />
    </TweaksPanel>
  );
}

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