// Curator Bookings — app root

const { useState: useStateA, useEffect: useEffectA } = React;

function App() {
  const [page, setPage] = useStateA("roster"); // roster | artist | book | about | services
  const [artistId, setArtistId] = useStateA(null);
  const [preselectedId, setPreselectedId] = useStateA(null);
  const [curtainKey, setCurtainKey] = useStateA(0);
  const [curtainLabel, setCurtainLabel] = useStateA("");
  const [theme, setThemeState] = useStateA(() => {
    try { return localStorage.getItem("cb-theme") || "dark"; } catch (e) { return "dark"; }
  });

  useEffectA(() => {
    document.documentElement.setAttribute("data-theme", theme);
    try { localStorage.setItem("cb-theme", theme); } catch (e) {}
  }, [theme]);

  const setTheme = (t) => setThemeState(t);

  const go = (p, opts = {}) => {
    if (p === page && !opts.force) return;
    setCurtainLabel(opts.label || labelFor(p));
    setCurtainKey((k) => k + 1);
    // Content swaps mid-curtain (~450ms) then fades in
    setTimeout(() => setPage(p), 440);
    window.scrollTo({ top: 0 });
  };

  const openArtist = (id) => {
    setArtistId(id);
    const a = window.ROSTER.find((r) => r.id === id);
    go("artist", { label: a ? `${a.first} ${a.last}` : "Artist" });
  };

  const openBook = (id) => {
    setPreselectedId(id || null);
    go("book", { label: "Booking" });
  };

  return (
    <>
      <window.Cursor />
      <window.Curtain keyTick={curtainKey} label={curtainLabel} />
      <div className="page">
        <window.Nav page={page} go={go} theme={theme} setTheme={setTheme} />
        {page === "roster" && <window.RosterPage go={go} openArtist={openArtist} />}
        {page === "artist" && <window.ArtistPage artistId={artistId} go={go} openBook={openBook} />}
        {page === "book" && <window.BookPage preselectedId={preselectedId} go={go} setPreselectedId={setPreselectedId} />}
        {page === "about" && <window.AboutPage go={go} />}
        {page === "services" && <window.ServicesPage go={go} />}
        <window.Foot go={go} />
      </div>
    </>
  );
}

function labelFor(p) {
  switch (p) {
    case "roster": return "Roster";
    case "artist": return "Artist";
    case "book": return "Booking";
    case "about": return "About";
    case "services": return "Services";
    default: return "Curator";
  }
}

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