/* global React, ReactDOM */
/* 7151 Johnston Road — app shell: media config, modal + lightbox state, mount. */
const EEapp = window.EstablishedEstateDesignSystem_03388c;
const { Button: ButtonApp, Eyebrow: EyebrowApp, EstateIcon: EstateIconApp } = EEapp;
const dspApp = window.EEdsp, bdyApp = window.EEbdy;
const {
  NavBar, StickyCTA, Hero, Setting, Film, Offer, Residence,
  Guest, Equestrian, EstateMap, Moments, Interiors, Action, Footer, MediaSlot, GalleryLightbox,
} = window;

/* ============================================================ MEDIA ======
   Every unfinished asset is a single named slot. Drop the final asset in by
   editing ONE value here — the layout, spacing, and surrounding sections do
   not move. (null = labelled placeholder is shown.)                         */
const MEDIA = {
  film:      { youtubeId: '8msKR5Kbask', poster: '../Assets/web/placeholder/film.jpg' }, /* poster shown until play */
  floorplan: { src: null },         /* stylized floor-plan image              */
  siteplan:  { src: null },         /* illustrated estate / site-plan image   */
  cubicasa:  { embedUrl: 'https://visithome.ai/XTzfDgc3Us8yVpzMowcnvG?mu=ft' }, /* interactive 3D tour (VisitHome) embed URL */
};

/* The full-screen gallery lightbox is the shared GalleryLightbox (common.jsx),
   driven below by App's lightbox state. */

/* ====================================================== CUBICASA MODAL ==== */
function TourModal({ onClose, cubicasa }) {
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => { window.removeEventListener('keydown', onKey); document.body.style.overflow = ''; };
  }, [onClose]);
  const url = cubicasa && cubicasa.embedUrl;
  return (
    <div className="ee-overlay" onClick={onClose}>
      <div className="ee-modal" style={{ maxWidth: 1200 }} onClick={(e) => e.stopPropagation()}>
        <button className="ee-overlay__close" onClick={onClose} aria-label="Close tour">
          <svg width="18" height="18" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="1.6" fill="none" strokeLinecap="round"><path d="M5 5l14 14M19 5L5 19" /></svg>
        </button>
        <div style={{ padding: 'var(--space-6) var(--space-6) var(--space-4)', borderBottom: '1px solid var(--rule)' }}>
          <EyebrowApp style={{ marginBottom: 6 }}>Interactive Tour · 3D Walkthrough</EyebrowApp>
          <h3 style={dspApp('var(--type-display-4)')}>Walk the residence at your own pace.</h3>
        </div>
        <div style={{ padding: 'var(--space-6)' }}>
          {url ? (
            <div className="ee-frame" style={{ aspectRatio: '16 / 10' }}>
              <iframe title="7151 Johnston Road — interactive 3D tour" src={url} allow="accelerometer; autoplay; fullscreen; gyroscope; magnetometer; xr-spatial-tracking" allowFullScreen style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', border: 0 }} />
            </div>
          ) : (
            <MediaSlot id="cubicasa" label="Placeholder · 3D Tour" ratio="16 / 10" icon="home" note="The interactive 3D tour embeds here. Not yet finalized — the embed URL is the single swap point." />
          )}
        </div>
      </div>
    </div>
  );
}

/* ================================================================= APP ==== */
function App() {
  const [tourOpen, setTourOpen] = React.useState(false);
  const [lb, setLb] = React.useState(null); // { items, index, el, frame } | null

  const openTour = () => setTourOpen(true);
  const openLightbox = React.useCallback((items, index, el, opts) => {
    setLb({ items, index, el: el || null, frame: !!(opts && opts.frame) });
  }, []);
  const navLightbox = React.useCallback((dir) => {
    setLb((s) => (s ? { ...s, index: (s.index + dir + s.items.length) % s.items.length } : s));
  }, []);
  const closeLightbox = React.useCallback(() => setLb(null), []);

  return (
    <React.Fragment>
      <NavBar />
      <main>
        <Hero />
        <Setting />
        <Film film={MEDIA.film} />
        <Offer />
        <Residence onOpenTour={openTour} onOpenLightbox={openLightbox} />
        <Interiors onOpen={openLightbox} />
        <Guest />
        <Equestrian />
        <EstateMap siteplan={MEDIA.siteplan} />
        <Moments onOpen={openLightbox} />
        <Action />
      </main>
      <Footer />
      <StickyCTA />
      {tourOpen ? <TourModal onClose={() => setTourOpen(false)} cubicasa={MEDIA.cubicasa} /> : null}
      {lb ? <GalleryLightbox items={lb.items} index={lb.index} frame={lb.frame} onClose={closeLightbox} onNav={navLightbox} restoreEl={lb.el} /> : null}
    </React.Fragment>
  );
}

if (!window.__eeRoot) {
  window.__eeRoot = ReactDOM.createRoot(document.getElementById('estate-root'));
}
window.__eeRoot.render(<App />);