/* Mystic Mocha — root.
   Owns three shared states:
   - navOpen: drawer state
   - revealed: crystal-ball reveal (drives the whole-site mystic shift)
   - lang: "en" | "es" — drives bilingual content */

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

const App = () => {
  const [navOpen, setNavOpen] = useStateA(false);
  const [revealed, setRevealed] = useStateA(false);
  const [lang, setLang] = useStateA(() => {
    try { return localStorage.getItem("mm.lang") || "en"; } catch (e) { return "en"; }
  });

  const toggleBall = useCallbackA(() => setRevealed((r) => !r), []);
  const toggleLang = useCallbackA(() => setLang((l) => l === "en" ? "es" : "en"), []);

  useEffectA(() => {
    document.body.classList.toggle("mystic-on", revealed);
  }, [revealed]);

  useEffectA(() => {
    document.documentElement.lang = lang;
    try { localStorage.setItem("mm.lang", lang); } catch (e) {}
  }, [lang]);

  return (
    <>
      <Header
        onOpenNav={() => setNavOpen(true)}
        lang={lang}
        onToggleLang={toggleLang}
      />
      <LangHanger lang={lang} onToggle={toggleLang} />
      <NavDrawer open={navOpen} onClose={() => setNavOpen(false)} lang={lang} />
      <main>
        <Hero revealed={revealed} onToggleBall={toggleBall} lang={lang} />
        <MenuSection lang={lang} />
        <OasisSection lang={lang} />
        <VisitSection lang={lang} />
      </main>
      <Footer lang={lang} />
    </>
  );
};

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