// Router + app shell
const { StagingBanner, Header, Footer, ServiceAreaMap } = window.AMSChrome;

function useHashRoute() {
  const [route, setRoute] = React.useState(() => parseHash());
  React.useEffect(() => {
    function onHash() { setRoute(parseHash()); window.scrollTo({top: 0, behavior: "instant"}); }
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);
  return route;
}

function parseHash() {
  const h = window.location.hash || "#/";
  const m = h.match(/^#\/?([^?]*)/);
  return (m && m[1]) || "";
}

function App() {
  const route = useHashRoute();

  let Page = window.HomePage;
  if (route === "about") Page = window.AboutPage;
  else if (route === "solar-installation") Page = window.SolarInstallPage;
  else if (route === "solar-cleaning") Page = window.SolarCleaningPage;
  else if (route === "roofing") Page = window.RoofingPage;
  else if (route === "maintenance") Page = window.MaintenancePage;
  else if (route === "contact") Page = window.ContactPage;

  return (
    <div className="ams-shell">
      <Header route={route} />
      <Page />
      <ServiceAreaMap />
      <Footer />
    </div>
  );
}

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