// Case study page (Tattu = hero model) + lightbox
function PageCase({ go, id, showMaterials }) {
  const list = window.ATG.PROJECTS;
  const idx = list.findIndex(p => p.id === id);
  const p = idx >= 0 ? list[idx] : list[0];
  const prev = list[(idx - 1 + list.length) % list.length];
  const next = list[(idx + 1) % list.length];
  const [lb, setLb] = useState(null);

  return (
    <main>
      {/* HERO */}
      <section style={{ position: 'relative', background: 'var(--noir)' }}>
        <div style={{ position: 'relative', height: '78vh', minHeight: 560, overflow: 'hidden' }}>
          <img src={p.img} alt={p.name + ' interior'} className="img-fill" style={{ opacity: .85 }} />
          <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(11,13,15,.3) 0%, rgba(11,13,15,.05) 40%, rgba(11,13,15,.9) 100%)' }}></div>
          <div className="wrap" style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', paddingBottom: 56 }}>
            <div className="eyebrow" style={{ color: '#C8C1B0' }}>
              <a href="#projects" onClick={(e)=>{e.preventDefault(); go('projects');}} style={{ color: '#C8C1B0', borderBottom: '1px solid currentColor' }}>Projects</a>
              <span style={{ marginLeft: 12, color: 'var(--bronze-soft)' }}>{p.sectorName}</span>
            </div>
            <h1 className="mt-3" style={{ color: '#F2EEE5', maxWidth: '20ch' }}>
              {p.name} <span className="editorial" style={{ color: 'var(--bronze-soft)', display: 'block', fontSize: '0.62em', lineHeight: 1.1, marginTop: 8 }}>{p.tagline}</span>
            </h1>
          </div>
        </div>
      </section>

      {/* METADATA BAR */}
      <section style={{ background: 'var(--paper)' }}>
        <div className="wrap">
          <div className="meta-bar">
            {[
              ['Sector', p.sectorName],
              ['Location', p.location],
              ['Scope', p.scope],
              ['Size', p.size],
              ['Year', p.year],
              ['Client', p.client],
            ].map(([k,v]) => (
              <div key={k} className="meta-cell">
                <div className="meta-k">{k}</div>
                <div className="meta-v">{v}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* NARRATIVE */}
      <section className="section">
        <div className="wrap">
          <div className="row row-12" style={{ alignItems: 'baseline' }}>
            <div className="col-span-5">
              <div className="eyebrow"><span className="idx">01</span>Brief</div>
              <h3 className="mt-3" style={{ fontSize: 'clamp(22px, 2.4vw, 32px)', letterSpacing: '-0.025em' }}>
                What the operator asked us to deliver.
              </h3>
            </div>
            <div className="col-span-7">
              <p className="lead">{p.brief}</p>
            </div>
          </div>

          <hr className="rule mt-8 mb-8" />

          <div className="row row-12" style={{ alignItems: 'baseline' }}>
            <div className="col-span-5">
              <div className="eyebrow"><span className="idx">02</span>Concept</div>
              <h3 className="mt-3" style={{ fontSize: 'clamp(22px, 2.4vw, 32px)', letterSpacing: '-0.025em' }}>
                How we translated brief into <span className="editorial">place</span>.
              </h3>
            </div>
            <div className="col-span-7">
              <p className="lead">{p.concept}</p>
            </div>
          </div>
        </div>
      </section>

      {/* IMAGE LARGE 1 */}
      <section style={{ paddingBottom: 96 }}>
        <div className="wrap">
          <div className="media-card" style={{ aspectRatio: '16/9', cursor: 'zoom-in' }} onClick={() => setLb(p.img)}>
            <img src={p.img} alt={p.name + ' detail'} loading="lazy" className="img-fill" />
          </div>
          <div className="mt-2 between">
            <p className="muted" style={{ fontSize: 12, letterSpacing: '0.06em', textTransform: 'uppercase' }}>{p.credit}</p>
            <span className="muted tnum" style={{ fontSize: 12, letterSpacing: '0.06em', textTransform: 'uppercase' }}>01 / 03</span>
          </div>
        </div>
      </section>

      {/* MATERIALS */}
      {showMaterials !== false && (
        <section className="section section--stone">
          <div className="wrap">
            <div className="row row-12" style={{ alignItems: 'baseline' }}>
              <div className="col-span-5">
                <div className="eyebrow"><span className="idx">03</span>Materials</div>
                <h3 className="mt-3" style={{ fontSize: 'clamp(22px, 2.4vw, 32px)', letterSpacing: '-0.025em' }}>
                  Specified, sourced, and where possible <span className="editorial">made in-house</span>.
                </h3>
                <p className="muted mt-3" style={{ fontSize: 14 }}>
                  Marked items below were fabricated in our 30,000 sq ft joinery facility.
                </p>
              </div>
              <div className="col-span-7">
                <div style={{ borderTop: '1px solid var(--line)' }}>
                  {p.materials.map((m, i) => {
                    const inhouse = i % 3 !== 1; // illustrative flag
                    return (
                      <div key={i} style={{ display: 'grid', gridTemplateColumns: '36px 1fr 130px', gap: 16, padding: '18px 0', borderBottom: '1px solid var(--line)', alignItems: 'center' }}>
                        <span className="tnum" style={{ color: 'var(--bronze)', fontSize: 12, letterSpacing: '0.08em' }}>{String(i+1).padStart(2,'0')}</span>
                        <span style={{ fontFamily: 'Inter Tight', fontWeight: 500, fontSize: 17, letterSpacing: '-0.01em' }}>{m}</span>
                        <span style={{ fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: inhouse ? 'var(--bronze)' : 'var(--graphite)', textAlign: 'right' }}>
                          {inhouse ? 'In-house joinery' : 'Specified · sourced'}
                        </span>
                      </div>
                    );
                  })}
                </div>
              </div>
            </div>
          </div>
        </section>
      )}

      {/* PROCESS */}
      <section className="section">
        <div className="wrap">
          <div className="row row-12" style={{ alignItems: 'baseline' }}>
            <div className="col-span-5">
              <div className="eyebrow"><span className="idx">04</span>Process</div>
              <h3 className="mt-3" style={{ fontSize: 'clamp(22px, 2.4vw, 32px)', letterSpacing: '-0.025em' }}>
                In-house design, joinery and MEP, on <span className="editorial">one programme</span>.
              </h3>
            </div>
            <div className="col-span-7">
              <p className="lead">{p.process}</p>
              <div className="row row-3 mt-6">
                {[
                  { lbl: 'Design coordination', v: 'In-house' },
                  { lbl: 'Joinery fabrication', v: '30,000 sq ft' },
                  { lbl: 'MEP', v: 'In-house team' },
                ].map(r => (
                  <div key={r.lbl} style={{ borderTop: '1px solid var(--line)', paddingTop: 14 }}>
                    <div className="stat-lbl" style={{ marginTop: 0 }}>{r.lbl}</div>
                    <div style={{ fontFamily: 'Inter Tight', fontWeight: 500, fontSize: 20, marginTop: 4 }}>{r.v}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* GALLERY */}
      <section style={{ paddingBottom: 96 }}>
        <div className="wrap">
          <div className="eyebrow mb-3"><span className="idx">05</span>Gallery</div>
          <div className="gallery">
            <div className="g-7" onClick={() => setLb(p.gallery[0] || p.img)}>
              <img src={p.gallery[0] || p.img} alt="" className="img-fill" />
            </div>
            <div className="g-5" onClick={() => setLb(p.gallery[1] || p.img)}>
              <img src={p.gallery[1] || p.img} alt="" className="img-fill" />
            </div>
            {p.gallery[2] && (
              <div className="g-12" onClick={() => setLb(p.gallery[2])}>
                <img src={p.gallery[2]} alt="" className="img-fill" />
              </div>
            )}
          </div>
          <p className="muted mt-3" style={{ fontSize: 12, letterSpacing: '0.06em', textTransform: 'uppercase' }}>{p.credit}</p>
        </div>
      </section>

      {/* OUTCOME */}
      <section className="section section--stone">
        <div className="wrap">
          <div className="row row-12" style={{ alignItems: 'baseline' }}>
            <div className="col-span-5">
              <div className="eyebrow"><span className="idx">06</span>Outcome</div>
            </div>
            <div className="col-span-7">
              <h2>{p.outcome}</h2>
            </div>
          </div>
          <hr className="rule mt-6 mb-6" />
          <div className="between" style={{ flexWrap: 'wrap', gap: 24 }}>
            <div>
              <div className="eyebrow no-rule">Build a similar project</div>
              <h3 className="mt-2">Tell us what you&rsquo;re opening.</h3>
            </div>
            <button className="btn btn--lg" onClick={() => go('contact', { sector: p.sector })}>
              Start a similar project <span className="arr">→</span>
            </button>
          </div>
        </div>
      </section>

      {/* PREV / NEXT */}
      <section className="section--sm" style={{ paddingTop: 64, paddingBottom: 96 }}>
        <div className="wrap">
          <div className="row row-2" style={{ rowGap: 24 }}>
            <a href={"#projects/"+prev.id} onClick={(e)=>{e.preventDefault(); go('project:'+prev.id);}}
               style={{ textDecoration: 'none', color: 'inherit' }}>
              <div className="eyebrow no-rule">← Previous</div>
              <div className="row" style={{ gridTemplateColumns: '120px 1fr', gap: 18, marginTop: 12, alignItems: 'center' }}>
                <div className="media-card" style={{ aspectRatio: '1/1' }}>
                  <img src={prev.img} alt={prev.name} className="img-fill" />
                </div>
                <div>
                  <div style={{ fontFamily: 'Inter Tight', fontWeight: 500, fontSize: 22, letterSpacing: '-0.02em' }}>{prev.name}</div>
                  <div className="muted" style={{ fontSize: 12, letterSpacing: '0.06em', textTransform: 'uppercase', marginTop: 4 }}>{prev.location}</div>
                </div>
              </div>
            </a>
            <a href={"#projects/"+next.id} onClick={(e)=>{e.preventDefault(); go('project:'+next.id);}}
               style={{ textDecoration: 'none', color: 'inherit', textAlign: 'right' }}>
              <div className="eyebrow no-rule" style={{ justifyContent: 'flex-end' }}>Next →</div>
              <div className="row" style={{ gridTemplateColumns: '1fr 120px', gap: 18, marginTop: 12, alignItems: 'center' }}>
                <div>
                  <div style={{ fontFamily: 'Inter Tight', fontWeight: 500, fontSize: 22, letterSpacing: '-0.02em' }}>{next.name}</div>
                  <div className="muted" style={{ fontSize: 12, letterSpacing: '0.06em', textTransform: 'uppercase', marginTop: 4 }}>{next.location}</div>
                </div>
                <div className="media-card" style={{ aspectRatio: '1/1' }}>
                  <img src={next.img} alt={next.name} className="img-fill" />
                </div>
              </div>
            </a>
          </div>
        </div>
      </section>

      {lb && (
        <div onClick={() => setLb(null)}
             style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,.92)', zIndex: 80, display: 'flex',
                      alignItems: 'center', justifyContent: 'center', padding: 24, cursor: 'zoom-out' }}>
          <img src={lb} alt="" style={{ maxWidth: '100%', maxHeight: '92vh', objectFit: 'contain' }} />
          <button style={{ position: 'absolute', top: 24, right: 24, background: 'transparent', border: 0, color: '#fff', fontSize: 28 }}>×</button>
        </div>
      )}
    </main>
  );
}

Object.assign(window, { PageCase });