// Process.jsx — 4 steps, editorial 2x2 grid
function Process() {
  const steps = [
    {
      num: '01',
      title: 'Diagnóstico 360°',
      body: 'Auditamos tus redes, tu competencia local y tu posicionamiento actual. Salimos con un mapa claro de dónde estás parado y dónde puedes crecer.',
      tags: ['Auditoría', 'Benchmark', 'Mapa de oportunidades'],
    },
    {
      num: '02',
      title: 'Diseño de Estrategia',
      body: 'Construimos tu embudo de conversión y definimos los pilares de contenido que sostienen tu autoridad médica — sin trucos virales.',
      tags: ['Embudo', 'Pilares de contenido', 'Voz de marca'],
    },
    {
      num: '03',
      title: 'Implementación',
      body: 'Producimos, escribimos, diseñamos y publicamos. Grabamos en consultorio si es necesario. Cada pieza respeta tu identidad profesional.',
      tags: ['Producción', 'Copy', 'Diseño', 'Programación'],
    },
    {
      num: '04',
      title: 'Análisis y Escalado',
      body: 'Medimos qué convierte clic en cita y ajustamos la inversión mes a mes. Crecimiento sostenido, paciente a paciente.',
      tags: ['Métricas', 'Reportes', 'Optimización'],
    },
  ];

  return (
    <section id="proceso" className="section" data-screen-label="02 Proceso">
      <div className="section__inner">
        <header className="section__head">
          <div>
            <span className="section__eyebrow">Nuestra Metodología</span>
            <h2 className="section__title">
              Cuatro pasos.<br/>
              Una sola <em>dirección</em>.
            </h2>
          </div>
          <p className="section__lead">
            Sin promesas vacías, sin métricas infladas.
            Un proceso transparente que se traduce en
            citas reales en tu consultorio.
          </p>
        </header>

        <div className="proceso-grid">
          {steps.map(s => (
            <div className="proceso-step" key={s.num}>
              <span className="proceso-step__num">{s.num}</span>
              <div className="proceso-step__body">
                <h3 className="proceso-step__title">{s.title}</h3>
                <p>{s.body}</p>
                <div className="proceso-step__tags">
                  {s.tags.map(t => <span key={t} className="proceso-step__tag">{t}</span>)}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Process = Process;