/* === ROAR app: router + mount === */
const { useState: useStateA, useEffect: useEffectA } = React;

function App() {
  const [route, setRoute] = useStateA({ page: 'home' });
  const [lang, setLang] = useStateA('EN');
  const [drawerOpen, setDrawerOpen] = useStateA(false);

  // RTL toggle
  useEffectA(() => {
    document.documentElement.setAttribute('dir', lang === 'AR' ? 'rtl' : 'ltr');
    document.documentElement.setAttribute('lang', lang.toLowerCase());
  }, [lang]);

  // Scroll to top on route change (except home stays)
  useEffectA(() => {
    if (route.page !== 'project') window.scrollTo({ top: 0, behavior: 'instant' });
  }, [route.page, route.sector]);

  const openEnquiry = () => setDrawerOpen(true);
  const closeEnquiry = () => setDrawerOpen(false);

  let page;
  switch (route.page) {
    case 'projects':
      page = <ProjectsPage setRoute={setRoute} initialSector={route.sector} />;
      break;
    case 'project':
      page = <ProjectDetailPage id={route.id} setRoute={setRoute} openEnquiry={openEnquiry} />;
      break;
    case 'sectors':
      page = <SectorsPage setRoute={setRoute} />;
      break;
    case 'studio':
      page = <StudioPage setRoute={setRoute} openEnquiry={openEnquiry} />;
      break;
    case 'awards':
      page = <AwardsPage setRoute={setRoute} />;
      break;
    case 'contact':
      page = <ContactPage openEnquiry={openEnquiry} />;
      break;
    default:
      page = <HomePage setRoute={setRoute} openEnquiry={openEnquiry} />;
  }

  return (
    <>
      <Nav route={route} setRoute={setRoute} lang={lang} setLang={setLang} openEnquiry={openEnquiry} />
      {page}
      <Footer setRoute={setRoute} openEnquiry={openEnquiry} lang={lang} />
      <EnquiryDrawer open={drawerOpen} onClose={closeEnquiry} />
    </>
  );
}

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