// Main app
const { useState: useStateA } = React;

function App() {
  const [lang, setLang] = useStateA("nl");

  useReveal();

  const t = (window.CONTENT[lang] || window.CONTENT.nl);

  const goTo = (id) => (e) => {
    if (e) e.preventDefault();
    const el = document.getElementById(id);
    if (el) {
      const top = el.getBoundingClientRect().top + window.scrollY - 70;
      window.scrollTo({ top, behavior: "smooth" });
    }
  };

  return (
    <>
      <Navbar
        t={t}
        lang={lang}
        setLang={setLang}
        onCta={() => goTo("aanmelden")()}
      />
      <Hero
        t={t}
        onPrimary={() => goTo("historie")()}
        onSecondary={() => goTo("aanmelden")()}
      />
      <HistorieSection t={t} />
      <StorySection t={t} />
      <CarnavalSection t={t} />
      <LustrumSection t={t} />
      <OverSection t={t} />
      <ContactSection t={t} />
      <Footer t={t} onNav={goTo} />
    </>
  );
}

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