function SecuritySection() {
  const pillars = [
    { t: 'Diseño seguro por defecto', d: 'Arquitectura pensada para la seguridad, no como parche final.', icon: 'M12 2L4 6v6c0 5 3.5 9 8 10 4.5-1 8-5 8-10V6l-8-4z' },
    { t: 'Auth & sesiones', d: 'JWT, expiración, revocación y control total de sesiones.', icon: 'M5 11h14v10H5z M7 11V7a5 5 0 0110 0v4' },
    { t: 'Datos aislados', d: 'Aislamiento por empresa, mínimo privilegio, queries seguras.', icon: 'M4 7l8-4 8 4-8 4-8-4z M4 12l8 4 8-4 M4 17l8 4 8-4' },
    { t: 'Infra cuidada', d: 'Variables de entorno, despliegues controlados, backups.', icon: 'M5 12a7 7 0 1114 0 M12 3v2 M12 19v2 M3 12h2 M19 12h2' },
    { t: 'Privacidad UI', d: 'Nada de datos sensibles por IDs, errores o pantallas sin permiso.', icon: 'M1 12s4-8 11-8 11 8 11 8-4 8-11 8S1 12 1 12z M12 9a3 3 0 100 6 3 3 0 000-6z' },
    { t: 'Validación server-side', d: 'Toda entrada validada en servidor. El cliente no es fuente de verdad.', icon: 'M4 12l5 5L20 6' },
  ];

  return (
    <section id="seguridad" className="shell">
      <div className="container">
        <div className="security-inner" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }}>
          <div className="reveal">
            <span className="eyebrow"><span className="dot"/>Seguridad</span>
            <h2 className="h-section" style={{ marginTop: 20, marginBottom: 20 }}>
              Tu producto,<br/><span className="grad-text">protegido sin compromisos.</span>
            </h2>
            <p className="h-sub" style={{ marginBottom: 32 }}>
              No añadimos seguridad al final. La construimos desde el día uno: arquitectura, permisos, datos y despliegue.
            </p>
            <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 12 }}>
              {['Roles y permisos claros','Datos aislados por empresa','JWT y sesiones seguras','Validaciones server-side','Buenas prácticas de despliegue'].map(x => (
                <li key={x} style={{ display: 'flex', gap: 12, alignItems: 'center', fontSize: 14.5, color: 'var(--text-dim)' }}>
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--accent-2)" strokeWidth="2">
                    <path d="M4 12l5 5L20 6" />
                  </svg>
                  {x}
                </li>
              ))}
            </ul>
          </div>

          <div className="reveal d2 security-pillars" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 14 }}>
            {pillars.map((p, i) => (
              <div key={p.t} style={{
                padding: 22,
                background: i === 0 ? 'linear-gradient(135deg, rgba(124,140,255,0.12), rgba(34,211,238,0.04))' : 'linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01))',
                border: i === 0 ? '1px solid rgba(124,140,255,0.3)' : '1px solid var(--border)',
                borderRadius: 16,
                minHeight: 150
              }}>
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" style={{ color: i === 0 ? 'var(--accent-2)' : 'var(--accent-3)', marginBottom: 14 }}>
                  <path d={p.icon} />
                </svg>
                <h4 style={{ fontSize: 14, fontWeight: 500, marginBottom: 6, letterSpacing: '-0.005em' }}>{p.t}</h4>
                <p style={{ fontSize: 12.5, color: 'var(--text-dim)', lineHeight: 1.5 }}>{p.d}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
window.SecuritySection = SecuritySection;