// App shell

const App = () => {
  const [mobileOpen, setMobileOpen] = React.useState(false);
  const [bookingOpen, setBookingOpen] = React.useState(false);
  const [contactOpen, setContactOpen] = React.useState(false);

  // Expose global triggers for buttons across all components
  React.useEffect(() => {
    window.__openBooking = () => setBookingOpen(true);
    window.__openContact = () => setContactOpen(true);
    return () => { delete window.__openBooking; delete window.__openContact; };
  }, []);

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

  return (
    <>
      <Nav onToggleMobile={() => setMobileOpen(o => !o)} mobileOpen={mobileOpen} />
      <MobileSheet open={mobileOpen} onClose={() => setMobileOpen(false)} />
      <Hero />
      <TrustLogos />
      <Stats />
      <Services />
      <Work />
      <WhyUs />
      <Testimonials />
      <Process />
      <FinalCTA />
      <Footer />
      {bookingOpen && <BookingModal onClose={() => setBookingOpen(false)} />}
      {contactOpen && <ContactModal onClose={() => setContactOpen(false)} />}
      <ToastSystem />
    </>
  );
};

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