// Main app

function App() {
  const [bookingOpen, setBookingOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  const [overHero, setOverHero] = useState(true);
  const [section, setSection] = useState("");

  const defaults = /*EDITMODE-BEGIN*/{
    "palette": "default",
    "roomStyle": "classic",
    "heroLayout": "full"
  }/*EDITMODE-END*/;

  const [t, setTweak] = useTweaks(defaults);

  useEffect(() => {
    document.documentElement.setAttribute("data-palette", t.palette);
    document.body.setAttribute("data-roomstyle", t.roomStyle);
  }, [t.palette, t.roomStyle]);

  useEffect(() => {
    const onScroll = () => {
      setScrolled(window.scrollY > 30);
      setOverHero(window.scrollY < (window.innerHeight - 100));
      // detect current section
      const ids = ["stays", "amenities", "dine", "events", "gallery", "area", "contact"];
      for (const id of ids) {
        const el = document.getElementById(id);
        if (el) {
          const r = el.getBoundingClientRect();
          if (r.top < 200 && r.bottom > 200) { setSection(id); return; }
        }
      }
      setSection("");
    };
    window.addEventListener("scroll", onScroll);
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const openBooking = () => { setBookingOpen(true); document.body.style.overflow = "hidden"; };
  const closeBooking = () => { setBookingOpen(false); document.body.style.overflow = ""; };

  return (
    <div className="app">
      <Nav section={section} openBooking={openBooking} navOverHero={overHero && !scrolled} scrolled={scrolled} />
      <Hero openBooking={openBooking} />
      <Intro />
      <Buildings openBooking={openBooking} />
      <Amenities />
      <Dine />
      <Events />
      <Gallery />
      <Area />
      <Contact />

      <Booking open={bookingOpen} close={closeBooking} />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Palette">
          <TweakRadio
            label="Theme"
            value={t.palette}
            onChange={(v) => setTweak("palette", v)}
            options={[
              { value: "default", label: "Aegean" },
              { value: "midnight", label: "Midnight" },
              { value: "terracotta", label: "Earth" }
            ]}
          />
        </TweakSection>
        <TweakSection title="Room cards">
          <TweakRadio
            label="Style"
            value={t.roomStyle}
            onChange={(v) => setTweak("roomStyle", v)}
            options={[
              { value: "classic", label: "Classic" },
              { value: "edge", label: "Edge" },
              { value: "bold", label: "Bold" }
            ]}
          />
        </TweakSection>
        <TweakSection title="Hero">
          <TweakRadio
            label="Layout"
            value={t.heroLayout}
            onChange={(v) => setTweak("heroLayout", v)}
            options={[
              { value: "full", label: "Full" },
              { value: "split", label: "Split" }
            ]}
          />
        </TweakSection>
        <TweakSection title="Try the booking">
          <TweakButton onClick={openBooking}>Open booking flow →</TweakButton>
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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