/* ── App — routing + lightbox state ─────────────────────── */
const { useState: useAppState, useEffect: useAppEffect } = React;

const App = () => {
  const [page, setPage] = useAppState('home');
  const [lb, setLb]     = useAppState({ open: false, images: [], index: 0 });

  /* Navigate between pages, optionally scroll to a section id */
  const navigate = (to, scrollTarget = null) => {
    setPage(to);
    if (scrollTarget) {
      setTimeout(() => {
        const el = document.getElementById(scrollTarget);
        if (el) {
          const top = el.getBoundingClientRect().top + window.pageYOffset - 80;
          window.scrollTo({ top, behavior: 'smooth' });
        }
      }, 80);
    } else {
      window.scrollTo(0, 0);
    }
  };

  /* Lightbox controls */
  const openLb  = (images, index) => setLb({ open: true, images, index });
  const closeLb = () => setLb(p => ({ ...p, open: false }));
  const navLb   = (dir) =>
    setLb(p => ({ ...p, index: (p.index + dir + p.images.length) % p.images.length }));

  const isHome = page === 'home';

  return (
    <>
      <Navbar isHome={isHome} onNavigate={navigate} />

      {isHome && (
        <HomePage onNavigate={navigate} />
      )}

      {(page === 'property-1' || page === 'property-2') && (
        <PropertyDetail
          propertyId={page}
          onBack={() => navigate('home', 'properties')}
          onLightboxOpen={openLb}
        />
      )}

      {lb.open && (
        <Lightbox
          images={lb.images}
          index={lb.index}
          onClose={closeLb}
          onNav={navLb}
        />
      )}
    </>
  );
};

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