// ============================================================
// Arogya Bite — App entry
// ============================================================
const App = () => {
  const [active, setActive] = React.useState('top');

  // Intersection observer for nav active state + reveal animations
  React.useEffect(() => {
    // Reveal-on-scroll
    const revealObs = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add('in');
          revealObs.unobserve(e.target);
        }
      });
    }, { rootMargin: '0px 0px -10% 0px', threshold: 0.05 });
    document.querySelectorAll('.reveal').forEach(el => revealObs.observe(el));

    // Section spy
    const sections = ['features', 'how', 'ecosystem', 'roadmap', 'faq'];
    const spyObs = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) setActive(e.target.id);
      });
    }, { rootMargin: '-40% 0px -55% 0px' });
    sections.forEach(id => {
      const el = document.getElementById(id);
      if (el) spyObs.observe(el);
    });

    return () => { revealObs.disconnect(); spyObs.disconnect(); };
  }, []);

  return (
    <>
      <Nav activeSection={active} />
      <main>
        <Hero />
        <Features />
        <HowItWorks />
        <Ecosystem />
        <Roadmap />
        <FAQ />
        <CTA />
      </main>
      <Footer />
    </>
  );
};

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