// Farmatric — main app
const { useState: useState_, useEffect: useEffect_ } = React;

function App() {
  const [lang, setLang] = useState_("en");
  const [menuOpen, setMenuOpen] = useState_(false);
  const [demoOpen, setDemoOpen] = useState_(false);

  useEffect_(() => {
    document.documentElement.lang = lang === "ar" ? "ar" : "en";
    document.documentElement.dir = lang === "ar" ? "rtl" : "ltr";
  }, [lang]);

  useEffect_(() => {
    document.body.style.overflow = (menuOpen || demoOpen) ? "hidden" : "";
  }, [menuOpen, demoOpen]);

  return (
    <>
      <Nav lang={lang} setLang={setLang} onMenuOpen={() => setMenuOpen(true)} />
      <MobileMenu open={menuOpen} onClose={() => setMenuOpen(false)} lang={lang} setLang={setLang} />

      <main>
        <Hero onOpenDemo={() => setDemoOpen(true)} />
        <Problems />
        <Features />
        <DashPreview />
        <Collective />
        <Training />
        <Revenue />
        <Testimonials />
        <Pricing />
        <FAQ />
        <FinalCTA />
      </main>

      <Footer lang={lang} setLang={setLang} />
      <DemoModal open={demoOpen} onClose={() => setDemoOpen(false)} />
    </>
  );
}

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