const App = () => {
  const [tweaks, setTweaks] = React.useState(window.TWEAK_DEFAULTS);

  React.useEffect(() => {
    const root = document.documentElement;
    root.setAttribute("data-palette", tweaks.palette);
    root.setAttribute("data-type", tweaks.typeSystem);
    root.setAttribute("data-tone", tweaks.tone);
  }, [tweaks]);

  // Scroll-reveal: observe all [data-reveal] and [data-reveal-group] nodes
  React.useEffect(() => {
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            e.target.classList.add("is-in");
            io.unobserve(e.target);
          }
        });
      },
      { threshold: 0, rootMargin: "0px 0px -80px 0px" }
    );
    document
      .querySelectorAll("[data-reveal], [data-reveal-group]")
      .forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <>
      <Nav />
      <main>
        <Hero layout={tweaks.heroLayout} tone={tweaks.tone} />
        <Sobre />
        <Atuacao />
        <Beneficios />
        <Juridico />
        <Parcerias />
        <Conquistas />
        <Filiacao />
        <Contato />
      </main>
      <Footer />
      <WhatsappFab />
      <TweaksPanel state={tweaks} set={setTweaks} />
    </>
  );
};

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