// Zen Interiors — Case Study page
function CaseStudyPage({ navigate, slug, openEnquiry }) {
  const projects = window.ZEN_PROJECTS;
  const project = projects.find(p => p.slug === slug);
  const idx = projects.findIndex(p => p.slug === slug);
  const next = projects[(idx + 1) % projects.length];
  const prev = projects[(idx - 1 + projects.length) % projects.length];

  const [lightbox, setLightbox] = useState(-1);

  useEffect(() => { window.scrollTo({ top: 0, behavior: 'instant' }); }, [slug]);

  if (!project) {
    return (
      <main className="container" style={{ padding: '120px 0' }}>
        <div className="eyebrow">404</div>
        <h1 className="display" style={{ fontSize: 64 }}>Project not found.</h1>
        <button className="btn" onClick={() => navigate('/projects')}>All projects <ArrowRight /></button>
      </main>
    );
  }

  return (
    <main className="fade-in" data-screen-label={`Case Study / ${project.name}`}>

      {/* Hero */}
      <section style={{ position: 'relative', height: '88vh', minHeight: 560, overflow: 'hidden' }}>
        <img src={project.hero} alt={project.name}
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(28,26,22,0.0) 35%, rgba(28,26,22,0.65) 100%)' }} />
        <div className="container" style={{
          position: 'relative', zIndex: 2, height: '100%',
          display: 'flex', flexDirection: 'column', justifyContent: 'flex-end',
          paddingBottom: 56, color: 'var(--paper)',
        }}>
          <div className="eyebrow" style={{ color: 'rgba(250,247,242,0.8)' }}>
            <a href="#/projects" onClick={(e) => { e.preventDefault(); navigate('/projects'); }}
              style={{ color: 'rgba(250,247,242,0.85)', borderBottom: '1px solid rgba(250,247,242,0.4)' }}>
              Projects
            </a>
            <span style={{ margin: '0 10px' }}>/</span>
            <span>{project.sector}</span>
          </div>
          <h1 className="display" style={{ fontSize: 'clamp(56px, 9vw, 144px)', margin: '14px 0 0', lineHeight: 0.94, fontWeight: 300 }}>
            {project.name}<span className="display-italic" style={{ color: 'var(--linen)' }}>.</span>
          </h1>
          <div style={{ marginTop: 16, fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.18em', color: 'rgba(250,247,242,0.7)' }}>
            PHOTO CREDIT TBC
          </div>
        </div>
      </section>

      {/* Metadata bar */}
      <section style={{ background: 'var(--linen-soft)', borderBottom: '1px solid var(--line)' }}>
        <div className="container" style={{
          display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(160px, 1fr))',
          padding: '36px 0', gap: 28,
        }}>
          {[
            { label: 'Sector', value: project.sector },
            { label: 'Location', value: project.location },
            { label: 'Year', value: project.year },
            { label: 'Scope', value: project.scope },
            project.award && { label: 'Recognition', value: project.award, accent: true },
          ].filter(Boolean).map(m => (
            <div key={m.label}>
              <div className="eyebrow">{m.label}</div>
              <div style={{
                marginTop: 8,
                fontFamily: m.accent ? 'var(--font-display)' : 'var(--font-sans)',
                fontStyle: m.accent ? 'italic' : 'normal',
                color: m.accent ? 'var(--clay-deep)' : 'var(--ink)',
                fontSize: m.accent ? 18 : 15,
                lineHeight: 1.35,
              }}>{m.value}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Narrative — Brief & Concept */}
      <section className="container" style={{ paddingTop: 'clamp(80px, 12vh, 140px)', paddingBottom: 80 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 'clamp(40px, 8vw, 120px)', alignItems: 'start' }}>
          <div>
            <div className="eyebrow">The brief</div>
            <hr className="rule" style={{ marginTop: 14 }} />
          </div>
          <div>
            <p className="display" style={{ fontSize: 'clamp(24px, 2.6vw, 36px)', lineHeight: 1.3, margin: 0, fontWeight: 300 }}>
              {project.brief}
            </p>
          </div>
        </div>
      </section>

      {/* Single image break */}
      {project.gallery[1] && (
        <section style={{ padding: '40px 0' }}>
          <div style={{ maxWidth: 1600, margin: '0 auto', padding: '0 var(--gutter)' }}>
            <div className="img-frame" style={{ aspectRatio: '16/9' }}>
              <img src={project.gallery[1]} alt="" className="img-cover" />
            </div>
            <div style={{ marginTop: 14, display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.16em', color: 'var(--stone)' }}>
              <span>FRAME 02 — {project.name.toUpperCase()}</span>
              <span>PHOTO CREDIT TBC</span>
            </div>
          </div>
        </section>
      )}

      <section className="container" style={{ paddingTop: 80, paddingBottom: 80 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 'clamp(40px, 8vw, 120px)', alignItems: 'start' }}>
          <div>
            <div className="eyebrow">The concept</div>
            <hr className="rule" style={{ marginTop: 14 }} />
          </div>
          <div>
            <p style={{ fontSize: 19, lineHeight: 1.65, margin: 0, color: 'var(--ink)', maxWidth: 640 }}>
              {project.concept}
            </p>

            <div style={{ marginTop: 56, display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(160px, 1fr))', gap: 0, borderTop: '1px solid var(--line-strong)' }}>
              <div style={{ padding: '22px 0', borderRight: '1px solid var(--line)', paddingRight: 24 }}>
                <div className="eyebrow">Materials</div>
              </div>
              {project.materials.map((m, i) => (
                <div key={i} style={{
                  padding: '22px 20px',
                  borderRight: i < project.materials.length - 1 ? '1px solid var(--line)' : 'none',
                  fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 18, color: 'var(--clay-deep)',
                  display: 'flex', alignItems: 'center',
                }}>
                  {m}
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Gallery grid */}
      <section className="container" style={{ paddingTop: 80, paddingBottom: 120 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 48 }}>
          <div>
            <div className="eyebrow">Gallery</div>
            <h2 className="display" style={{ fontSize: 'clamp(36px, 4.4vw, 60px)', margin: '12px 0 0', lineHeight: 1.05, fontWeight: 300 }}>
              The rooms <span className="display-italic" style={{ color: 'var(--clay)' }}>in full.</span>
            </h2>
          </div>
          <div className="eyebrow">{project.gallery.length} frames</div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 'clamp(12px, 2vw, 24px)', rowGap: 'clamp(20px, 3vw, 32px)' }}>
          {project.gallery.map((src, i) => {
            // Asymmetric mosaic
            const layouts = [
              { col: 'span 12', ratio: '16/9' },
              { col: 'span 7', ratio: '4/5' },
              { col: 'span 5', ratio: '4/5' },
              { col: 'span 5', ratio: '4/5' },
              { col: 'span 7', ratio: '4/5' },
              { col: 'span 6', ratio: '3/4' },
              { col: 'span 6', ratio: '3/4' },
            ];
            const L = layouts[i % layouts.length];
            return (
              <button key={i} onClick={() => setLightbox(i)}
                style={{
                  background: 'transparent', border: 0, padding: 0, cursor: 'zoom-in',
                  gridColumn: L.col,
                }}>
                <div className="img-frame" style={{ aspectRatio: L.ratio }}>
                  <img src={src} alt="" className="img-cover" />
                </div>
              </button>
            );
          })}
        </div>

        <p style={{ marginTop: 24, fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', color: 'var(--stone)' }}>
          ⚠ ALL FRAMES — PHOTOGRAPHER CREDIT & REPUBLICATION RIGHTS TO BE CONFIRMED BEFORE PUBLISHING.
        </p>
      </section>

      {/* CTA inline */}
      <section style={{ background: 'var(--linen)', padding: '80px 0' }}>
        <div className="container" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 32, flexWrap: 'wrap' }}>
          <div>
            <div className="eyebrow">Begin a similar project</div>
            <h3 className="display" style={{ fontSize: 'clamp(28px, 3.4vw, 44px)', margin: '12px 0 0' }}>
              Tell us about <span className="display-italic" style={{ color: 'var(--clay)' }}>your home.</span>
            </h3>
          </div>
          <div style={{ display: 'flex', gap: 14 }}>
            <button className="btn" onClick={openEnquiry}>Request a consultation <ArrowRight /></button>
            <a className="btn btn-ghost" href={window.ZEN_CONTACT.phoneHref}>Call us</a>
          </div>
        </div>
      </section>

      {/* Next / Prev */}
      <section className="container" style={{ paddingTop: 80, paddingBottom: 80 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32 }}>
          <a href={`#/projects/${prev.slug}`} onClick={(e) => { e.preventDefault(); navigate(`/projects/${prev.slug}`); }}
             style={{ display: 'block', cursor: 'pointer' }}>
            <div className="eyebrow" style={{ marginBottom: 18 }}>← Previous project</div>
            <div className="img-frame" style={{ aspectRatio: '16/9', marginBottom: 16 }}>
              <img src={prev.cover} alt={prev.name} className="img-cover" />
            </div>
            <h3 className="display" style={{ fontSize: 28, margin: 0 }}>{prev.name}</h3>
            <div className="eyebrow" style={{ marginTop: 6 }}>{prev.sector} · {prev.location}</div>
          </a>
          <a href={`#/projects/${next.slug}`} onClick={(e) => { e.preventDefault(); navigate(`/projects/${next.slug}`); }}
             style={{ display: 'block', cursor: 'pointer', textAlign: 'right' }}>
            <div className="eyebrow" style={{ marginBottom: 18 }}>Next project →</div>
            <div className="img-frame" style={{ aspectRatio: '16/9', marginBottom: 16 }}>
              <img src={next.cover} alt={next.name} className="img-cover" />
            </div>
            <h3 className="display" style={{ fontSize: 28, margin: 0 }}>{next.name}</h3>
            <div className="eyebrow" style={{ marginTop: 6 }}>{next.sector} · {next.location}</div>
          </a>
        </div>
      </section>

      {lightbox >= 0 && (
        <Lightbox images={project.gallery} index={lightbox}
          onClose={() => setLightbox(-1)}
          onPrev={() => setLightbox(i => (i - 1 + project.gallery.length) % project.gallery.length)}
          onNext={() => setLightbox(i => (i + 1) % project.gallery.length)} />
      )}
    </main>
  );
}

window.CaseStudyPage = CaseStudyPage;