function Trust() {
  return (
    <section className="section" style={{background:'var(--bg)',padding:'64px 0'}}>
      <div className="container">
        <div style={{
          background:'var(--atu-blue)',color:'#fff',borderRadius:24,
          padding:'48px',display:'grid',gridTemplateColumns:'1.3fr 1fr',gap:40,alignItems:'center',
          backgroundImage:'linear-gradient(120deg, rgba(7,39,103,.94), rgba(15,78,192,.88)), url(../../assets/img-friends-03.jpg)',
          backgroundSize:'cover',backgroundPosition:'center',
        }}>
          <div>
            <h2 style={{color:'#fff',margin:'0 0 14px'}}>Da el primer paso con más claridad</h2>
            <p style={{color:'rgba(255,255,255,.88)',fontSize:17,lineHeight:1.55,margin:'0 0 24px',maxWidth:520}}>
              La regularización extraordinaria 2026 puede abrir oportunidades importantes, pero conviene entender bien cada caso antes de actuar. Déjanos tus datos y en GRUPO ATU te ayudaremos a orientarte.
            </p>
            <a href="#form" className="btn btn-primary">
              Quiero que revisen mi caso <i data-lucide="arrow-right" style={{width:18,height:18}}></i>
            </a>
          </div>
          <div style={{display:'flex',flexDirection:'column',gap:14}}>
            <Pillar icon="award" text="+40 años acompañando a migrantes" />
            <Pillar icon="shield-check" text="Lenguaje claro, sin promesas exageradas" />
            <Pillar icon="heart-handshake" text="Atención personalizada por equipo humano" />
          </div>
        </div>
      </div>
      <style>{`@media(max-width:820px){section .container > div{grid-template-columns:1fr !important;padding:32px !important}}`}</style>
    </section>
  );
}
function Pillar({icon,text}) {
  return (
    <div style={{display:'flex',gap:12,alignItems:'center',padding:'14px 18px',background:'rgba(255,255,255,.1)',border:'1px solid rgba(255,255,255,.18)',borderRadius:12}}>
      <div style={{width:36,height:36,borderRadius:10,background:'var(--atu-cyan)',color:'var(--atu-blue-ink)',display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0}}>
        <i data-lucide={icon} style={{width:18,height:18}}></i>
      </div>
      <span style={{fontSize:15,fontWeight:600}}>{text}</span>
    </div>
  );
}
window.Trust = Trust;