// fears.jsx — 4 riesgos reales

function Fears() {
  const risks = [
    {
      n: '01',
      label: 'Romper al actualizar',
      text: 'Riesgo de tocar la web y dejarla rota.',
      desc: 'Una actualización mal hecha tumba el sitio entero. Y nadie en el equipo sabe revertirla.',
    },
    {
      n: '02',
      label: 'Quedar vulnerable',
      text: 'Riesgo de no actualizar y ser comprometido.',
      desc: 'Cada plugin desactualizado es una puerta abierta para ataques automatizados.',
    },
    {
      n: '03',
      label: 'Backup que no sirve',
      text: 'Riesgo de descubrir tarde que el backup no funciona.',
      desc: 'Hostings que prometen backup, hasta que necesitas restaurar uno y no existe.',
    },
    {
      n: '04',
      label: 'Caída crítica',
      text: 'Riesgo de que la web se caiga, se ensucie o quede comprometida.',
      desc: 'Una web comercial caída no es una molestia. Es ventas perdidas, leads perdidos, reputación dañada.',
    },
  ];

  return (
    <section className="section" id="riesgos">
      <div className="sec-head">
        <span className="eyebrow">El problema real</span>
        <h2 className="display h2">
          No es "actualizar plugins".<br/>
          <span style={{ color: 'var(--primary)' }}>Son cuatro riesgos</span> que ya identificaste.
        </h2>
        <p className="lead">
          La gente sabe que su web importa. Lo que no sabe es cómo mantenerla. Y estos son los cuatro riesgos que cualquier dueño de negocio reconoce apenas los nombras:
        </p>
      </div>

      <div className="grid-fears">
        {risks.map((f) => (
          <div className="fear-card" key={f.n}>
            <div>
              <div className="fear-meta">Riesgo</div>
              <div className="fear-num">{f.n}</div>
            </div>
            <div>
              <div className="fear-text">{f.text}</div>
              <p style={{ marginTop: 14, fontSize: 13.5, color: 'var(--text-muted)', lineHeight: 1.55 }}>
                {f.desc}
              </p>
            </div>
            <div className="fear-meta" style={{ color: 'var(--primary)' }}>
              ↳ {f.label}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { Fears });