/* App.jsx — routing, scroll state, tweaks, assembly */

const KG_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "kenburns",
  "menuVariant": "tiefblau"
}/*EDITMODE-END*/;

function ScrollTop({ page }) {
  React.useEffect(() => { window.scrollTo({ top: 0, behavior: 'auto' }); }, [page]);
  return null;
}

function App() {
  const [t, setTweak] = useTweaks(KG_TWEAK_DEFAULTS);
  const [page, setPage] = React.useState('Home');
  const [menuOpen, setMenuOpen] = React.useState(false);
  const [scrollY, setScrollY] = React.useState(0);
  const pendingAnchor = React.useRef(null);

  React.useEffect(() => {
    let raf = null;
    const onScroll = () => { if (raf) return; raf = requestAnimationFrame(() => { setScrollY(window.scrollY); raf = null; }); };
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const nav = (target, anchor) => {
    const map = { Home: 'Home', Dienstleistungen: 'Dienstleistungen', Unternehmen: 'Unternehmen', Umbauten: 'Umbauten', Kontakt: 'Kontakt', Offerte: 'Offerte' };
    const next = map[target] || 'Home';
    pendingAnchor.current = anchor || null;
    setMenuOpen(false);
    if (next === page) {
      // same page: just scroll (to anchor or top)
      scrollToAnchor(anchor);
    } else {
      setPage(next);
    }
  };

  const scrollToAnchor = (anchor) => {
    if (!anchor) { window.scrollTo({ top: 0, behavior: 'smooth' }); return; }
    requestAnimationFrame(() => requestAnimationFrame(() => {
      const el = document.getElementById(anchor);
      if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 70, behavior: 'smooth' });
    }));
  };

  React.useEffect(() => {
    if (pendingAnchor.current) {
      const a = pendingAnchor.current; pendingAnchor.current = null;
      setTimeout(() => scrollToAnchor(a), 80);
    }
  }, [page]);

  // re-render lucide icons whenever the page changes
  React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); }, [page]);

  return (
    <div className="kg">
      {page !== 'Home' && <ScrollTop page={page} />}

      <Header onNav={nav} onOpenMenu={() => setMenuOpen(true)} menuOpen={menuOpen} />
      <FullscreenMenu open={menuOpen} onClose={() => setMenuOpen(false)} onNav={nav} active={page} variant={t.menuVariant} />

      <main>
        {page === 'Home' && (
          <React.Fragment>
            <Hero onNav={nav} variant={t.heroVariant} scrollY={scrollY} />
            <Services onNav={nav} />
            <WhyUs onNav={nav} />
            <Facts />
            <References />
            <CtaBanner onNav={nav} />
          </React.Fragment>
        )}
        {page === 'Dienstleistungen' && <Dienstleistungen onNav={nav} scrollY={scrollY} />}
        {page === 'Unternehmen' && <Unternehmen onNav={nav} scrollY={scrollY} />}
        {page === 'Umbauten' && <Umbauten onNav={nav} scrollY={scrollY} />}
        {page === 'Offerte' && <Offerte scrollY={scrollY} />}
        {page === 'Kontakt' && <Kontakt scrollY={scrollY} />}
      </main>

      <Footer onNav={nav} />

      <TweaksPanel>
        <TweakSection label="Hero" />
        <TweakSelect label="Hero-Stil" value={t.heroVariant}
          options={[{ value: 'kenburns', label: 'Vollbild Ken-Burns' }, { value: 'split', label: 'Split: Foto + Typo' }, { value: 'minimal', label: 'Minimal / Weissraum' }]}
          onChange={v => setTweak('heroVariant', v)} />
        <TweakSection label="Fullscreen-Menü" />
        <TweakSelect label="Menü-Stil" value={t.menuVariant}
          options={[{ value: 'tiefblau', label: 'Tiefblau' }, { value: 'bild', label: 'Bild-Vorschau' }, { value: 'hell', label: 'Hell / Minimal' }]}
          onChange={v => setTweak('menuVariant', v)} />
        <div style={{ fontSize: 12, color: 'var(--kg-slate-500)', padding: '10px 2px 0', lineHeight: 1.5 }}>
          Tipp: «Menü» oben rechts öffnet das Fullscreen-Menü. Bei «Dienstleistungen» öffnet sich das seitliche Submenü.
        </div>
      </TweaksPanel>
    </div>
  );
}

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