/* global React, ReactDOM, Home, Work, Materials, MaterialColours, Quotes, FAQ, Story, Booking, Nav, Footer */

function App() {
  const getRoute = () => {
    const h = window.location.hash.replace(/^#\//, "");
    return h || "home";
  };
  const [route, setRoute] = React.useState(getRoute);

  React.useEffect(() => {
    const onHash = () => setRoute(getRoute());
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  const navigate = (r) => {
    window.location.hash = "#/" + (r === "home" ? "" : r);
    setRoute(r);
    window.scrollTo({top: 0, behavior: "instant"});
  };

  // Support nested routes like "materials/quartz" → base "materials", sub "quartz"
  const [base, sub] = route.split("/");

  // Pages
  let page;
  let screenLabel = "01 Home";
  // Pages that have a LIGHT hero need the nav to render solid-navy from the top
  let forceSolid = false;
  if (base === "work") { page = <Work navigate={navigate} />; screenLabel = "02 Work"; }
  else if (base === "materials") {
    page = sub
      ? <MaterialColours materialId={sub} navigate={navigate} />
      : <Materials navigate={navigate} />;
    screenLabel = "03 Materials"; forceSolid = true;
  }
  else if (base === "quotes") { page = <Quotes navigate={navigate} />; screenLabel = "04 Quotes"; forceSolid = true; }
  else if (base === "faq") { page = <FAQ navigate={navigate} />; screenLabel = "05 FAQ"; }
  else if (base === "story") { page = <Story navigate={navigate} />; screenLabel = "06 Our Story"; }
  else if (base === "booking") { page = <Booking navigate={navigate} />; screenLabel = "07 Book a Visit"; }
  else { page = <Home navigate={navigate} />; }

  return (
    <div data-screen-label={screenLabel}>
      <Nav route={base} navigate={navigate} forceSolid={forceSolid} />
      <main key={route}>{page}</main>
      <Footer navigate={navigate} />
    </div>
  );
}

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