/* Root — simple route-state switcher */
const { useState: useStateA, useEffect: useEffectA } = React;

function App() {
  const [route, setRoute] = useStateA(() => {
    try { return localStorage.getItem("ss_route") || "landing"; } catch { return "landing"; }
  });
  const [state, setState] = useStateA({
    address: "1423 N Oliver St, Wichita, KS 67208",
    overall: "dated", kitchen: "dated", flooring: "good", timeline: "1-3mo",
  });

  useEffectA(() => {
    try { localStorage.setItem("ss_route", route); } catch {}
    window.scrollTo({ top: 0, behavior: "instant" in window ? "instant" : "auto" });
  }, [route]);

  const go = (r) => setRoute(r);

  let Page;
  if (route === "landing")        Page = <LandingPage onStart={()=>go('start')} onNavigate={go}/>;
  else if (route === "start")     Page = <StartPage state={state} setState={setState} onNext={()=>go('condition')} onExit={()=>go('landing')}/>;
  else if (route === "condition") Page = <ConditionPage state={state} setState={setState} onNext={()=>go('analyzing')} onExit={()=>go('landing')}/>;
  else if (route === "analyzing") Page = <AnalyzingPage state={state} onDone={()=>go('report')}/>;
  else if (route === "report")    Page = <ReportPage onExit={()=>go('landing')} onConnect={()=>go('connect')}/>;
  else if (route === "connect")   Page = <ConnectPage onExit={()=>go('report')} onSubmit={()=>go('confirmation')}/>;
  else if (route === "confirmation") Page = <ConfirmationPage onExit={()=>go('landing')} onBackToReport={()=>go('report')}/>;
  else Page = <LandingPage onStart={()=>go('start')} onNavigate={go}/>;

  return (
    <AnimatePresence mode="wait">
      <motion.div key={route}
        initial={{ opacity: 0, y: 6 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -6 }}
        transition={{ duration: 0.35 }}
      >
        {Page}
      </motion.div>
    </AnimatePresence>
  );
}

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