// threat-data.jsx — "Contexto Crítico" section with stats + ticker

function ThreatData() {
  return (
    <section className="section" id="contexto">
      <div className="sec-head">
        <span className="eyebrow">Contexto crítico</span>
        <h2 className="display h2">
          Lo que está pasando hoy.<br/>
          <span style={{ color: 'var(--primary)' }}>Y por qué importa.</span>
        </h2>
        <p className="lead">
          Tu sitio web no compite solo por posicionamiento. Está expuesto, todos los días, a un entorno donde los ataques son automáticos, masivos y constantes. Estos son los datos que no se pueden ignorar.
        </p>
      </div>

      <div className="grid-3">
        <StatCard
          source="W3Techs · 2026"
          big={<><CountUp to={43} duration={1800} format={(n) => Math.round(n)} suffix="%" /></>}
          title="de toda la web usa WordPress"
          body="No es un nicho. Es la infraestructura más extendida de internet. Eso lo convierte también en el objetivo más rentable para ataques automatizados."
        />
        <StatCard
          source="Patchstack · 2025"
          danger
          big={<><CountUp to={11334} duration={2400} /></>}
          title="nuevas vulnerabilidades reportadas"
          body="+42% vs. 2024. De ellas, 4,124 requerían mitigación urgente y 17% tenían severidad alta — aptas para ataques automatizados a gran escala."
        />
        <StatCard
          source="Hostinger / Wordfence"
          big={<><CountUp to={95} duration={1800} format={(n) => Math.round(n)} suffix="%" /></>}
          title="de las vulnerabilidades vienen de plugins"
          body="No es WordPress el problema: son los plugins desactualizados, themes abandonados y configuraciones que se olvidan. Y siempre se olvidan."
        />
        <StatCard
          source="Sucuri · 2025"
          danger
          big={<><CountUp to={96} duration={1800} format={(n) => Math.round(n)} suffix="%" /></>}
          title="de los sitios infectados son WordPress"
          body="Cuando un sitio aparece marcado como peligroso en Google, la inmensa mayoría de las veces, es WordPress comprometido."
        />
        <StatCard
          source="Wordfence · 2025"
          big={<>Trillones</>}
          title="de intentos de ataque bloqueados al año"
          body="Cada minuto se registran miles de intentos automatizados contra sitios WordPress. La pregunta no es 'si' te atacarán — es cuándo."
        />
        <StatCard
          source="SolidWP · abril 2026"
          danger
          big={<><CountUp to={185} duration={1800} /></>}
          title="vulnerabilidades públicas en un solo mes"
          body="169 parches disponibles. Esto no es un evento puntual — es mantenimiento continuo. Y nadie en tu equipo lo está haciendo."
        />
      </div>

      <Ticker />
    </section>
  );
}

function StatCard({ source, big, title, body, danger }) {
  return (
    <div className="card card-strong" style={{ padding: 30, display: 'flex', flexDirection: 'column', gap: 14 }}>
      <div className="mono" style={{ fontSize: 10.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--text-dim)' }}>
        Fuente · {source}
      </div>
      <div className="display" style={{
        fontSize: 68,
        lineHeight: 0.95,
        color: danger ? 'var(--danger)' : 'var(--text)',
        textShadow: danger ? '0 0 32px rgba(255,77,77,0.25)' : '0 0 32px rgba(30,156,255,0.2)'
      }}>
        {big}
      </div>
      <div style={{ fontSize: 16, fontWeight: 500, color: 'var(--text)', lineHeight: 1.35 }}>
        {title}
      </div>
      <p style={{ fontSize: 13.5, color: 'var(--text-muted)', lineHeight: 1.55 }}>
        {body}
      </p>
    </div>
  );
}

function Ticker() {
  const items = [
    { label: 'WordPress core', value: '43.5% web' },
    { label: 'Plugins vulnerables', value: '~95%' },
    { label: 'CVEs publicadas 2025', value: '11,334' },
    { label: 'Sitios infectados', value: '96% WP' },
    { label: 'W3 Total Cache expuestos', value: '+327,000' },
    { label: 'Sitios WP desactualizados', value: '+50%' },
    { label: 'Aumento de vulns YoY', value: '+42%' },
    { label: 'Severidad alta 2025', value: '17%' },
    { label: 'Ataques automatizados', value: '24/7' },
  ];
  return (
    <div className="ticker" style={{ marginTop: 64 }}>
      <div className="ticker-track">
        {[...items, ...items].map((it, i) => (
          <div className="ticker-item" key={i}>
            <span style={{ color: 'var(--text-dim)' }}>◆</span>
            <span>{it.label}</span>
            <strong>{it.value}</strong>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { ThreatData });