// App.jsx — Hash-based router + scroll-to-top on nav
function App() {
  const [page, setPage] = React.useState(() => {
    const h = (window.location.hash || '').replace('#', '');
    return ['home','servizi','chi-siamo','prodotti','recensioni','contatti'].includes(h) ? h : 'home';
  });

  const navigate = (id) => {
    setPage(id);
    if (id === 'home') {
      history.replaceState(null, '', '#home');
    } else {
      window.location.hash = id;
    }
    requestAnimationFrame(() => window.scrollTo({ top: 0, behavior: 'instant' }));
  };

  React.useEffect(() => {
    const onHash = () => {
      const h = (window.location.hash || '').replace('#', '');
      if (['home','servizi','chi-siamo','prodotti','recensioni','contatti'].includes(h)) {
        setPage(h);
        window.scrollTo({ top: 0, behavior: 'instant' });
      }
    };
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  let Page = HomePage;
  if (page === 'servizi') Page = ServicesPage;
  else if (page === 'chi-siamo') Page = AboutPage;
  else if (page === 'prodotti') Page = ProductsPage;
  else if (page === 'recensioni') Page = ReviewsPage;
  else if (page === 'contatti') Page = ContactPage;

  return (
    <div style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column' }}>
      <NavBar page={page} onNavigate={navigate} />
      <div data-screen-label={page} style={{ flex: 1 }}>
        <Page onNavigate={navigate} />
      </div>
      <Footer onNavigate={navigate} />
    </div>
  );
}

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