// Root app shell

const { useState: useStateA, useEffect: useEffectA } = React;

function App() {
  const [page, setPage] = useStateA('home');
  const [bookingState, setBookingState] = useStateA({
    pickup: 'Klang HQ',
    start: null,
    end: null,
    travellers: 2,
  });
  const [toast, setToast] = useStateA(null);

  const goTo = (p) => {
    setPage(p);
    window.scrollTo({ top: 0, behavior: 'instant' });
  };

  // Scroll-reveal: fade-up sections as they enter the viewport
  useEffectA(() => {
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    let obs;
    let raf;
    const setup = () => {
      const targets = document.querySelectorAll(
        'section:not(.hero-clean):not(.nav-section), .boarding'
      );
      if (!targets.length) {
        raf = requestAnimationFrame(setup);
        return;
      }
      obs = new IntersectionObserver((entries) => {
        entries.forEach(e => {
          if (e.isIntersecting) {
            e.target.classList.add('is-revealed');
            obs.unobserve(e.target);
          }
        });
      }, { threshold: 0.08, rootMargin: '0px 0px -30px 0px' });
      targets.forEach(t => {
        t.classList.add('reveal-on-scroll');
        obs.observe(t);
      });
    };
    raf = requestAnimationFrame(setup);
    return () => {
      cancelAnimationFrame(raf);
      if (obs) obs.disconnect();
    };
  }, [page]);

  return (
    <>
      <Nav page={page} setPage={goTo}/>
      {page === 'home' && (
        <HomePage setPage={goTo} bookingState={bookingState} setBookingState={setBookingState}/>
      )}
      {page === 'rental' && (
        <RentalPage bookingState={bookingState} setBookingState={setBookingState} onToast={setToast}/>
      )}
      {!['home','rental'].includes(page) && (
        <div className="page" style={{minHeight:'60vh', display:'flex', alignItems:'center'}}>
          <div className="wrap" style={{padding:'120px 48px'}}>
            <span className="eyebrow">Coming soon</span>
            <h1 className="serif" style={{fontSize:'clamp(48px, 6vw, 84px)', fontWeight:400, margin:'12px 0 16px', lineHeight:1}}>
              This chapter is <em style={{fontStyle:'italic', color:'var(--sienna)'}}>still being built.</em>
            </h1>
            <p style={{color:'var(--ink-soft)', maxWidth:520, fontSize:16, marginBottom:24}}>
              The Home and Rental pages are wired up as a full interactive prototype. Modification, Motorhomes, About and Contact are next on the design slate.
            </p>
            <button className="btn btn-primary" onClick={() => goTo('home')}>← Back to home</button>
          </div>
        </div>
      )}
      <Footer setPage={goTo}/>
      <WhatsAppFab/>
      {toast && <Toast message={toast} onDone={() => setToast(null)}/>}
    </>
  );
}

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