/* global React, PROJECTS */
function ProjectDetail({ project, onClose, onNext }) {
  const next = PROJECTS[(PROJECTS.findIndex(p => p.num === project.num) + 1) % PROJECTS.length];
  React.useEffect(() => {
    document.body.style.overflow = 'hidden';
    return () => { document.body.style.overflow = ''; };
  }, []);
  return (
    <div className="detail" data-screen-label={`Project Detail · ${project.nameEn}`}>
      <div className="detail-bar">
        <a className="detail-back" onClick={onClose}>
          <span className="arr"></span> Back to Projects
        </a>
        <div className="detail-bar-meta">
          <span>{project.num}</span>
          <span>{project.nameEn}</span>
          <span>{project.year}</span>
        </div>
        <div></div>
      </div>

      <div className="detail-hero">
        <img src={`assets/${project.images[0]}`} alt="" />
        <div className="detail-hero-info">
          <div className="num">{project.num}</div>
          <div className="title-stack">
            <span className="en">{project.nameEn}</span>
            <span className="zh">{project.nameZh}</span>
          </div>
          <div className="meta">
            <span><span className="key">YEAR</span>{project.year}</span>
            <span><span className="key">LOCATION</span>{project.location}</span>
            <span><span className="key">TYPOLOGY</span>{project.typology}</span>
          </div>
        </div>
      </div>

      <div className="detail-fact-strip">
        <div className="detail-fact">
          <span className="key">Year</span><span className="val">{project.year}</span>
        </div>
        <div className="detail-fact">
          <span className="key">Location</span><span className="val">{project.location}</span>
        </div>
        <div className="detail-fact">
          <span className="key">Typology</span><span className="val">{project.typology}</span>
        </div>
        <div className="detail-fact">
          <span className="key">Units</span><span className="val">{project.units || '—'}</span>
        </div>
        <div className="detail-fact">
          <span className="key">Floor Area</span><span className="val">{project.area || '—'}</span>
        </div>
      </div>

      <div className="detail-narrative">
        <div className="lead-in">PROJECT NOTE · {project.num}</div>
        <div className="detail-narrative-body">
          <p className="pull">
            "{project.blurb}"
          </p>
          <p>
            The site sits at the edge of a quiet street, where the air still smells
            of cut grass and the morning light arrives slowly. We began with the
            section: a deep veranda that cools the interior in summer, and a vertical
            louvre that shifts its shadow across the wall through the afternoon.
          </p>
          <p>
            Materials are restrained — white render, glass, and a single stone tone.
            The plan is generous where it matters, tight where it does not. Every
            unit looks both inward to a private courtyard and outward to the
            neighbourhood, refusing the choice between privacy and presence.
          </p>
          <p className="zh zh-only">
            基地座落在一條安靜的街道邊。我們從剖面開始──一道深陽台在夏天降溫,
            一組垂直格柵讓影子在牆面上慢慢移動;材料只有白色塗料、玻璃,
            與一種石頭的色調。每一戶同時望向私密的內院與街廓的鄰里,
            不再需要在隱私與存在之間二擇一。
          </p>
        </div>
      </div>

      <div className="detail-gallery">
        <div className="full"><img src={`assets/${project.images[1] || project.images[0]}`} alt="" /></div>
        <div className="half"><img src={`assets/${project.images[0]}`} alt="" /></div>
        <div className="half"><img src={`assets/${project.images[2] || project.images[1] || project.images[0]}`} alt="" /></div>
        <div className="detail-caption">
          <span>Plates 01—03 · Selected views</span>
          <span>Photography · Yuan Studio</span>
        </div>
      </div>

      <div className="detail-next" onClick={() => onNext(next)}>
        <div className="text">
          <div className="eyebrow">Next Project · {next.num}</div>
          <h3 className="title">{next.nameEn}</h3>
          <div className="title-zh zh-only">{next.nameZh}</div>
        </div>
        <div className="img">
          <img src={`assets/${next.images[0]}`} alt="" />
        </div>
      </div>
    </div>
  );
}
window.ProjectDetail = ProjectDetail;