// App entry — routage par état

const { useState: useStateApp, useEffect: useEffectApp } = React;

const App = () => {
  const [page, setPage] = useStateApp('home');
  const [anchor, setAnchor] = useStateApp(null);

  const go = (p, sectionAnchor) => {
    setAnchor(sectionAnchor || null);
    setPage(p);
    if (!sectionAnchor) window.scrollTo({ top: 0, behavior: 'instant' });
  };

  // After page renders, scroll to anchor if provided
  useEffectApp(() => {
    if (!anchor) return;
    const el = document.getElementById(anchor);
    if (el) {
      const header = document.querySelector('.header');
      const offset = header ? header.offsetHeight + 24 : 80;
      const top = el.getBoundingClientRect().top + window.scrollY - offset;
      window.scrollTo({ top, behavior: 'smooth' });
    }
    setAnchor(null);
  }, [page, anchor]);

  // re-trigger Reveal observers on page change by remounting (key)
  return (
    <>
      <Header page={page} go={go} solid={page !== 'home'} />
      <main key={page}>
        {page === 'home' && <Home go={go} />}
        {page === 'metiers' && <Metiers go={go} />}
        {page === 'realisations' && <Realisations go={go} />}
        {page === 'reseau' && <Reseau go={go} />}
        {page === 'contact' && <Contact go={go} />}
      </main>
      <Footer go={go} />
    </>);

};

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