// Top-level App. Wires every section together.
const App = () => {
  const [bookingOpen, setBookingOpen] = React.useState(false);
  const [bookingCottage, setBookingCottage] = React.useState(null);
  const [activeSection, setActiveSection] = React.useState('top');

  const openBooking = (cottageId) => {
    setBookingCottage(cottageId || null);
    setBookingOpen(true);
  };

  // Track which cottage section is in view, for nav active-state
  React.useEffect(() => {
    const ids = ['buttercup', 'countryside'];
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) setActiveSection(e.target.id);
      });
    }, { rootMargin: '-40% 0px -40% 0px' });
    ids.forEach((id) => { const el = document.getElementById(id); if (el) obs.observe(el); });
    return () => obs.disconnect();
  }, []);

  return (
    <div id="top" style={{ background: 'var(--bg)', minHeight: '100vh' }}>
      <window.Nav openBooking={openBooking} active={activeSection}/>
      <window.Hero openBooking={openBooking}/>
      <window.CottagePicker openBooking={openBooking}/>
      <window.HostNote/>
      <window.Cottage id="buttercup"   openBooking={openBooking} side="left"/>
      <window.Cottage id="countryside" openBooking={openBooking} side="right"/>
      <window.Gallery/>
      <window.ThingsToDo/>
      <window.FindingUs/>
      <window.FAQ/>
      <window.Contact/>
      <window.Footer/>

      <window.BookingModal
        open={bookingOpen}
        onClose={() => setBookingOpen(false)}
        prefillCottage={bookingCottage}
      />
    </div>
  );
};

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