function Offer() {
  const segments = [
    {
      title: 'Migrantes: Regularización y Trámites',
      color: 'var(--atu-blue)',
      items: [
        { icon:'info', text:'Información clara sobre la regularización extraordinaria 2026.' },
        { icon:'folder-check', text:'Ayuda para entender qué documentación empezar a reunir.' },
        { icon:'compass', text:'Orientación inicial sobre plazos y requisitos.' },
      ]
    },
    {
      title: 'Empresas: Soluciones para el Empleo',
      color: 'var(--atu-cyan)',
      items: [
        { icon:'users-2', text:'Asesoramiento sobre contratación de trabajadores extranjeros.' },
        { icon:'file-text', text:'Gestión de trámites de extranjería para tus empleados.' },
        { icon:'shield-check', text:'Cumplimiento de la normativa laboral vigente sin riesgos.' },
      ]
    },
    {
      title: 'Asesoría: Casos Complejos y Mediación',
      color: 'var(--atu-yellow)',
      items: [
        { icon:'git-branch', text:'Revisión de casos con antecedentes, asilo o familiares.' },
        { icon:'files', text:'Apoyo profesional en la preparación de expedientes.' },
        { icon:'languages', text:'Servicios de traducción y mediación para tus trámites.' },
      ]
    }
  ];

  return (
    <section className="section" style={{background:'var(--bg-soft)'}}>
      <div className="container">
        <div style={{display:'flex', flexDirection:'column', alignItems:'center', gap:56}}>
          <div style={{textAlign:'center'}}>
            <div className="eyebrow-pill" style={{marginBottom:14,background:'#fff'}}>Nuestros Servicios</div>
            <h2 style={{margin:'0 0 16px', fontSize: 'clamp(28px, 4vw, 42px)'}}>¿Cómo te acompañamos en tu proceso?</h2>
            <p className="lead" style={{margin:'0 auto', maxWidth: 640}}>
              Ofrecemos soluciones integrales adaptadas a cada necesidad, con un enfoque profesional y cercano.
            </p>
          </div>
          
          <div style={{display:'flex', flexDirection:'column', gap:40, width: '100%', maxWidth: 960}}>
            {segments.map((seg, i) => (
              <div key={i} style={{
                background:'#fff', borderRadius:20, padding:32, 
                borderLeft: `6px solid ${seg.color}`, boxShadow: 'var(--shadow-sm)'
              }}>
                <h3 style={{fontSize:22, fontWeight:700, margin:'0 0 24px', color:'var(--fg-1)'}}>{seg.title}</h3>
                <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(260px, 1fr))', gap:20}}>
                  {seg.items.map((it, j) => (
                    <div key={j} style={{display:'flex', gap:14, alignItems:'flex-start'}}>
                      <div className="icon-square" style={{width:36, height:36, borderRadius:10, background: `${seg.color}15`, color: seg.color}}>
                        <i data-lucide={it.icon} style={{width:18, height:18}}></i>
                      </div>
                      <p style={{margin:0, fontSize:15, color:'var(--fg-2)', lineHeight:1.45}}>{it.text}</p>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>

          <div style={{paddingTop:8}}>
            <a href="#form" className="btn btn-primary btn-lg">
              Solicitar orientación personalizada <i data-lucide="arrow-right" style={{width:20,height:20}}></i>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Offer = Offer;