// App with hash routing
const App = () => {
  const route = useHashRoute();
  const page = (() => {
    switch (route) {
      case "/": return <Home/>;
      case "/our-craft": return <OurCraft/>;
      case "/behind-the-frame": return <BehindTheFrame/>;
      case "/reviews": return <Reviews/>;
      case "/get-in-touch":
      case "/visit":
        return <GetInTouch/>;
      default:
        // support hashes with anchors like /our-craft#photography
        if (route.startsWith("/our-craft")) return <OurCraft/>;
        return <Home/>;
    }
  })();
  return (
    <>
      <Navbar/>
      {page}
      <Footer/>
    </>
  );
};

// Handle anchor scroll after hash route change (no scrollIntoView)
const scrollToAnchor = (id) => {
  const el = document.getElementById(id);
  if (!el) return;
  const rect = el.getBoundingClientRect();
  const y = window.scrollY + rect.top - 110;
  window.scrollTo({ top: y, behavior: "smooth" });
};
window.addEventListener("hashchange", () => {
  const h = window.location.hash;
  if (h.includes("#") && h.slice(1).includes("#")) {
    const parts = h.slice(1).split("#");
    const id = parts[1];
    setTimeout(() => scrollToAnchor(id), 350);
  }
});

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