// Main app

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "cascades",
  "displayFont": "bricolage",
  "heroVariant": "default"
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
  const [booking, setBooking] = React.useState(null); // null | program | "general"

  // Apply palette CSS variables
  React.useEffect(() => {
    const palette = window.PALETTES[tweaks.palette] || window.PALETTES.cascades;
    Object.entries(palette).forEach(([k, v]) => {
      if (k.startsWith("--")) document.documentElement.style.setProperty(k, v);
    });
  }, [tweaks.palette]);

  // Apply display font
  React.useEffect(() => {
    const font = window.DISPLAY_FONTS[tweaks.displayFont] || window.DISPLAY_FONTS.bricolage;
    document.documentElement.style.setProperty("--display", font.stack);
  }, [tweaks.displayFont]);

  // Load extra fonts on demand
  React.useEffect(() => {
    if (document.getElementById("extra-fonts")) return;
    const l = document.createElement("link");
    l.id = "extra-fonts";
    l.rel = "stylesheet";
    l.href = "https://fonts.googleapis.com/css2?family=Archivo+Black&family=Syne:wght@600;700;800&display=swap";
    document.head.appendChild(l);
  }, []);

  const openBooking = (program) => setBooking(program || "general");
  const closeBooking = () => setBooking(null);

  return (
    <>
      <Nav onBook={() => openBooking()} />
      <Hero onBook={() => openBooking()} variant={tweaks.heroVariant} />
      <BrandMarquee />
      <Programs onBook={openBooking} />
      <Schedule onBook={openBooking} />
      <About />
      <Testimonials />
      <FAQ />
      <Contact />
      <Footer />
      {booking && <BookingModal program={booking === "general" ? null : booking} onClose={closeBooking} />}

      <TweaksPanel title="Tweaks">
        <TweakSection label="Palette">
          <TweakRadio
            value={tweaks.palette}
            options={Object.entries(window.PALETTES).map(([id, p]) => ({ value: id, label: p.label }))}
            onChange={v => setTweak("palette", v)}
          />
        </TweakSection>
        <TweakSection label="Display font">
          <TweakRadio
            value={tweaks.displayFont}
            options={Object.entries(window.DISPLAY_FONTS).map(([id, f]) => ({ value: id, label: f.label }))}
            onChange={v => setTweak("displayFont", v)}
          />
        </TweakSection>
        <TweakSection label="Hero layout">
          <TweakRadio
            value={tweaks.heroVariant}
            options={[
              { value: "default", label: "Editorial" },
              { value: "split", label: "Split" },
              { value: "bg", label: "Full-bleed" },
            ]}
            onChange={v => setTweak("heroVariant", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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