/* Case detail page. Reads ?c=<slug>, renders hero + challenge/approach/outcome + next case. */
function CaseDetailPage({ t }) {
  const params = new URLSearchParams(location.search);
  const slug = params.get('c') || (t.cases.items[0] && t.cases.items[0].slug);
  const items = t.cases.items;
  const it = items.find(x => x.slug === slug) || items[0];
  const cd = (t.caseDetail && t.caseDetail.cases[it.slug]) || {};
  const L = (t.caseDetail && t.caseDetail.labels) || {};
  const idx = items.findIndex(x => x.slug === it.slug);
  const next = items[(idx + 1) % items.length];

  return (
    <React.Fragment>
      {/* Hero */}
      <Section bg="deep" label="Case hero" style={{ overflow:'hidden', background:'var(--deep-bg)' }}>
        <div aria-hidden="true" style={{ position:'absolute', inset:0, pointerEvents:'none', background:'radial-gradient(55% 70% at 82% 16%, rgba(123,47,190,.14), transparent 62%)' }}></div>
        <Container style={{ position:'relative', paddingTop:130, paddingBottom:64 }}>
          <Reveal>
            <div className="t-caption" style={{ display:'flex', gap:8, color:'var(--on-deep-3)', fontFamily:'var(--font-mono)', letterSpacing:'.04em', marginBottom:26 }}>
              <a href={window.PAGES.cases} style={{ color:'inherit', textDecoration:'none' }}>{L.back}</a>
              <span>→</span><span style={{ color:'var(--on-deep-2)' }}>{it.client}</span>
            </div>
          </Reveal>
          <div className="bne-split" style={{ display:'grid', gridTemplateColumns:'1.1fr .9fr', gap:48, alignItems:'center' }}>
            <div>
              <Reveal delay={40}>
                <div className="t-caption" style={{ fontFamily:'var(--font-mono)', color:'var(--accent)', letterSpacing:'.06em', textTransform:'uppercase', fontSize:12, display:'flex', alignItems:'center', gap:8 }}>
                  {it.sector}<span style={{ width:3, height:3, borderRadius:'50%', background:'rgba(255,255,255,.4)' }}></span><span style={{ color:'var(--on-deep-3)' }}>{it.meta}</span>
                </div>
              </Reveal>
              <Reveal delay={80}><h1 className="t-h1" style={{ margin:'14px 0 0', color:'var(--on-deep-1)', textWrap:'balance' }}>{it.title}</h1></Reveal>
              <Reveal delay={140}><p className="t-lead" style={{ color:'var(--on-deep-2)', marginTop:18, maxWidth:540 }}>{cd.overview || it.summary}</p></Reveal>
              <Reveal delay={200}>
                <div style={{ display:'inline-flex', alignItems:'center', gap:8, marginTop:26, padding:'10px 16px', borderRadius:'var(--r-pill)', background:'rgba(123,47,190,.22)', border:'1px solid rgba(198,163,236,.34)', color:'var(--on-deep-1)', fontFamily:'var(--font-mono)', fontSize:13, letterSpacing:'.02em' }}>
                  <Icon name="check" size={15} stroke={2.4}/>{it.metric}
                </div>
              </Reveal>
            </div>
            <Reveal delay={120}>
              <div style={{ position:'relative', borderRadius:'var(--r-xl)', overflow:'hidden', border:'1px solid var(--deep-border)', background:'linear-gradient(135deg, var(--navy-600), var(--navy-800))', aspectRatio:'4/3' }}>
                <image-slot id={`casehero-${it.slug}`} className="on-purple" fit="cover" shape="rect" placeholder={it.sector} style={{ position:'absolute', inset:0, width:'100%', height:'100%' }}></image-slot>
                {it.logo && <span style={{ position:'absolute', bottom:16, left:16, padding:'8px 13px', borderRadius:9, background:'rgba(10,4,24,.6)', backdropFilter:'blur(6px)', display:'inline-flex' }}><ClientLogo name={it.logo} h={18} /></span>}
              </div>
            </Reveal>
          </div>
        </Container>
      </Section>

      {/* Body: challenge + approach (left) · outcome + services (right) */}
      <Section bg="app" label="Case body">
        <Container style={window.PAD}>
          <div className="bne-case-cols" style={{ display:'grid', gridTemplateColumns:'1.4fr .6fr', gap:56, alignItems:'start' }}>
            <div>
              {cd.challenge && <Reveal>
                <h2 className="t-h3" style={{ color:'var(--text-1)', margin:0 }}>{L.challenge}</h2>
                <p className="t-lead" style={{ color:'var(--text-2)', marginTop:14 }}>{cd.challenge}</p>
              </Reveal>}
              {cd.approach && <Reveal delay={80}>
                <h2 className="t-h3" style={{ color:'var(--text-1)', margin:'40px 0 0' }}>{L.approach}</h2>
                <div style={{ display:'flex', flexDirection:'column', gap:14, marginTop:18 }}>
                  {cd.approach.map((p, i) => (
                    <div key={i} style={{ display:'flex', gap:14, alignItems:'flex-start' }}>
                      <span style={{ flexShrink:0, fontFamily:'var(--font-mono)', fontSize:13, color:'var(--accent)', marginTop:3 }}>{'0'+(i+1)}</span>
                      <p className="t-body" style={{ color:'var(--text-2)', margin:0 }}>{p}</p>
                    </div>
                  ))}
                </div>
              </Reveal>}
            </div>
            <div style={{ position:'sticky', top:96, display:'flex', flexDirection:'column', gap:24 }}>
              {cd.outcome && <Reveal delay={60}>
                <div style={{ background:'var(--card-bg)', border:'1px solid var(--border-1)', borderRadius:'var(--r-card)', padding:'24px 24px' }}>
                  <div className="t-caption" style={{ fontFamily:'var(--font-mono)', color:'var(--accent)', letterSpacing:'.08em', textTransform:'uppercase', marginBottom:14 }}>{L.outcome}</div>
                  <div style={{ display:'flex', flexDirection:'column', gap:12 }}>
                    {cd.outcome.map((o, i) => (
                      <div key={i} style={{ display:'flex', gap:10, alignItems:'flex-start' }}>
                        <Icon name="check" size={17} stroke={2.4} style={{ color:'var(--accent)', flexShrink:0, marginTop:2 }}/>
                        <span className="t-body" style={{ color:'var(--text-1)', fontWeight:500 }}>{o}</span>
                      </div>
                    ))}
                  </div>
                </div>
              </Reveal>}
              {cd.services && <Reveal delay={120}>
                <div style={{ background:'var(--card-bg)', border:'1px solid var(--border-1)', borderRadius:'var(--r-card)', padding:'24px 24px' }}>
                  <div className="t-caption" style={{ fontFamily:'var(--font-mono)', color:'var(--text-3)', letterSpacing:'.08em', textTransform:'uppercase', marginBottom:14 }}>{L.services}</div>
                  <div style={{ display:'flex', flexWrap:'wrap', gap:8 }}>
                    {cd.services.map(s => <span key={s} style={{ padding:'7px 13px', borderRadius:'var(--r-pill)', border:'1px solid var(--border-2)', color:'var(--text-2)', fontFamily:'var(--font-body)', fontSize:13.5, fontWeight:500 }}>{s}</span>)}
                  </div>
                </div>
              </Reveal>}
            </div>
          </div>
        </Container>
      </Section>

      {/* Next case + CTA */}
      <Section bg="alt" label="Case next">
        <Container style={{ paddingTop:64, paddingBottom:80 }}>
          <div className="bne-split" style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:20 }}>
            <a href={`case.html?c=${next.slug}`} style={{ display:'block', background:'var(--card-bg)', border:'1px solid var(--border-1)', borderRadius:'var(--r-card)', padding:'28px 30px', textDecoration:'none', transition:'all var(--dur)' }}
              onMouseEnter={e=>{e.currentTarget.style.transform='translateY(-3px)';e.currentTarget.style.boxShadow='var(--shadow-md)';}} onMouseLeave={e=>{e.currentTarget.style.transform='none';e.currentTarget.style.boxShadow='none';}}>
              <div className="t-caption" style={{ fontFamily:'var(--font-mono)', color:'var(--text-3)', letterSpacing:'.08em', textTransform:'uppercase' }}>{L.next}</div>
              <div className="t-h4" style={{ color:'var(--text-1)', marginTop:10 }}>{next.title}</div>
              <span style={{ display:'inline-flex', alignItems:'center', gap:7, marginTop:14, color:'var(--accent)', fontFamily:'var(--font-body)', fontWeight:600, fontSize:14.5 }}>{next.client} <Icon name="arrow" size={16}/></span>
            </a>
            <div style={{ display:'flex', flexDirection:'column', justifyContent:'center', alignItems:'flex-start', background:'var(--section-deep)', borderRadius:'var(--r-card)', padding:'28px 30px', color:'var(--on-deep-1)' }}>
              <h3 className="t-h3" style={{ margin:0, color:'var(--on-deep-1)' }}>{L.cta}</h3>
              <Button variant="solid" href={window.PAGES.contact} style={{ marginTop:18 }}>{L.ctaBtn}</Button>
            </div>
          </div>
        </Container>
      </Section>
    </React.Fragment>
  );
}

Object.assign(window, { CaseDetailPage });
