// PROCESO — Pasos para desarrollar un sistema
const processSteps = [
  { n: '01', t: 'Descubrimiento', d: 'Entrevistas con tu equipo, mapeo de procesos, identificación de cuellos de botella y dolor real.', icon: 'm6 3 0 18M6 21l-3-3M6 21l3-3M14 8h7M14 13h5M14 18h7' },
  { n: '02', t: 'Arquitectura', d: 'Diseñamos modelo de datos, integraciones, infraestructura y stack. Documento técnico antes de escribir una línea.', icon: 'M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z M9 22V12h6v10' },
  { n: '03', t: 'Prototipo UI', d: 'Wireframes interactivos y prototipo navegable que validas antes de invertir en desarrollo completo.', icon: 'M3 3h18v18H3z M3 9h18 M9 21V9' },
  { n: '04', t: 'Desarrollo iterativo', d: 'Sprints de 2 semanas con entregas funcionales. Tú ves avance y tomas decisiones, no esperas meses para resultados.', icon: 'M16 18l6-6-6-6 M8 6l-6 6 6 6' },
  { n: '05', t: 'QA y despliegue', d: 'Pruebas automatizadas, ambiente de pre-producción, capacitación a usuarios y go-live monitoreado.', icon: 'M22 11.08V12a10 10 0 1 1-5.93-9.14 M22 4 12 14.01l-3-3' },
  { n: '06', t: 'Soporte continuo', d: 'Garantía, mantenimiento evolutivo y nuevas funcionalidades. No te dejamos solos después del lanzamiento.', icon: 'M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z' },
];

function Process() {
  return (
    <section id="proceso" style={{ position: 'relative' }}>
      <div className="glow-blob" style={{ left: '50%', top: '20%', transform: 'translateX(-50%)', width: 900, height: 600, background: 'radial-gradient(ellipse, rgba(79,140,255,0.18), transparent 60%)' }}/>
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Proceso</span>
          <h2>De idea a sistema <span className="gradient-text">en producción</span>.</h2>
          <p style={{ fontSize: 17, maxWidth: 620 }}>
            Un proceso probado en más de 80 proyectos. Ágil, transparente y con
            entregables claros en cada fase. Nada de cajas negras.
          </p>
        </div>

        <div style={{ position: 'relative' }}>
          {/* Connecting line */}
          <div style={{
            position: 'absolute', left: 24, top: 32, bottom: 32, width: 1,
            background: 'linear-gradient(180deg, transparent, var(--accent), var(--accent-2), transparent)',
            opacity: 0.3,
          }} className="process-line"/>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
            {processSteps.map((s, i) => (
              <div key={s.n} className="process-row" style={{
                display: 'grid', gridTemplateColumns: '56px 1fr 1fr', gap: 32,
                alignItems: 'center', position: 'relative',
              }}>
                <div style={{
                  width: 48, height: 48, borderRadius: 12,
                  background: 'var(--bg-3)',
                  border: '1px solid var(--line-2)',
                  display: 'grid', placeItems: 'center',
                  fontFamily: 'var(--font-mono)', fontWeight: 600, fontSize: 14,
                  color: 'var(--accent)',
                  position: 'relative', zIndex: 1,
                  boxShadow: '0 0 0 4px var(--bg)',
                }}>
                  {s.n}
                </div>
                <div>
                  <h3 style={{ fontSize: 22, marginBottom: 6 }}>{s.t}</h3>
                  <p style={{ fontSize: 15 }}>{s.d}</p>
                </div>
                <div className="process-visual" style={{
                  height: 120, borderRadius: 12,
                  background: 'linear-gradient(180deg, rgba(19,24,45,0.7), rgba(10,14,31,0.7))',
                  border: '1px solid var(--line)',
                  padding: 20, position: 'relative', overflow: 'hidden',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  <svg viewBox="0 0 24 24" width="48" height="48" fill="none" stroke="url(#stepGrad)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                    <defs>
                      <linearGradient id="stepGrad" x1="0" y1="0" x2="1" y2="1">
                        <stop offset="0%" stopColor="#4F8CFF"/>
                        <stop offset="100%" stopColor="#A855F7"/>
                      </linearGradient>
                    </defs>
                    <path d={s.icon}/>
                  </svg>
                  <div style={{
                    position: 'absolute', right: 16, top: 16,
                    fontFamily: 'var(--font-mono)', fontSize: 10,
                    letterSpacing: '.12em', color: 'var(--fg-4)',
                    textTransform: 'uppercase',
                  }}>fase {s.n}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 820px){
          .process-row{ grid-template-columns: 48px 1fr !important; }
          .process-visual{ display: none !important; }
        }
      `}</style>
    </section>
  );
}
window.Process = Process;