/* global React, ReactDOM,
   TopNav, Hero, Marquee, About, Services, Packages, Contact, Footer,
   useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakSlider, TweakColor, TweakToggle, TweakSelect
*/

const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "hero": "editorial",
  "spotlight": "#F9EFA0",
  "accentExec": "#C9D6E8",
  "headlineScale": 1,
  "showMarquee": true,
  "denseServices": false
}/*EDITMODE-END*/;

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

  // Apply live tokens so any component using the CSS vars updates instantly
  useEffect(() => {
    const r = document.documentElement;
    r.style.setProperty('--blue', t.accentExec);
    r.style.setProperty('--yellow', t.spotlight);
  }, [t.accentExec, t.spotlight]);

  // Langsames, weiches Scrollen für Anker-Links
  useEffect(() => {
    const onClick = (e) => {
      const link = e.target.closest && e.target.closest('a[href^="#"]');
      if (!link) return;
      const id = link.getAttribute('href').slice(1);
      if (!id) return;
      if (id === 'impressum' || id === 'datenschutz') return;
      const el = document.getElementById(id);
      if (!el) return;
      e.preventDefault();
      const startY = window.scrollY;
      const nav = document.querySelector('header');
      let offset = nav ? nav.getBoundingClientRect().height : 72;
      let anchorEl = el;
      if (id === 'ueber-mich') {
        // Ziel: Banner-Oberkante direkt unter der Nav, kein Hero-Blau sichtbar
        const marquee = document.querySelector('.marquee');
        if (marquee) anchorEl = marquee;
      }
      const targetY = anchorEl.getBoundingClientRect().top + startY - offset;
      const dist = targetY - startY;
      const dur = Math.min(1600, Math.max(900, Math.abs(dist) * 0.45));
      const t0 = performance.now();
      const ease = (x) => x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2;
      const step = (now) => {
        const p = Math.min(1, (now - t0) / dur);
        window.scrollTo(0, startY + dist * ease(p));
        if (p < 1) requestAnimationFrame(step);
      };
      requestAnimationFrame(step);
    };
    document.addEventListener('click', onClick);
    return () => document.removeEventListener('click', onClick);
  }, []);

  return (
    <div style={{ fontSize: `${16 * t.headlineScale}px` }}>
      <TopNav />
      <main style={{
        // headline scale via wrapper so it cascades through em-based sizing
        '--scale': t.headlineScale,
      }}>
        <div style={{ fontSize: `${t.headlineScale}em` }}>
          <Hero variant={t.hero} />
        </div>
        {t.showMarquee && <Marquee />}
        <About />
        <Services dense={t.denseServices} />
        <Packages />
        <Contact />
      </main>
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Hero-Layout" />
        <TweakSelect label="Variante" value={t.hero}
          options={[
            { value: 'split',     label: 'A · Split mit Portrait' },
            { value: 'editorial', label: 'B · Editorial / Typografie' },
            { value: 'magazine',  label: 'C · Magazin / Zitat' },
          ]}
          onChange={(v) => setTweak('hero', v)} />

        <TweakSection label="Akzente" />
        <TweakColor label="Hauptakzent" value={t.accentExec}
          options={['#C9D6E8', '#D6E0EE', '#B5C0D8', '#D7C9E0']}
          onChange={(v) => setTweak('accentExec', v)} />
        <TweakColor label="Spotlight" value={t.spotlight}
          options={['#F9EFA0', '#FFD66B', '#B5C0D8', '#F5C4A1']}
          onChange={(v) => setTweak('spotlight', v)} />

        <TweakSection label="Layout" />
        <TweakToggle label="Marquee-Band zeigen" value={t.showMarquee}
          onChange={(v) => setTweak('showMarquee', v)} />
        <TweakSlider label="Headline-Skala" value={t.headlineScale}
          min={0.85} max={1.2} step={0.05} unit="×"
          onChange={(v) => setTweak('headlineScale', v)} />
      </TweaksPanel>
    </div>
  );
}

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