// MCheco Rent Car — App entry
function App() {
  const [lang, setLang] = React.useState("ES");
  const [theme, setTheme] = React.useState("light");

  React.useEffect(() => {
    document.documentElement.lang = lang === "ES" ? "es" : "en";
  }, [lang]);

  React.useEffect(() => {
    document.documentElement.setAttribute("data-theme", theme);
  }, [theme]);

  React.useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) e.target.classList.add("in"); });
    }, { threshold: 0.12 });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, [lang]);

  const t = COPY[lang];

  return (
    <React.Fragment>
      <Navbar lang={lang} setLang={setLang} theme={theme} setTheme={setTheme} t={t} />
      <main>
        <Hero variant="cream" t={t} />
        <div className="reveal"><Catalogo t={t} /></div>
        <div className="reveal"><Venta t={t} /></div>
        <div className="reveal"><Nosotros t={t} /></div>
        <div className="reveal"><Contacto t={t} /></div>
      </main>
      <Footer t={t} />
    </React.Fragment>
  );
}

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