// app.jsx — root + screen routing

const App = () => {
  const [screen, setScreen] = React.useState("landing");
  const [search, setSearch] = React.useState(null);
  const [selectedCar, setSelectedCar] = React.useState(null);
  const [bookingResult, setBookingResult] = React.useState(null);
  // Tracks where the driver-info step was entered from so the back button is correct.
  const [driverOrigin, setDriverOrigin] = React.useState("detail"); // "detail" | "about"

  React.useEffect(() => { window.scrollTo(0, 0); }, [screen]);

  const goLanding = () => setScreen("landing");
  // Fleet menu picks: open the "about this car" browse-mode page.
  const goCarAbout = (c) => { setSelectedCar(c); setScreen("about"); };

  return (
    <div className="app">
      {screen === "landing" && <Landing onSearch={(s) => { setSearch(s); setScreen("results"); }} onSelectCar={goCarAbout} />}
      {screen === "results" && <Results search={search} onEdit={goLanding} onSelect={(c) => { setSelectedCar(c); setScreen("detail"); }} onLogo={goLanding} onSelectCar={goCarAbout} />}
      {screen === "about" && <CarAbout car={selectedCar} onBack={goLanding} onLogo={goLanding} onSelectCar={goCarAbout} onContinue={(s) => { setSearch(s); setDriverOrigin("about"); setScreen("driver"); }} />}
      {screen === "detail" && <Detail car={selectedCar} search={search} onBack={() => search ? setScreen("results") : goLanding()} onLogo={goLanding} onContinue={() => { setDriverOrigin("detail"); setScreen("driver"); }} onSelectCar={goCarAbout} />}
      {screen === "driver" && <Driver car={selectedCar} search={search} onBack={() => setScreen(driverOrigin)} onLogo={goLanding} onSubmit={(r) => { setBookingResult(r); setScreen("confirm"); }} onSelectCar={goCarAbout} />}
      {screen === "confirm" && <Confirm car={selectedCar} search={search} form={bookingResult.form} total={bookingResult.total} onLogo={goLanding} onHome={goLanding} onSelectCar={goCarAbout} />}
    </div>
  );
};

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