/* tabiOS LP — page assembly + scroll-driven animations */
function App() {
  React.useEffect(() => {
    const animated = document.querySelectorAll(
      '.section-heading, .featured-trip, .mini-trip, .mood-tile, .step-phone, .voice-card, .cta-content'
    );

    animated.forEach((el) => el.classList.add('reveal'));

    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (!entry.isIntersecting) return;
          entry.target.classList.add('is-visible');
          observer.unobserve(entry.target);
        });
      },
      { threshold: 0.14, rootMargin: '0px 0px -70px 0px' }
    );

    animated.forEach((el) => observer.observe(el));

    const heroItems = document.querySelectorAll('.hero .hero-reveal');
    const timers = Array.from(heroItems).map((el, index) => {
      if (el.classList.contains('is-visible')) return null;
      return window.setTimeout(() => el.classList.add('is-visible'), 180 + index * 150);
    });

    return () => {
      observer.disconnect();
      timers.forEach((timer) => window.clearTimeout(timer));
    };
  }, []);

  return (
    <>
      <Nav />
      <main>
        <Hero />
        <Concept />
        <CreatorTrips />
        <EmotionTags />
        <HowToUse />
        <Voices />
        <FinalCTA />
      </main>
      <Footer />
    </>
  );
}

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