// Project Detail — editorial case study, built only on known facts.
function ProjectDetail({ projectId }) {
  const project = PROJECTS.find(p => p.id === projectId) || PROJECTS[0];
  const next = PROJECTS[(PROJECTS.indexOf(project) + 1) % PROJECTS.length];
  const gallery = project.gallery && project.gallery.length ? project.gallery : [project.cover];

  return (
    <div className="page" data-screen-label="03 Project Detail">
      {/* Cinematic header */}
      <section style={{ position: "relative", height: "100vh", minHeight: 720, overflow: "hidden" }}>
        <div className="img" style={{ position: "absolute", inset: 0, backgroundImage: `url(${project.cover})`, backgroundPosition: "center 45%" }} />
        <div className="cine-grad" />
        <div className="container" style={{ position: "relative", zIndex: 5, height: "100%", display: "flex", flexDirection: "column", justifyContent: "space-between", paddingTop: "calc(var(--pad) + 96px)", paddingBottom: "10vh" }}>
          <div>
            <a className="lnk" onClick={() => window.__route("projects")} style={{ color: "var(--bone-2)", borderColor: "var(--bone-4)" }}>← All Projects</a>
          </div>
          <div>
            <div className="eyebrow" style={{ marginBottom: 24, color: "var(--bone-2)" }}>
              <span className="dot"></span>{project.category} · {project.place}
            </div>
            <h1 style={{ fontSize: "clamp(56px, 8vw, 140px)", lineHeight: .95 }}>
              {project.title}
            </h1>
            <div style={{ marginTop: 48, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24, borderTop: "1px solid rgba(237,232,220,.25)", paddingTop: 24, color: "var(--bone-2)", maxWidth: 760 }}>
              {[
                { l: "Sector",   v: project.category },
                { l: "Location", v: project.place },
                { l: "Delivery", v: project.role },
              ].map(x => (
                <div key={x.l}>
                  <div className="eyebrow" style={{ marginBottom: 8 }}>{x.l}</div>
                  <div style={{ fontFamily: "var(--serif)", fontSize: 18, color: "var(--bone)" }}>{x.v}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Narrative */}
      <section className="section">
        <div className="container">
          <div className="grid grid-12" style={{ gap: 64 }}>
            <div style={{ gridColumn: "1 / span 4" }}>
              <div className="eyebrow"><span className="dot"></span>Overview</div>
            </div>
            <div style={{ gridColumn: "5 / span 8" }}>
              <Reveal>
                <p style={{ fontFamily: "var(--serif)", fontSize: "clamp(24px, 2.4vw, 38px)", lineHeight: 1.25, color: "var(--bone)", margin: 0, fontWeight: 300 }}>
                  {project.blurb}
                </p>
              </Reveal>
              <Reveal delay={150}>
                <p style={{ marginTop: 36, color: "var(--bone-2)", fontSize: 16, lineHeight: 1.75, maxWidth: 720 }}>
                  {project.long}
                </p>
              </Reveal>
            </div>
          </div>
        </div>
      </section>

      {/* Big editorial image */}
      <section>
        <div className="container">
          <div className="img ar-21-9" style={{ backgroundImage: `url(${project.detail || project.cover})` }} />
          <div style={{ marginTop: 14, display: "flex", justifyContent: "space-between", color: "var(--bone-3)", fontSize: 11, letterSpacing: ".14em", textTransform: "uppercase" }}>
            <span>{project.title}</span>
            <span>{project.place}</span>
          </div>
        </div>
      </section>

      {/* Approach */}
      <section className="section">
        <div className="container">
          <div className="grid grid-2" style={{ gap: 48 }}>
            <Reveal>
              <div style={{ borderTop: "1px solid var(--line)", paddingTop: 28 }}>
                <div className="eyebrow" style={{ marginBottom: 22 }}>The Brief</div>
                <h3 style={{ fontSize: "clamp(26px, 2.4vw, 36px)", marginBottom: 20, lineHeight: 1.2 }}>
                  Build something that belongs — to its site, its owner, and the people who use it every day.
                </h3>
                <p style={{ color: "var(--bone-2)", lineHeight: 1.7 }}>
                  Whether a home, a healthcare building, or a recreation facility, the starting point is the same: understand how the building will actually be lived in, and design the construction around that.
                </p>
              </div>
            </Reveal>
            <Reveal delay={120}>
              <div style={{ borderTop: "1px solid var(--bronze)", paddingTop: 28 }}>
                <div className="eyebrow" style={{ marginBottom: 22, color: "var(--bronze-2)" }}>The Response</div>
                <h3 style={{ fontSize: "clamp(26px, 2.4vw, 36px)", marginBottom: 20, lineHeight: 1.2 }}>
                  A principal on the job, a short chain of command, and craft held to a single standard.
                </h3>
                <p style={{ color: "var(--bone-2)", lineHeight: 1.7 }}>
                  GenTech keeps the team small and senior. Owners and design partners work with the people who make decisions — and those people are on site, not behind a desk.
                </p>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      {/* Gallery */}
      {gallery.length > 1 && (
        <section className="section" style={{ background: "var(--bg-2)" }}>
          <div className="container">
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", marginBottom: 40 }}>
              <h2 style={{ fontSize: "clamp(32px, 4vw, 56px)" }}>
                Gallery <span className="italic" style={{ color: "var(--bronze-2)" }}>— {gallery.length} plates</span>
              </h2>
            </div>
            <ProjectGallery gallery={gallery} />
          </div>
        </section>
      )}

      {/* Craft note */}
      <section className="section">
        <div className="container">
          <div className="grid grid-12" style={{ alignItems: "center" }}>
            <div style={{ gridColumn: "1 / span 1" }}>
              <span style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 96, color: "var(--bronze-2)", lineHeight: .8 }}>"</span>
            </div>
            <div style={{ gridColumn: "2 / span 9" }}>
              <p style={{ fontFamily: "var(--serif)", fontSize: "clamp(28px, 3vw, 44px)", lineHeight: 1.3, color: "var(--bone)", margin: 0, fontWeight: 300 }}>
                We measure a project by whether it still feels right years later — and by whether the owner calls us for the next one.
              </p>
              <div style={{ marginTop: 32, display: "flex", gap: 16, alignItems: "center" }}>
                <div style={{ background: "var(--bone)", padding: "8px 14px", borderRadius: 2 }}>
                  <img src="assets/gentech-logo.png" alt="GenTech" style={{ height: 22, display: "block" }} />
                </div>
                <div className="eyebrow">GenTech Construction</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Next project */}
      <section style={{ position: "relative", height: "70vh", minHeight: 480, overflow: "hidden", cursor: "pointer" }} onClick={() => window.__openProject(next.id)}>
        <div className="img" style={{ position: "absolute", inset: 0, backgroundImage: `url(${next.cover})`, backgroundPosition: "center 50%" }} />
        <div className="cine-grad" />
        <div className="container" style={{ position: "relative", height: "100%", display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", textAlign: "center", zIndex: 2 }}>
          <div className="eyebrow" style={{ marginBottom: 24 }}>Next Project · {next.category}</div>
          <h2 style={{ fontSize: "clamp(44px, 6vw, 110px)" }}>{next.title}</h2>
          <div style={{ marginTop: 32 }}>
            <span className="lnk" style={{ color: "var(--bone)", borderColor: "var(--bronze)" }}>Continue →</span>
          </div>
        </div>
      </section>
    </div>
  );
}

function ProjectGallery({ gallery }) {
  // Adaptive editorial layout depending on count
  if (gallery.length <= 2) {
    return (
      <div className="grid grid-2" style={{ gap: 16 }}>
        {gallery.map((g, i) => <div key={i} className="img ar-3-2" style={{ backgroundImage: `url(${g})` }} />)}
      </div>
    );
  }
  return (
    <div className="grid grid-12" style={{ gap: 16 }}>
      <div style={{ gridColumn: "1 / span 8" }}><div className="img ar-3-2" style={{ backgroundImage: `url(${gallery[0]})` }} /></div>
      <div style={{ gridColumn: "9 / span 4" }}><div className="img" style={{ backgroundImage: `url(${gallery[1]})`, height: "100%", minHeight: 240 }} /></div>
      {gallery.slice(2).map((g, i) => {
        const span = (i % 3 === 0) ? "1 / span 4" : (i % 3 === 1) ? "5 / span 4" : "9 / span 4";
        return <div key={i} style={{ gridColumn: span }}><div className="img ar-4-5" style={{ backgroundImage: `url(${g})` }} /></div>;
      })}
    </div>
  );
}

Object.assign(window, { ProjectDetail });