// Screens (page compositions) + ProjectDetail
function HomeScreen({ onNavigate, onOpenProject }) {
  return (
    <>
      <Hero onNavigate={onNavigate}/>
      <About onNavigate={onNavigate}/>
      <Portfolio onOpen={onOpenProject} onNavigate={onNavigate}/>
      <Stats/>
      <Services/>
      <Clients/>
      <Testimonials/>
      <Contact/>
    </>
  );
}

function AboutScreen({ onNavigate }) {
  const r = useReveal();
  return (
    <>
      <section className="de-page-head">
        <div className="de-container de-page-head__inner" ref={r}>
          <div className="de-eyebrow de-reveal is-in">Our Story · Since 2013</div>
          <h1 className="de-page-head__title de-reveal de-reveal-2 is-in">
            An atelier of <em>thirteen years.</em>
          </h1>
          <p className="de-page-head__lead de-reveal de-reveal-3 is-in">
            Digit Estate began as a small architectural practice in Abu Dhabi. Today, with
            seventy-three architects, designers and engineers, we deliver private residences
            across the Emirates with the same patience and care.
          </p>
        </div>
      </section>
      <About onNavigate={onNavigate}/>
      <Stats/>
      <Services/>
      <Testimonials/>
    </>
  );
}

function PortfolioScreen({ onNavigate, onOpenProject }) {
  const r = useReveal();
  return (
    <>
      <section className="de-page-head">
        <div className="de-container de-page-head__inner" ref={r}>
          <div className="de-eyebrow de-reveal is-in">Selected Work · 2022 — 2025</div>
          <h1 className="de-page-head__title de-reveal de-reveal-2 is-in">
            The <em>portfolio.</em>
          </h1>
          <p className="de-page-head__lead de-reveal de-reveal-3 is-in">
            Twelve residences from the last three years of practice. Filter by typology or browse the
            full collection — each project is documented with drawings, photography and material notes.
          </p>
        </div>
      </section>
      <Portfolio onOpen={onOpenProject} onNavigate={onNavigate} full/>
    </>
  );
}

function ContactScreen({ onNavigate }) {
  const r = useReveal();
  return (
    <>
      <section className="de-page-head">
        <div className="de-container de-page-head__inner" ref={r}>
          <div className="de-eyebrow de-reveal is-in">Begin a Brief</div>
          <h1 className="de-page-head__title de-reveal de-reveal-2 is-in">
            Got a project<br/>in <em>mind?</em>
          </h1>
          <p className="de-page-head__lead de-reveal de-reveal-3 is-in">
            We respond to every inquiry within two business days, usually with a short call
            to understand the scope and timeline.
          </p>
        </div>
      </section>
      <Contact/>

      <section className="de-section de-locmap">
        <div className="de-container de-locmap__grid">
          <div className="de-locmap__map">
            <img src="assets/imagery/marble-brass-texture.png" alt="" style={{filter: 'sepia(0.4) saturate(0.4) brightness(0.95)'}}/>
            <div className="de-locmap__pin">
              <Icon name="pin" size={28}/>
            </div>
          </div>
          <div className="de-locmap__card">
            <div className="de-eyebrow">Visit the Atelier</div>
            <h3 className="de-locmap__title">Al Otaibah Building</h3>
            <p className="de-locmap__addr">Al Otaibah Building, Hamdan Street, Abu Dhabi — UAE. Office 404.</p>
            <p style={{color: 'var(--fg-2)', marginTop: 12}}>
              Visiting us? Google Maps will get you here. Just search our location.
            </p>
            <a className="de-btn de-btn--primary" style={{marginTop: 24}}>
              Take Me There <span className="arrow"></span>
            </a>
          </div>
        </div>
      </section>
    </>
  );
}

function ProjectDetail({ project, onClose, onOpenProject }) {
  useEffect(() => {
    document.body.style.overflow = 'hidden';
    return () => { document.body.style.overflow = ''; };
  }, []);
  const others = PROJECTS.filter(p => p.id !== project.id).slice(0, 2);
  return (
    <div className="de-detail">
      <button className="de-detail__close" onClick={onClose} aria-label="Close">
        <Icon name="close" size={20}/>
        <span>CLOSE</span>
      </button>

      <section className="de-detail__hero">
        <img src={project.image} alt={project.title}/>
        <div className="de-detail__hero-overlay"></div>
        <div className="de-detail__hero-inner">
          <div className="de-eyebrow" style={{color: 'var(--de-gold)'}}>{project.code} · {project.category}</div>
          <h1 className="de-detail__title">{project.title}</h1>
          <div className="de-detail__sub">{project.location} · {project.year}</div>
        </div>
      </section>

      <section className="de-section">
        <div className="de-container de-detail__grid">
          <div className="de-detail__left">
            <div className="de-eyebrow">The Brief</div>
            <h2 className="de-detail__h2">
              A residence built for <em>light.</em>
            </h2>
            <p style={{marginTop: 24, color: 'var(--fg-2)', fontSize: 17, lineHeight: 1.7}}>
              {project.blurb}
            </p>
            <p style={{marginTop: 18, color: 'var(--fg-2)', fontSize: 17, lineHeight: 1.7}}>
              The principal volume is organised around a single travertine spine that carries every
              service, lighting and ventilation run. Joinery is bookmatched American walnut. Every
              brass element — from the cove trim to the dining table base — was hand-finished in the
              atelier workshop.
            </p>
          </div>
          <aside className="de-detail__aside">
            <dl className="de-detail__specs">
              <dt>Area</dt><dd>{project.area}</dd>
              <dt>Bedrooms</dt><dd>{project.bedrooms}</dd>
              <dt>Bathrooms</dt><dd>{project.bathrooms}</dd>
              <dt>Built</dt><dd>{project.built}</dd>
              <dt>Value</dt><dd>{project.value}</dd>
              <dt>Year</dt><dd>{project.year}</dd>
            </dl>
          </aside>
        </div>
      </section>

      <section className="de-section de-detail__gallery">
        <div className="de-container">
          <div className="de-detail__gallery-grid">
            <img src="assets/imagery/living-fireplace.png" alt=""/>
            <img src="assets/imagery/bedroom-bay-sunset.png" alt=""/>
            <img src="assets/imagery/living-skyline-golden.png" alt=""/>
          </div>
        </div>
      </section>

      <section className="de-section de-section--cream">
        <div className="de-container">
          <div className="de-eyebrow" style={{marginBottom: 12}}>Continue the tour</div>
          <h2 style={{fontSize: 38, marginTop: 0, marginBottom: 40, fontFamily: 'var(--font-display)', fontWeight: 400}}>
            Other Residences
          </h2>
          <div className="de-portfolio__grid">
            {others.map(p => <ProjectCard key={p.id} project={p} onOpen={onOpenProject}/>)}
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { HomeScreen, AboutScreen, PortfolioScreen, ContactScreen, ProjectDetail });