// process.jsx — Cómo funciona WP Guardian

function Process() {
  const steps = [
    { n: '01', auto: true, title: 'Diagnóstico inicial', body: 'Conectamos tu sitio a la plataforma. En minutos sabemos en qué estado está: core, PHP, plugins, themes, seguridad y backups.' },
    { n: '02', auto: true, title: 'Backup pre-update', body: 'Antes de tocar nada, snapshot completo del sitio (DB + archivos). Si algo sale mal, restauramos en minutos.' },
    { n: '03', auto: true, title: 'Plan de acción', body: 'Ejecutamos las actualizaciones en orden: core, plugins críticos, themes. Cada paso queda registrado en el plan.' },
    { n: '04', auto: false, title: 'Verificación manual', body: 'Un humano revisa el sitio después del update. Layout, formularios, checkout, integraciones. Si rompe, lo arreglamos.' },
    { n: '05', auto: true, title: 'Monitoreo continuo', body: 'Wordfence, WP Armour, scans automáticos. Detección temprana de vulnerabilidades (CVEs) y alertas proactivas.' },
    { n: '06', auto: true, title: 'Reporte al cliente', body: 'PDF comparativo: estado inicial vs estado final. Vulnerabilidades cerradas, plugins actualizados, intentos bloqueados.' },
  ];

  return (
    <section className="section" id="proceso">
      <div className="sec-head">
        <span className="eyebrow">Cómo funciona</span>
        <h2 className="display h2">
          Un proceso ejecutado<br/>
          <span style={{ color: 'var(--primary)' }}>como protocolo</span>, no improvisado.
        </h2>
        <p className="lead">
          Cada intervención sigue los mismos seis pasos. Reproducible, registrado, auditable. Sin sorpresas.
        </p>
      </div>

      <div className="grid-3">
        {steps.map((s) => (
          <div className="step" key={s.n}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
              <div className="step-num">PASO · {s.n}</div>
              <span className="pill" style={{
                background: s.auto ? 'rgba(30,156,255,0.1)' : 'rgba(255,166,71,0.1)',
                color: s.auto ? 'var(--primary)' : 'var(--warn)',
                borderColor: s.auto ? 'rgba(30,156,255,0.25)' : 'rgba(255,166,71,0.25)',
                height: 22, fontSize: 10
              }}>
                {s.auto ? 'AUTO' : 'MANUAL'}
              </span>
            </div>
            <div className="step-title">{s.title}</div>
            <div className="step-desc">{s.body}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { Process });