// app.jsx, hash router + App shell + mount
const { useState: useStateApp, useEffect: useEffectApp } = React;

function useHashRoute() {
  const [route, setRoute] = useStateApp(() => {
    const h = typeof window !== "undefined" ? window.location.hash.replace(/^#/, "") : "";
    return h || "/";
  });
  useEffectApp(() => {
    const onHash = () => {
      const h = window.location.hash.replace(/^#/, "") || "/";
      setRoute(h);
      window.scrollTo({ top: 0, behavior: "instant" });
    };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);
  return route;
}

const routes = {
  "/": window.HomePage,
  "/about": window.AboutPage,
  "/certifications": window.CertificationsPage,
  "/safety": window.SafetyDivisionPage,
  "/safety/ppe": window.PpePage,
  "/safety/footwear": window.FootwearPage,
  "/safety/workwear": window.WorkwearPage,
  "/safety/fall-protection": window.FallProtectionPage,
  "/welding": window.WeldingDivisionPage,
  "/welding/machines": window.WeldingMachinesPage,
  "/welding/cutting": window.CuttingPrepPage,
  "/welding/automation": window.AutomationPage,
  "/welding/quality-control": window.QualityControlPage,
  "/services": window.ServicesPage,
  "/products": window.AllProductsPage,
  "/brands": window.BrandsPage,
  "/news": window.NewsPage,
  "/contact": window.ContactPage,
  "/thank-you": window.ThankYouPage,
  "/privacy": window.PrivacyPage,
};

function App() {
  const route = useHashRoute();
  let Page = routes[route];
  if (!Page && route.startsWith("/products")) Page = window.AllProductsPage;
  if (!Page && route.startsWith("/product/")) Page = window.ProductDetailPage;
  Page = Page ?? window.NotFoundPage;
  return (
    <div className="min-h-screen w-full bg-white text-[#0A1628] antialiased">
      <window.SiteHeader />
      <main>
        <Page key={route} />
      </main>
      <window.SiteFooter />
    </div>
  );
}

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