const { useState: useStateA, useEffect: useEffectA } = React;

function HomeContent() {
  return (
    <>
      <HomeIntro />
      <StatsBar />
      <PullQuote />
      <QuickLinks />
      <HomeContactTeaser />
    </>
  );
}

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const theme = THEMES[tweaks.theme] || THEMES.prestige;
  const hash = useHash();

  useEffectA(() => {
    document.body.style.background = theme.bg;
    document.body.style.transition = 'background 0.5s ease';
  }, [theme]);

  const isHome = hash === 'home' || !hash;

  const renderPage = () => {
    if (hash.startsWith('wohnung-')) {
      return <WohnungDetailPage wohnungKey={hash.replace('wohnung-', '')} />;
    }
    switch (hash) {
      case 'gemeinde': return <GemeindePage />;
      case 'projekt': return <ProjektPage />;
      case 'projekt-umgebung': return <UmgebungPage />;
      case 'projekt-untergeschoss': return <UntergeschossPage />;
      case 'wohnungen': return <WohnungenPage />;
      case 'baubeschrieb': return <BaubeschriebPage />;
      case 'innenausbau': return <InnenausbauPage />;
      case 'projektablauf': return <ProjektablaufPage />;
      case 'kontakt': return <KontaktPage />;
      case 'referenzen': return <ReferenzenPage />;
      default: return <HomeContent />;
    }
  };

  return (
    <ThemeContext.Provider value={theme}>
      <div key={hashGroup(hash)} style={{
        background: theme.bg, color: theme.text, minHeight: '100vh',
        transition: 'background 0.5s ease, color 0.5s ease',
        animation: 'pageFade 0.5s ease',
        position: 'relative',
      }}>
        <Navigation transparent={isHome} />
        <ScrollProgress />

        {/* Fixed cinematic hero (home only) — stays in viewport while content slides up */}
        {isHome && (
          <div style={{
            position: 'fixed',
            top: 0, left: 0, right: 0,
            height: '100vh',
            zIndex: 0,
          }}>
            <HeroSection />
          </div>
        )}
        {isHome && <div style={{ height: '100vh' }} aria-hidden="true" />}

        {/* Content curtain — slides over hero on home, plain wrapper elsewhere */}
        <div style={{
          position: 'relative',
          zIndex: 1,
          background: theme.bg,
          ...(isHome ? {
            borderTopLeftRadius: 'clamp(28px, 4vw, 56px)',
            borderTopRightRadius: 'clamp(28px, 4vw, 56px)',
            boxShadow: '0 -30px 80px rgba(0,0,0,0.22)',
            willChange: 'transform',
          } : {}),
        }}>
          {renderPage()}
          <FooterSection />
        </div>

        <NextPageButton />
      </div>

      <TweaksPanel>
        <TweakSection label="Design-Richtung">
          <TweakRadio
            label="Stil"
            value={tweaks.theme}
            options={[
              { value: 'architektur', label: 'Architektur' },
              { value: 'prestige', label: 'Prestige' },
              { value: 'natur', label: 'Natur' },
            ]}
            onChange={v => setTweak('theme', v)}
          />
        </TweakSection>
      </TweaksPanel>
    </ThemeContext.Provider>
  );
}

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

requestAnimationFrame(() => {
  const loader = document.getElementById('loader');
  if (!loader) return;
  const minVisibleMs = 1800;
  const elapsed = performance.now();
  const wait = Math.max(0, minVisibleMs - elapsed);
  setTimeout(() => {
    loader.classList.add('is-out');
    document.documentElement.style.overflow = '';
    window.scrollTo({ top: 0, behavior: 'instant' });
    setTimeout(() => loader.remove(), 800);
  }, wait);
});