// app.jsx — composes the full Nurtli site.

const { useEffect: useAEffect } = React;

function App() {
  const motion = true;

  // Reveal-on-scroll observer
  useAEffect(() => {
    const els = document.querySelectorAll('.reveal');
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) e.target.classList.add('in');
      });
    }, { threshold: 0.12, rootMargin: '-40px' });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);

  // Cursor aura — pointer-only; skip on touch/coarse-pointer devices
  useAEffect(() => {
    if (!window.matchMedia || !window.matchMedia('(hover: hover) and (pointer: fine)').matches) return;
    const aura = document.createElement('div');
    aura.id = 'cursor-aura';
    Object.assign(aura.style, {
      position: 'fixed', left: 0, top: 0, width: '380px', height: '380px',
      borderRadius: '50%', pointerEvents: 'none', zIndex: '0',
      transform: 'translate(-50%, -50%)',
      background: 'radial-gradient(circle, rgba(127,179,160,0.22), transparent 65%)',
      filter: 'blur(28px)',
      transition: 'opacity .4s ease',
      mixBlendMode: 'multiply',
    });
    document.body.appendChild(aura);
    const onMove = (e) => {
      aura.style.left = e.clientX + 'px';
      aura.style.top = e.clientY + 'px';
    };
    window.addEventListener('mousemove', onMove);
    return () => {
      window.removeEventListener('mousemove', onMove);
      aura.remove();
    };
  }, []);

  return (
    <div>
      <Nav />
      <Hero motion={motion} />
      <Microbiome motion={motion} />
      <Features    motion={motion} />
      <Grading     motion={motion} />
      <CheckIn     motion={motion} />
      <Pricing     motion={motion} />
      <Footer      motion={motion} />
    </div>
  );
}

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