/* ============ APP ============ */
function App() {
  const [theme, setTheme] = useState(() => {
    try { return localStorage.getItem("ls_theme") || "light"; } catch (e) { return "light"; }
  });
  const [selectedRoom, setSelectedRoom] = useState(null);

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

  const toggleTheme = () => setTheme((t) => (t === "light" ? "dark" : "light"));

  useEffect(() => {
    const s = document.getElementById("splash");
    if (s) setTimeout(() => s.classList.add("gone"), 300);
  }, []);

  const onBook = (roomId) => {
    setSelectedRoom(roomId);
    const el = document.getElementById("contact");
    if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 76, behavior: "smooth" });
  };

  return (
    <>
      <Nav theme={theme} onToggle={toggleTheme} />
      <main>
        <Hero />
        <About />
        <Rooms onBook={onBook} />
        <Cafe />
        <Facilities />
        <Gallery />
        <Experiences />
        <Testimonials />
        <Contact selectedRoom={selectedRoom} />
      </main>
      <Footer />
      <Floating />
    </>
  );
}

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