function App() {
  const [modal, setModal] = React.useState(null); // null | {mode, camperId}
  const [active, setActive] = React.useState("wynajem");

  const openBook = (camperId) => setModal({ mode: "rental", camperId: typeof camperId === "string" ? camperId : null });
  const openService = () => setModal({ mode: "service" });

  // Lock scroll when modal open
  React.useEffect(() => {
    document.body.style.overflow = modal ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [modal]);

  return (
    <>
      <window.Header active={active} setActive={setActive} onBook={() => openBook(null)}/>
      <window.Hero onBook={() => openBook(null)}/>
      <window.Fleet onBook={() => openBook(null)}/>
      <window.Equipment/>
      <window.Pricing onBook={() => openBook(null)}/>
      <window.Service onServiceRequest={openService}/>
      <window.Travel/>
      <window.Reviews/>
      <window.FAQ/>
      <window.Footer onBook={() => openBook(null)}/>

      {modal && (
        <window.BookingModal
          mode={modal.mode}
          onClose={() => setModal(null)}
        />
      )}
    </>
  );
}

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