// ============================================================
// FORME AESTHETICS — App shell & router
// ============================================================
const { useState: useSt, useEffect: useEf } = React;

function App() {
  const path = useHashRoute();
  const [mobileOpen, setMobileOpen] = useSt(false);

  // close mobile menu on route change
  useEf(() => { setMobileOpen(false); }, [path]);

  let Page;
  switch (path) {
    case '/services': Page = Services; break;
    case '/about':    Page = About; break;
    case '/gallery':  Page = Gallery; break;
    case '/contact':  Page = Contact; break;
    case '/faq':      Page = FAQPage; break;
    case '/book':     Page = Book; break;
    case '/':
    default:          Page = Home;
  }

  return (
    <React.Fragment>
      <Nav path={path} onOpenMobile={() => setMobileOpen(true)} />
      <MobileOverlay open={mobileOpen} onClose={() => setMobileOpen(false)} />
      <main key={path}>
        <Page />
      </main>
      <Footer />
    </React.Fragment>
  );
}

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