// App root
function App() {
  const [lang, setLang] = React.useState(() => {
    const saved = localStorage.getItem("gsc-lang");
    if (saved === "pt" || saved === "en") return saved;
    return (navigator.language || "pt").startsWith("pt") ? "pt" : "en";
  });

  React.useEffect(() => {
    localStorage.setItem("gsc-lang", lang);
    document.documentElement.lang = lang === "pt" ? "pt-BR" : "en";
  }, [lang]);

  const t = window.PORTFOLIO_DATA[lang];

  const [openProject, setOpenProject] = React.useState(null);

  return (
    <React.Fragment>
      <div className="bg-fx"></div>
      <div className="bg-grid"></div>
      <CursorDot />
      <Nav lang={lang} setLang={setLang} t={t} />
      <Hero t={t} />
      <Marquee lang={lang} />
      <About t={t} />
      <Skills t={t} />
      <Experience t={t} />
      <Projects t={t} lang={lang} onOpen={setOpenProject} />
      <Contact t={t} lang={lang} />
      <Footer t={t} />

      {openProject && (
        <ProjectDetail
          p={openProject}
          lang={lang}
          t={t}
          onClose={() => setOpenProject(null)}
        />
      )}
    </React.Fragment>
  );
}

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