// App.jsx — router

function App() {
  const [view, setView] = React.useState(() => {
    const h = (typeof window !== 'undefined' && window.location.hash || '').replace('#', '');
    return ['home','leistungen','ueber','kontakt','impressum'].includes(h) ? h : 'home';
  });

  // Scroll to top + reflect view in hash on view change
  React.useEffect(() => {
    window.scrollTo({ top: 0, behavior: 'instant' });
    if (window.location.hash.replace('#', '') !== view) {
      history.replaceState(null, '', '#' + view);
    }
  }, [view]);

  // Honor back/forward
  React.useEffect(() => {
    const onPop = () => {
      const h = window.location.hash.replace('#', '');
      if (['home','leistungen','ueber','kontakt','impressum'].includes(h)) setView(h);
    };
    window.addEventListener('hashchange', onPop);
    return () => window.removeEventListener('hashchange', onPop);
  }, []);

  return (
    <div data-screen-label={view}>
      <TopNav current={view} onNav={setView} />
      {view === 'home'       && <HomeView       onNav={setView} />}
      {view === 'leistungen' && <LeistungenView onNav={setView} />}
      {view === 'ueber'      && <UeberUnsView   onNav={setView} />}
      {view === 'kontakt'    && <KontaktView    onNav={setView} />}
      {view === 'impressum'  && <ImpressumView  onNav={setView} />}
      <Footer onNav={setView} />
    </div>
  );
}

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