function ForWho() {
  const segments = [
    {
      title: 'Migrantes',
      image: '../../assets/img-friends-01.jpg',
      icon: 'users',
      color: 'var(--atu-blue)',
      items: [
        '¿Quieres saber si puedes acogerte a la regularización 2026?',
        'Tienes dudas sobre documentos, plazos o requisitos.',
        'Has pedido asilo y quieres saber cómo te afecta esta medida.',
      ]
    },
    {
      title: 'Empresas',
      image: '../../assets/img-friends-03.jpg',
      icon: 'building-2',
      color: 'var(--atu-cyan)',
      items: [
        'Necesitas contratar personas extranjeras de forma legal.',
        'Buscas asesoramiento sobre trámites de extranjería para tu equipo.',
        'Quieres cumplir con la normativa vigente sin riesgos legales.',
      ]
    },
    {
      title: 'Asesoramiento',
      image: '../../assets/img-friends-05.jpg',
      icon: 'info',
      color: 'var(--atu-yellow)',
      items: [
        'Requieres orientación inicial personalizada sobre tu caso.',
        'Buscas apoyo en la preparación de expedientes complejos.',
        'Necesitas mediación o traducción para tus trámites.',
      ]
    }
  ];

  return (
    <section id="segmentation" className="section" style={{background:'var(--bg)'}}>
      <div className="container">
        <div style={{textAlign:'center', maxWidth:800, margin:'0 auto 48px'}}>
          <div className="eyebrow-pill" style={{marginBottom:14}}>¿Cómo podemos ayudarte?</div>
          <h2 style={{margin:0}}>Soluciones personalizadas para cada perfil</h2>
        </div>
        
        <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(320px, 1fr))', gap:24}}>
          {segments.map((seg, i) => (
            <div key={i} style={{
              background:'#fff', borderRadius:24, overflow:'hidden',
              border:'1px solid var(--border)', display:'flex', flexDirection:'column',
              boxShadow: 'var(--shadow-sm)', transition: 'all 0.3s ease',
              cursor: 'default'
            }} className="card-hover">
              <div style={{
                height: 180, width: '100%', position: 'relative', overflow: 'hidden',
                backgroundImage: `url(${seg.image})`, backgroundSize: 'cover', backgroundPosition: 'center'
              }}>
                <div style={{
                  position: 'absolute', inset: 0, 
                  background: `linear-gradient(to bottom, transparent 60%, rgba(255,255,255,1))`
                }} />
                <div style={{
                  position: 'absolute', bottom: 16, left: 24,
                  width:48, height:48, borderRadius:12, background: seg.color, 
                  color: '#fff', display:'flex', alignItems:'center', justifyContent:'center',
                  boxShadow: '0 4px 12px rgba(0,0,0,0.1)'
                }}>
                  <i data-lucide={seg.icon} style={{width:24, height:24}}></i>
                </div>
              </div>
              
              <div style={{padding: '0 24px 32px'}}>
                <h3 style={{fontSize:24, fontWeight:700, margin:'0 0 16px', color:'var(--fg-1)'}}>{seg.title}</h3>
                <ul style={{listStyle:'none', padding:0, margin:0, display:'flex', flexDirection:'column', gap:12}}>
                  {seg.items.map((item, j) => (
                    <li key={j} style={{display:'flex', gap:12, fontSize:15, lineHeight:1.5, color:'var(--fg-2)'}}>
                      <i data-lucide="check-circle-2" style={{width:18, height:18, color:seg.color, marginTop:2, flexShrink:0}}></i>
                      {item}
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.ForWho = ForWho;