// Main App — routing logic (History API, clean URLs)
function parsePath(pathname) {
  const path = pathname.replace(/^\/+|\/+$/g, "");
  if (!path) return { page: "home", gameId: null };
  const parts = path.split("/");
  if (parts[0] === "game" && parts[1]) {
    if (parts[2] === "demo") return { page: "game-demo", gameId: parts[1] };
    return { page: "game", gameId: parts[1] };
  }
  return { page: parts[0], gameId: null };
}

function routeToPath(page, id) {
  if (page === "home") return "/";
  if (page === "game" && id) return `/game/${id}`;
  if (page === "game-demo" && id) return `/game/${id}/demo`;
  return `/${page}`;
}

function App() {
  const [route, setRoute] = React.useState(() => parsePath(window.location.pathname));

  React.useEffect(() => {
    const onPop = () => setRoute(parsePath(window.location.pathname));
    window.addEventListener("popstate", onPop);
    return () => window.removeEventListener("popstate", onPop);
  }, []);

  const navigate = (page, id) => {
    const path = routeToPath(page, id);
    if (path !== window.location.pathname) {
      window.history.pushState({}, "", path);
    }
    window.scrollTo({ top: 0, behavior: "smooth" });
    setRoute({ page, gameId: id || null });
  };

  const renderPage = () => {
    switch (route.page) {
      case "home":    return <HomePage navigate={navigate} />;
      case "games":   return <GamesPage navigate={navigate} />;
      case "game":      return <GameDetailPage gameId={route.gameId} navigate={navigate} />;
      case "game-demo": return <GameDemoPage gameId={route.gameId} navigate={navigate} />;
      case "privacy": return <PrivacyPage />;
      case "terms":   return <TermsPage />;
      case "contact": return <ContactPage />;
      default:        return <HomePage navigate={navigate} />;
    }
  };

  return (
    <div style={{ minHeight: "100vh", background: "oklch(9% 0.012 260)", color: "#fff" }}>
      <Nav currentPage={route.page} navigate={navigate} />
      <main>{renderPage()}</main>
      <Footer navigate={navigate} />
    </div>
  );
}

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