// consequences.jsx — Qué pasa cuando un sitio no está mantenido

function Consequences() {
  const items = [
    {
      icon: '⚠',
      title: 'Infección por malware',
      body: 'La web empieza a redirigir a páginas maliciosas. Google la marca como sitio peligroso. Pierdes tráfico de un día para otro.',
    },
    {
      icon: '⨯',
      title: 'Caída total del sitio',
      body: 'Plugins incompatibles, actualizaciones mal ejecutadas, hosting saturado por ataques. El sitio simplemente deja de cargar.',
    },
    {
      icon: '◉',
      title: 'Robo de información',
      body: 'Formularios comprometidos, correos capturados, accesos administrativos vulnerados. Y tu base de leads queda expuesta.',
    },
    {
      icon: '↓',
      title: 'Penalización SEO',
      body: 'Google detecta el contenido malicioso y baja drásticamente tu posicionamiento. Recuperarlo puede tomar meses.',
    },
    {
      icon: '✕',
      title: 'Pérdida de confianza',
      body: 'El usuario entra, ve errores o alertas de seguridad, y asume que la empresa no es confiable. No vuelve.',
    },
    {
      icon: '$',
      title: 'Costo de recuperación',
      body: 'Limpieza de malware, restauración desde backup (si existe), reindexación SEO, ventas y leads perdidos durante días.',
    },
  ];

  return (
    <section className="section" id="consecuencias" style={{ paddingTop: 60 }}>
      <div className="sec-head">
        <span className="eyebrow">Qué pasa cuando no se mantiene</span>
        <h2 className="display h2">
          Esto no es "tal vez".<br/>
          <span style={{ color: 'var(--danger)' }}>Es lo que pasa todos los días.</span>
        </h2>
      </div>

      <div className="grid-3">
        {items.map((it, i) => (
          <div className="csq-card" key={i}>
            <div className="csq-icon">{it.icon}</div>
            <h4>{it.title}</h4>
            <p>{it.body}</p>
          </div>
        ))}
      </div>

      <div className="alert-card" style={{ marginTop: 48, display: 'flex', alignItems: 'center', gap: 22, padding: '24px 28px' }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--danger)', letterSpacing: '0.1em', textTransform: 'uppercase', fontWeight: 700 }}>
          Factor 2026 →
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 16, fontWeight: 600, color: 'var(--text)', marginBottom: 4 }}>
            La IA está automatizando los ataques.
          </div>
          <div style={{ fontSize: 14, color: 'var(--text-muted)', lineHeight: 1.5 }}>
            Detectan vulnerabilidades en segundos, se adaptan a configuraciones específicas y escalan sin intervención humana. Un sitio desactualizado hoy es un objetivo <em>activo</em>.
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Consequences });