// app.jsx — router

function App() {
  const parseHash = () => {
    const h = window.location.hash.replace("#", "");
    const [page, section] = h.split("/");
    return { page: page || "top", section: section || "" };
  };
  const [{ page, section }, setRoute] = React.useState(parseHash);

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

  const navigate = (newPage, sectionId) => {
    const target = sectionId ? `#${newPage}/${sectionId}` : `#${newPage}`;
    if (window.location.hash === target) {
      // already there — just scroll
      if (sectionId) document.getElementById(sectionId)?.scrollIntoView({ behavior: "smooth" });
      return;
    }
    window.location.hash = target;
    if (newPage !== page) {
      window.scrollTo({ top: 0, behavior: "instant" });
    }
  };

  React.useEffect(() => {
    if (section) {
      setTimeout(() => {
        document.getElementById(section)?.scrollIntoView({ behavior: "smooth", block: "start" });
      }, 60);
    } else {
      window.scrollTo({ top: 0 });
    }
  }, [page, section]);

  let content;
  if (page === "top") content = <TopPage navigate={navigate} />;
  else if (page === "industries") content = <IndustriesIndexPage navigate={navigate} />;
  else if (page === "about") content = <AboutPage navigate={navigate} />;
  else if (page === "privacy") content = <PrivacyPage navigate={navigate} />;
  else if (page === "legal") content = <LegalPage navigate={navigate} />;
  else if (INDUSTRY_DATA[page]) content = <CaseRoadmapPage id={page} navigate={navigate} />;
  else content = <TopPage navigate={navigate} />;

  return (
    <>
      <Header page={page} navigate={navigate} />
      <main>{content}</main>
      <Footer navigate={navigate} />
    </>
  );
}

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