// app.jsx — Zusammensetzung aller Module

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#ff4b1f",
  "bgTone": "warm",
  "motionIntensity": "hoch",
  "showCursor": true,
  "showNoise": true,
  "showGrid": true,
  "tickerSpeed": 40
}/*EDITMODE-END*/;

const BG_TONES = {
  warm:     { bg: '#ecebe6', bg2: '#e2e0d9', fg: '#0e0d0a' },
  neutral:  { bg: '#eeeeea', bg2: '#e4e4df', fg: '#111111' },
  cool:     { bg: '#e9ebee', bg2: '#e0e3e7', fg: '#0a0d0f' },
  dark:     { bg: '#0e0d0a', bg2: '#16150f', fg: '#ecebe6' },
};

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [active, setActive] = React.useState(0);

  // Apply tweaks to :root
  React.useEffect(() => {
    const root = document.documentElement;
    const tone = BG_TONES[t.bgTone] || BG_TONES.warm;
    root.style.setProperty('--bg', tone.bg);
    root.style.setProperty('--bg-2', tone.bg2);
    root.style.setProperty('--fg', tone.fg);
    root.style.setProperty('--accent', t.accent);
    // auch die transparenten Derivate aktualisieren
    const hex = tone.fg.replace('#', '');
    const r = parseInt(hex.substring(0,2),16);
    const g = parseInt(hex.substring(2,4),16);
    const b = parseInt(hex.substring(4,6),16);
    root.style.setProperty('--fg-soft',  `rgba(${r},${g},${b},0.58)`);
    root.style.setProperty('--fg-mute',  `rgba(${r},${g},${b},0.35)`);
    root.style.setProperty('--line',     `rgba(${r},${g},${b},0.14)`);
    root.style.setProperty('--line-soft',`rgba(${r},${g},${b},0.07)`);
    document.body.dataset.motion = t.motionIntensity;
  }, [t.accent, t.bgTone, t.motionIntensity]);

  return (
    <>
      {t.showGrid  && <div className="grid-bg" />}
      {t.showNoise && <div className="noise" />}
      {t.showCursor && <Cursor accent={t.accent} />}

      <TopBar active={active} onJump={setActive} accent={t.accent} />

      <Intro accent={t.accent} />

      <section className="wheel-stage" id="skills" data-hover>
        <Wheel active={active} setActive={setActive}
               intensity={t.motionIntensity} accent={t.accent} />
        <Detail active={active} accent={t.accent} />
      </section>

      <Marquee items={['Webdesign','Programmierung','Videoschnitt','Grafik Design','Motion Graphics']}
               speed={t.tickerSpeed} />

      <Process accent={t.accent} />
      <WhyMe />
      <BigCTA accent={t.accent} />
      <LegalSection />

      <BottomBar active={active} accent={t.accent} />
      <CookieBanner accent={t.accent} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Farbe" />
        <TweakColor  label="Akzent"       value={t.accent}
                     onChange={(v) => setTweak('accent', v)} />
        <TweakRadio  label="Hintergrund"  value={t.bgTone}
                     options={['warm','neutral','cool','dark']}
                     onChange={(v) => setTweak('bgTone', v)} />

        <TweakSection label="Motion" />
        <TweakRadio  label="Intensität"   value={t.motionIntensity}
                     options={['subtil','mittel','hoch']}
                     onChange={(v) => setTweak('motionIntensity', v)} />
        <TweakSlider label="Ticker-Speed" value={t.tickerSpeed}
                     min={10} max={90} step={1} unit="s"
                     onChange={(v) => setTweak('tickerSpeed', v)} />

        <TweakSection label="Overlays" />
        <TweakToggle label="Custom Cursor" value={t.showCursor}
                     onChange={(v) => setTweak('showCursor', v)} />
        <TweakToggle label="Film-Grain"    value={t.showNoise}
                     onChange={(v) => setTweak('showNoise', v)} />
        <TweakToggle label="Grid-Linien"   value={t.showGrid}
                     onChange={(v) => setTweak('showGrid', v)} />
      </TweaksPanel>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);