/* orvio — portfólio: scroll-reveal + mount */

function useFolioReveal() {
  React.useEffect(() => {
    const all = [...document.querySelectorAll(".reveal")];
    all.forEach((e) => e.classList.add("armed"));

    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            entry.target.classList.add("in");
            observer.unobserve(entry.target);
          }
        });
      },
      { threshold: 0, rootMargin: "0px 0px -10% 0px" }
    );

    all.forEach((e) => observer.observe(e));

    const safety = setTimeout(() => all.forEach((e) => e.classList.add("in")), 2500);

    return () => {
      observer.disconnect();
      clearTimeout(safety);
    };
  }, []);
}

function FolioApp() {
  useFolioReveal();

  return (
    <React.Fragment>
      <Nav />
      <main>
        <PortfolioHero />
        <PortfolioGrid />
      </main>
      <Footer />
    </React.Fragment>
  );
}

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