/* Mount + theming + tweaks panel */

const TWEAK_DEFAULTS = window.__TWEAKS__ || { direction: "academy", showCourtMotif: true };

function AnnouncementBar() {
  const msg = "London's Premier Basketball Camp · Launching August 2026";
  return (
    <div style={{
      background: "var(--c-red)",
      color: "#fff",
      borderTop: "1px solid rgba(255,255,255,0.08)",
      borderBottom: "1px solid rgba(0,0,0,0.18)",
      padding: "16px 0",
      position: "relative",
      zIndex: 50
    }}>
      <Marquee
        items={[msg, msg, msg, msg]}
        speed={28}
        fontSize="clamp(22px, 2.4vw, 32px)"
        gap={48}
        color="#fff"
        starColor="#0a0a0a"
      />
    </div>
  );
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, go] = useHashRoute();

  React.useEffect(() => {
    document.documentElement.setAttribute("data-theme", t.direction || "academy");
  }, [t.direction]);

  const PAGES = {
    home: window.HomePage,
    program: window.ProgramPage,
    divisions: window.DivisionsPage,
    camp: window.CampPage,
    scholarship: window.ScholarshipPage,
    merch: window.MerchPage,
    sponsors: window.SponsorsPage,
    about: window.AboutPage,
    contact: window.ContactPage,
    faq: window.FaqPage,
    register: window.RegisterPage,
  };
  const Page = PAGES[route] || PAGES.home || (() => <div style={{ padding: 80 }}>…</div>);

  return (
    <div data-screen-label={`page:${route}`}>
      <AnnouncementBar />
      <Nav route={route} go={go}/>
      <main className="page-enter" key={route}>
        <Page go={go} t={t}/>
      </main>
      <Footer/>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Visual direction">
          <TweakRadio
            label="Direction"
            value={t.direction}
            options={[
              { value: "academy", label: "Academy" },
              { value: "broadcast", label: "Broadcast" },
              { value: "playbook", label: "Playbook" },
            ]}
            onChange={v => setTweak("direction", v)}
          />
        </TweakSection>
        <TweakSection label="Decoration">
          <TweakToggle
            label="Court diagrams"
            value={!!t.showCourtMotif}
            onChange={v => setTweak("showCourtMotif", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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