const { useState: useStateApp, useEffect: useEffectApp } = React;

function readInitialRoute() {
  if (typeof window === "undefined") return { route: "home", sessionId: null, canceled: false };
  const path = window.location.pathname.replace(/\/+$/, "");
  const params = new URLSearchParams(window.location.search);
  const sessionId = params.get("session_id");
  const canceled = params.get("canceled") === "true";

  if (path === "/signup/success" || sessionId) return { route: "signup-success", sessionId, canceled: false };
  if (path === "/signup")                       return { route: "signup", sessionId: null, canceled };

  // Fall back to whatever route the user was on last (only persisted for home/signup).
  let stored = null;
  try { stored = localStorage.getItem("so_route_v2"); } catch (_) {}
  if (stored === "signup") return { route: "signup", sessionId: null, canceled: false };
  return { route: "home", sessionId: null, canceled: false };
}

const ROUTE_PATHS = { home: "/", signup: "/signup", "signup-success": "/signup/success" };

function App() {
  const initial = readInitialRoute();
  const [route, setRouteState] = useStateApp(initial.route);
  const [sessionId, setSessionId] = useStateApp(initial.sessionId);
  const [canceled, setCanceled] = useStateApp(initial.canceled);

  const setRoute = (next) => {
    setRouteState(next);
    if (next !== "signup-success") setSessionId(null);
    if (next !== "signup") setCanceled(false);
    const targetPath = ROUTE_PATHS[next] || "/";
    if (window.location.pathname !== targetPath || window.location.search) {
      window.history.pushState({}, "", targetPath);
    }
  };

  useEffectApp(() => {
    // Only persist routes the user is meaningfully "on" — never persist success.
    try {
      if (route === "signup-success") return;
      localStorage.setItem("so_route_v2", route);
    } catch (_) {}
  }, [route]);

  useEffectApp(() => {
    const onPop = () => {
      const r = readInitialRoute();
      setRouteState(r.route);
      setSessionId(r.sessionId);
      setCanceled(r.canceled);
    };
    window.addEventListener("popstate", onPop);
    return () => window.removeEventListener("popstate", onPop);
  }, []);

  let screenLabel = "Home";
  if (route === "signup") screenLabel = "Signup";
  else if (route === "signup-success") screenLabel = "Welcome";

  return (
    <div data-screen-label={screenLabel}>
      {route === "home" && (
        <>
          <Nav route={route} setRoute={setRoute}/>
          <Hero setRoute={setRoute}/>
          <PainPoints/>
          <WhatWeMake/>
          <WhoItsFor/>
          <Savings/>
          <TheOrchard/>
          <HowItWorks setRoute={setRoute}/>
          <FAQ/>
          <FinalCTA setRoute={setRoute}/>
          <Footer setRoute={setRoute}/>
        </>
      )}
      {route === "signup" && <SignupPage setRoute={setRoute} canceled={canceled}/>}
      {route === "signup-success" && <SuccessPage setRoute={setRoute} sessionId={sessionId}/>}
    </div>
  );
}

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