// Main app entry — routes + layout
function App() {
  const { route } = useRoute();

  // Pages map
  const pageMap = {
    home: <HomePage />,
    about: <AboutPage />,
    services: <ServicesPage />,
    asian: <AsianPage />,
    western: <WesternPage />,
    cases: <CasesPage />,
    community: <CommunityPage />,
    contact: <ContactPage />,
  };

  const page = pageMap[route] || <HomePage />;

  // Header mode: dark when on a dark hero, light otherwise.
  // Home, services, western, community = dark hero. Others = light hero.
  const darkHero = ["home", "services", "western", "community"].includes(route);

  return (
    <div data-screen-label={route}>
      <Header mode={darkHero ? "dark" : "light"} />
      <main key={route} className="ewv-route-shell">
        {page}
      </main>
      <Footer bare={route === "home"} />
    </div>
  );
}

// Mount
ReactDOM.createRoot(document.getElementById("root")).render(
  <LangProvider>
    <RouteProvider>
      <App />
    </RouteProvider>
  </LangProvider>
);