/* global React, ReactDOM, Nav, Footer, FloatingShapes, PageHome, PageLineup, PageInfos, PageTickets, PageContact, PageBooking, ChatBot */
const { useState, useEffect } = React;

function App() {
  const [page, setPage] = useState("home");

  useEffect(() => {
    const onPop = () => {
      const hash = window.location.hash.replace("#", "") || "home";
      setPage(hash);
    };
    onPop();
    window.addEventListener("hashchange", onPop);
    return () => window.removeEventListener("hashchange", onPop);
  }, []);

  useEffect(() => {
    if (window.location.hash.replace("#", "") !== page) {
      window.history.replaceState(null, "", `#${page}`);
    }
  }, [page]);

  // Booking is a full-screen overlay route (no nav/footer)
  if (page === "booking") {
    return (
      <>
        <PageBooking setPage={setPage} />
        {/* ChatBot monte dans #chatbot-root, indépendamment */}
      </>
    );
  }

  let Page = PageHome;
  if (page === "lineup") Page = PageLineup;
  else if (page === "infos") Page = PageInfos;
  else if (page === "tickets") Page = PageTickets;
  else if (page === "contact") Page = PageContact;

  return (
    <>
      <div className="sun-orb" />
      <FloatingShapes />
      <Nav page={page} setPage={setPage} />
      <main key={page} data-screen-label={page}>
        <Page setPage={setPage} />
      </main>
      <Footer setPage={setPage} />
      {/* ChatBot monte dans #chatbot-root, indépendamment */}
    </>
  );
}

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