function slug(s){ return s.toLowerCase().replace(/[^a-z0-9]+/g,'-').replace(/(^-|-$)/g,''); }

/* 06 — Cases with category tabs. teaser=true → first N cards, no tabs, see-all link. */
function Cases({ t, teaser = false, n = 4, featured = null }) {
  const c = t.cases;
  const [tab, setTab] = useState(0);
  const cat = c.tabs[tab];
  const isAll = tab === 0;
  const all = c.items.filter(it => isAll || it.cats.includes(cat));
  const items = teaser
    ? (featured ? featured.map(s => c.items.find(it => it.slug === s)).filter(Boolean) : c.items.slice(0, n))
    : all;
  return (
    <Section id="cases" bg={teaser ? 'navy' : 'app'} label="Cases" style={teaser ? { overflow:'hidden', background:'var(--purple-deep)', '--card-bg':'#0D1838', '--card-raised':'#15224A', '--border-1':'rgba(255,255,255,.16)' } : undefined}>
      {teaser && <div aria-hidden="true" style={{ position:'absolute', inset:0, pointerEvents:'none',
        background:'radial-gradient(50% 60% at 85% 0%, rgba(155,85,214,.2), transparent 60%)' }}></div>}
      <Container style={{ ...window.PAD, position:'relative' }}>
        <div style={{ display:'flex', flexWrap:'wrap', alignItems:'flex-end', justifyContent:'space-between', gap:18 }}>
          <SectionHead eyebrow={c.eyebrow} title={c.title} body={c.body} max={760} />
        </div>

        {!teaser && (
          <Reveal delay={120}>
            <div style={{ display:'flex', flexWrap:'wrap', gap:8, marginTop:40 }}>
              {c.tabs.map((tb, i) => {
                const active = i === tab;
                return (
                  <button key={tb} onClick={()=>setTab(i)} style={{
                    fontFamily:'var(--font-mono)', fontSize:12.5, letterSpacing:'.04em', cursor:'pointer',
                    padding:'9px 16px', borderRadius:99, transition:'all var(--dur)',
                    border:`1px solid ${active ? 'transparent' : 'var(--border-2)'}`,
                    background: active ? 'var(--accent-strong)' : 'transparent',
                    color: active ? '#fff' : 'var(--text-2)',
                  }}>{tb}</button>
                );
              })}
            </div>
          </Reveal>
        )}

        <div key={tab} className="bne-cases-grid" style={{ display:'grid', gridTemplateColumns:'repeat(2,1fr)', gap:20, marginTop:32, animation:'bneFade .35s var(--ease-out)' }}>
          {items.map((it, i) => <CaseCard key={it.slug} it={it} i={i} readMore={c.readMore} />)}
        </div>
        {teaser && <Reveal delay={120}>
          <div style={{ display:'flex', justifyContent:'center', marginTop:40 }}>
            <Button variant="ghost" href={window.PAGES.cases}>{c.seeAll} <Icon name="arrow" size={17}/></Button>
          </div>
        </Reveal>}
      </Container>
    </Section>
  );
}

function CaseCard({ it, i, readMore }) {
  const [h, setH] = useState(false);
  const href = `case.html?c=${it.slug}`;
  return (
    <a href={href} onMouseEnter={()=>setH(true)} onMouseLeave={()=>setH(false)} style={{
      background: h ? 'var(--card-raised)' : 'var(--card-bg)', border:'1px solid var(--border-1)',
      borderRadius:'var(--r-card)', overflow:'hidden', transition:'all var(--dur) var(--ease-out)',
      transform: h ? 'translateY(-4px)' : 'none', boxShadow: h ? 'var(--shadow-md)' : 'none', height:'100%',
      display:'flex', flexDirection:'column', textDecoration:'none',
    }}>
      <div style={{ position:'relative', width:'100%', aspectRatio:'16/9', background:'linear-gradient(135deg, var(--navy-600), var(--navy-800))' }}>
        <image-slot id={`case-${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', top:14, left:14, padding:'6px 11px', borderRadius:8, background:'rgba(10,4,24,.55)', backdropFilter:'blur(6px)', display:'inline-flex' }}><ClientLogo name={it.logo} h={14} /></span>}
        <span style={{ position:'absolute', top:14, right:14, padding:'7px 12px', borderRadius:99, background:'rgba(123,47,190,.92)', color:'#fff', fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'.08em', textTransform:'uppercase', display:'inline-flex', alignItems:'center', gap:6 }}>
          <Icon name="check" size={13} stroke={2.4}/>{it.metric}
        </span>
      </div>
      <div style={{ padding:'22px 26px 24px', display:'flex', flexDirection:'column', flex:1 }}>
        <div className="t-caption" style={{ fontFamily:'var(--font-mono)', color:'var(--accent)', letterSpacing:'.06em', textTransform:'uppercase', fontSize:11.5, display:'flex', alignItems:'center', gap:8 }}>
          {it.sector}<span style={{ width:3, height:3, borderRadius:'50%', background:'var(--text-3)' }}></span><span style={{ color:'var(--text-3)' }}>{it.meta}</span>
        </div>
        <h3 className="t-h3" style={{ color:'var(--text-1)', margin:'10px 0 0', textWrap:'balance' }}>{it.title}</h3>
        <div className="t-small" style={{ color:'var(--text-3)', marginTop:8, fontFamily:'var(--font-mono)', letterSpacing:'.02em' }}>{it.client}</div>
        <p className="t-body" style={{ color:'var(--text-2)', margin:'12px 0 0' }}>{it.summary}</p>
        <span style={{ marginTop:'auto', paddingTop:20, display:'inline-flex', alignItems:'center', gap:7, color: h ? 'var(--accent)' : 'var(--text-2)', fontFamily:'var(--font-body)', fontWeight:600, fontSize:14.5, transition:'color var(--dur)' }}>
          {readMore} <Icon name="arrow" size={16} style={{ transform: h ? 'translateX(3px)' : 'none', transition:'transform var(--dur)' }}/>
        </span>
      </div>
    </a>
  );
}

Object.assign(window, { Cases });