/* 08 — Services + methodology pills. */
function Services({ t }) {
  const s = t.services;
  return (
    <Section id="services" bg="alt" label="Services">
      <Container style={window.PAD}>
        <SectionHead eyebrow={s.eyebrow} title={s.title} align="center" max={720} />
        <div className="bne-services" style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:16, marginTop:52 }}>
          {s.items.map((it, i) => <ServiceCard key={it.t} it={it} i={i} />)}
        </div>
        <Reveal delay={160}>
          <div style={{ marginTop:40, textAlign:'center' }}>
            <div className="t-caption" style={{ color:'var(--text-3)', fontFamily:'var(--font-mono)', letterSpacing:'.08em', textTransform:'uppercase', marginBottom:18 }}>{s.methodsLabel}</div>
            <div style={{ display:'flex', flexWrap:'wrap', gap:10, justifyContent:'center' }}>
              {s.methods.map(m => (
                <span key={m} style={{ padding:'9px 16px', borderRadius:99, border:'1px solid var(--border-2)', color:'var(--text-2)', fontFamily:'var(--font-body)', fontSize:14, fontWeight:500 }}>{m}</span>
              ))}
            </div>
          </div>
        </Reveal>
      </Container>
    </Section>
  );
}

function ServiceCard({ it, i }) {
  const [h, setH] = useState(false);
  const brand = ['layers','product','tech','gtm','scale','delivery'];
  const useBrand = i < brand.length;
  return (
    <Reveal delay={i*60} style={{ height:'100%' }}>
      <div 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)', padding:'26px 24px', transition:'all var(--dur) var(--ease-out)',
        transform: h ? 'translateY(-4px)' : 'none', boxShadow: h ? 'var(--shadow-md)' : 'none', height:'100%',
      }}>
        <div style={{ display:'grid', placeItems:'center', width:48, height:48, borderRadius:12,
          background: h ? 'var(--accent-strong)' : 'rgba(123,47,190,.14)', color: h ? '#fff' : 'var(--accent)',
          transition:'all var(--dur)' }}>
          {useBrand ? <BrandIcon name={brand[i]} size={26}/> : <Icon name={it.icon} size={24}/>}
        </div>
        <div className="t-h4" style={{ color:'var(--text-1)', marginTop:18 }}>{it.t}</div>
      </div>
    </Reveal>
  );
}

Object.assign(window, { Services });