// App — hash router + page mounter. Loads after all components.

const PAGES = {
  Home: PageHome,
  Nodes: PageNodes,
  Network: PageNetwork,
  About: PageAbout,
  Specs: PageSpecs,
  Financials: PageFinancials,
  Waitlist: PageWaitlist,
  Contact: PageContact,
  Privacy: PagePrivacy,
  Terms: PageTerms,
};

const SLUG_TO_PAGE = {
  home: "Home",
  nodes: "Nodes",
  network: "Network",
  about: "About",
  specs: "Specs",
  financials: "Financials",
  waitlist: "Waitlist",
  contact: "Contact",
  privacy: "Privacy",
  terms: "Terms",
};

const pageFromHash = () => {
  const slug = (window.location.hash || "").replace(/^#\/?/, "").toLowerCase();
  return SLUG_TO_PAGE[slug] || "Home";
};

const App = () => {
  const [page, setPage] = React.useState(pageFromHash);
  const [prefill, setPrefill] = React.useState({});

  // Listen for back/forward
  React.useEffect(() => {
    const onHash = () => {
      setPage(pageFromHash());
      window.scrollTo({ top: 0, behavior: "instant" });
    };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  const go = (next, payload) => {
    if (payload) setPrefill(payload);
    else if (next !== "Waitlist") setPrefill({});
    if (next === page) {
      window.scrollTo({ top: 0, behavior: "smooth" });
      return;
    }
    window.location.hash = `#/${next.toLowerCase()}`;
    setPage(next);
    window.scrollTo({ top: 0, behavior: "instant" });
  };

  const Page = PAGES[page] || PageHome;
  const screenLabel = `${Object.keys(SLUG_TO_PAGE).indexOf(page.toLowerCase()) + 1 || 1}-${page}`;

  return (
    <>
      <Nav active={page} onNav={go} />
      <main className="pyrra-page" key={page} data-screen-label={screenLabel}>
        <Page go={go} prefill={prefill} />
      </main>
      <Footer onNav={go} />
    </>
  );
};

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