// Process — timeline horizontal con los pasos
const STEPS = [
  {
    n: '01',
    t: 'Brief',
    sub: 'día 1',
    desc: 'Una llamada de 45 min. Capturamos objetivo, público y alcance. Salimos con un plan escrito y un precio cerrado.',
    ai: 'transcripción + resumen con ia',
  },
  {
    n: '02',
    t: 'Diseño',
    sub: 'día 2–4',
    desc: 'Wireframes, prototipo navegable y sistema visual. Iteramos contigo en Figma o Linear.',
    ai: 'generación de variantes con ia',
  },
  {
    n: '03',
    t: 'Build',
    sub: 'día 5–12',
    desc: 'Desarrollo por sprints cortos. Ves progreso real en preview URLs cada 48h.',
    ai: 'copilot + agentes de código',
  },
  {
    n: '04',
    t: 'QA & SEO',
    sub: 'día 13–14',
    desc: 'Pruebas en dispositivos reales, Lighthouse, accesibilidad, schema.org y sitemap.',
    ai: 'testing automatizado',
  },
  {
    n: '05',
    t: 'Deploy',
    sub: 'día 15',
    desc: 'Dominio, CDN global, SSL y analítica. Te formamos en 30 min para que puedas editar contenido.',
    ai: 'ci/cd + monitorización',
  },
  {
    n: '06',
    t: 'Evolución',
    sub: 'continuo',
    desc: 'Mantenimiento opcional. Nuevas features mensuales según tu roadmap.',
    ai: 'triage con ia',
  },
];

const Process = () => (
  <section id="proceso" className="process">
    <div className="container">
      <div className="section-head">
        <div className="eyebrow">proceso · 02 / 05</div>
        <h2>De la idea a producción<br/>en <em>15 días</em>.</h2>
        <p>Un proceso corto, asistido por IA en cada paso. Sin reuniones infinitas, sin sorpresas en la factura.</p>
      </div>

      <ol className="proc-timeline">
        {STEPS.map((s, i) => (
          <li key={s.n} className="proc-step">
            <div className="proc-step__rail">
              <span className="proc-step__node">
                <span className="proc-step__node-inner" />
              </span>
              {i < STEPS.length - 1 && <span className="proc-step__line" />}
            </div>
            <div className="proc-step__card">
              <div className="proc-step__meta mono">
                <span className="proc-step__num">{s.n}</span>
                <span className="proc-step__sub">{s.sub}</span>
              </div>
              <h3 className="proc-step__title">{s.t}</h3>
              <p className="proc-step__desc">{s.desc}</p>
              <div className="proc-step__ai mono">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/></svg>
                <span>{s.ai}</span>
              </div>
            </div>
          </li>
        ))}
      </ol>
    </div>
  </section>
);

window.Process = Process;