// App: composes all sections and applies scroll-reveal
function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add("visible");
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12 });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);
}

function App() {
  useReveal();
  return (
    <div>
      <Navbar />
      <main>
        <Hero />
        <div className="reveal"><FeaturedGuides /></div>
        <div className="reveal"><HowItWorks /></div>
        <div className="reveal"><CountrySelector /></div>
        <div className="reveal"><LatestArticles /></div>
        <div className="reveal"><TrustSection /></div>
        <div className="reveal"><TelegramCTA /></div>
        <div className="reveal"><AuthorSection /></div>
        <div className="reveal"><Newsletter /></div>
      </main>
      <Footer />
      <FloatingTelegram />
    </div>
  );
}

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