/* ============================================================
   APP — routing, home-direction switch, nav state
   ============================================================ */
const { useState, useEffect } = React;

function App() {
  const [page, setPage] = useState('home');
  const [atTop, setAtTop] = useState(true);

  const go = (p) => {
    setPage(p);
    window.scrollTo({ top: 0, behavior: 'auto' });
  };

  useEffect(() => {
    const onScroll = () => setAtTop(window.scrollY < 480);
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  // nav sits on the dark Sanctuary hero only while at the very top
  const navDark = page === 'home' && atTop;

  let view;
  if (page === 'home') view = <HomeSanctuary go={go} />;
  else if (page === 'about') view = <About go={go} />;
  else if (page === 'products') view = <Products go={go} />;
  else if (page === 'book') view = <Services go={go} />;
  else if (page === 'gallery') view = <Gallery go={go} />;
  else if (page === 'contact') view = <Contact go={go} />;

  return (
    <React.Fragment>
      <Nav page={page} go={go} onDark={navDark} />
      <main key={page}>{view}</main>
      <Footer go={go} />
    </React.Fragment>
  );
}

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