/* global React, ReactDOM */
// ============================================
// A_LIZ HAIRDRESSER — App root
// ============================================

const { LangProvider: LP, RouteProvider: RP, useRoute: useRouteApp, Nav: NavApp, Footer: FooterApp, WhatsAppFab: WaApp, Announcement: AnnApp, LoadingCurtain: LCApp, OfferPopup: OPApp, CookieConsent: CookieBannerApp, CustomCursor: CursorApp, ScrollProgress: ScrollBarApp } = window;
const { HomePage: HP, ServicesPage: SP, GalleryPage: GP, AboutPage: AP, ContactPage: CP, PrivacyPage: PP, TermsPage: TP, CookiePage: KP, AppointmentPage: AP2 } = window;

function PageSwitch() {
  const { route } = useRouteApp();
  if (route === "services")    return <SP />;
  if (route === "gallery")     return <GP />;
  if (route === "about")       return <AP />;
  if (route === "contact")     return <CP />;
  if (route === "appointment") return <AP2 />;
  if (route === "privacy")     return <PP />;
  if (route === "terms")       return <TP />;
  if (route === "cookies")     return <KP />;
  return <HP />;
}

// Inner wrapper — reads route inside RouteProvider context
function AppInner() {
  const { route } = useRouteApp();
  return (
    <>
      <CursorApp />
      <ScrollBarApp />
      <LCApp />
      <AnnApp />
      <NavApp />
      <main key={route} className="page-root">
        <PageSwitch />
      </main>
      <FooterApp />
      <WaApp />
      <CookieBannerApp />
    </>
  );
}

function App() {
  return (
    <LP>
      <RP>
        <AppInner />
      </RP>
    </LP>
  );
}

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