/* lead2play — Draft 2 (fresh) app — bilingual */
function App() {
  const [lang, setLang] = React.useState("en");
  const t = window.L2P2.ui[lang];
  const c = window.L2P2.content[lang];
  const [selectedId, setSelectedId] = React.useState("minecraft");
  const selected = c.games.find(g => g.id === selectedId) || c.games[0];

  React.useEffect(() => { document.documentElement.lang = lang; }, [lang]);

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

  function pick(g) {
    setSelectedId(g.id);
    requestAnimationFrame(() => {
      const el = document.getElementById("report");
      if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 60, behavior: "smooth" });
    });
  }

  return (
    <React.Fragment>
      <Header t={t} lang={lang} onToggleLang={() => setLang(l => l === "en" ? "de" : "en")} />
      <Hero t={t} games={c.games} onPick={pick} />
      <How t={t} />
      <Report t={t} game={selected} />
      <Science t={t} science={c.science} />
      <Library t={t} games={c.games} onPick={pick} />
      <Quotes t={t} stories={c.stories} />
      <FAQ t={t} faq={c.faq} />
      <CTAFooter t={t} />
    </React.Fragment>
  );
}
ReactDOM.createRoot(document.getElementById("root")).render(<App />);