/* global React, ReactDOM, COPY */
const { useState, useEffect } = React;

function App() {
  const [lang, setLang] = useState("es");
  const [direction, setDirection] = useState("a");

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

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

  // Initialize chat after React renders the nav (which contains #chatToggle)
  useEffect(() => {
    if (typeof initChat === "function") initChat();
  }, []);

  useReveal();

  const t = COPY[lang];

  return (
    <>
      <MagnetCursor/>
      <div className="grid-overlay"/>
      <StatusBar t={t}/>
      <Nav t={t} lang={lang} setLang={setLang} direction={direction} setDirection={setDirection}/>
      <main>
        <Hero t={t}/>
        <Marquee t={t}/>
        <Services t={t}/>
        <Process t={t}/>
        <Stack t={t}/>
        <CtaFinal t={t}/>
      </main>
      <Footer t={t}/>
    </>
  );
}

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