// app.jsx — Main App
const { useRef } = React;

function App() {
  const bookingRef = useRef(null);
  const scrollToBooking = () => {
    bookingRef.current?.getBoundingClientRect();
    const el = document.getElementById('booking');
    if (el) {
      const y = el.getBoundingClientRect().top + window.scrollY - 80;
      window.scrollTo({ top: y, behavior: 'smooth' });
    }
  };

  // Scroll reveal
  useEffect(() => {
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) e.target.classList.add('in');
      });
    }, { threshold: 0.1 });
    document.querySelectorAll('.reveal').forEach(el => obs.observe(el));
    return () => obs.disconnect();
  }, []);

  return (
    <>
      <div className="grain"/>
      <Nav onBook={scrollToBooking}/>
      <Hero onBook={scrollToBooking}/>
      <Marquee/>
      <Services onBook={scrollToBooking}/>
      <Team/>
      <Gallery/>
      <Laser onBook={scrollToBooking}/>
      <BookingSection bookingRef={bookingRef}/>
      <Testimonials/>
      <Contact/>
      <Footer/>
    </>
  );
}

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