const processSteps = [
  { n: '01', t: 'Propuesta con opciones', d: 'MVP, estándar o completo. Con tiempos, entregables y coste por fase. Tú eliges.', meta: 'Día 1–3' },
  { n: '02', t: 'Diseño en Figma', d: 'Pantallas aprobadas antes de tocar código. Cero retrabajos, cero sorpresas.', meta: 'Semana 1–2' },
  { n: '03', t: 'Base de datos + reglas', d: 'Modelo de entidades, relaciones y permisos. La base que aguanta 10x tu tráfico.', meta: 'Semana 2' },
  { n: '04', t: 'Backend / API', d: 'Endpoints, validaciones, seguridad con JWT y roles. Todo documentado.', meta: 'Semana 2–4' },
  { n: '05', t: 'Cliente / App', d: 'Interfaz web o móvil con UX cuidado, estados de carga, errores y vacíos.', meta: 'Semana 3–6' },
  { n: '06', t: 'Entrega + pago por fase', d: 'Cada fase entregada, probada y pagada. Control total en cada paso.', meta: 'Continuo' },
];

const stack = ['Figma','TypeScript','React','Vue 3','React Native','Node.js','PostgreSQL','Prisma','Railway','JWT','Expo','Motion','n8n','Tailwind'];

function ProcessSection() {
  return (
    <section id="desarrollo" className="shell" style={{ background: 'linear-gradient(180deg, transparent, rgba(124,140,255,0.04) 30%, transparent)' }}>
      <div className="container">
        <div className="sh reveal">
          <span className="eyebrow"><span className="dot"/>Desarrollo</span>
          <h2 className="h-section">Un proceso claro.<br/><span className="grad-text">Entregas sin sorpresas.</span></h2>
          <p className="h-sub">Diseñamos, desarrollamos y desplegamos por fases. Sabes siempre qué se entrega y qué sigue.</p>
        </div>

        {/* Process rail */}
        <div style={{ position:'relative', marginBottom: 80 }}>
          <div style={{ position:'absolute', left: 0, right: 0, top: 44, height: 1, background: 'linear-gradient(90deg, transparent, var(--border-2), transparent)' }} />
          <div className="process-rail" style={{ display:'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 16 }}>
            {processSteps.map((s, i) => (
              <div key={s.n} className={`reveal d${i%4}`} style={{
                background: 'linear-gradient(180deg, rgba(20,22,40,0.6), rgba(10,11,22,0.4))',
                border: '1px solid var(--border)',
                borderRadius: 18,
                padding: '24px 18px',
                position: 'relative',
                minHeight: 220
              }}>
                <div style={{
                  width: 40, height: 40, borderRadius: 10,
                  background: i === 0 ? 'linear-gradient(135deg, var(--accent), var(--accent-2))' : 'var(--bg-3)',
                  border: '1px solid var(--border-2)',
                  display: 'grid', placeItems: 'center',
                  fontFamily: 'var(--font-mono)', fontSize: 13,
                  color: i === 0 ? '#0a0b16' : 'var(--accent-3)',
                  fontWeight: 500, marginBottom: 20,
                  boxShadow: i === 0 ? '0 0 20px rgba(124,140,255,0.4)' : 'none'
                }}>{s.n}</div>
                <h4 style={{ fontSize: 15, fontWeight: 500, marginBottom: 8, lineHeight: 1.25 }}>{s.t}</h4>
                <p style={{ fontSize: 12.5, color: 'var(--text-dim)', lineHeight: 1.5 }}>{s.d}</p>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text-mute)', marginTop: 16, letterSpacing: '0.08em', textTransform: 'uppercase' }}>{s.meta}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Stack */}
        <div className="reveal process-stack" style={{
          background: 'linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.005))',
          border: '1px solid var(--border)',
          borderRadius: 22,
          padding: '32px 36px',
          display: 'grid',
          gridTemplateColumns: '220px 1fr',
          gap: 40,
          alignItems: 'center'
        }}>
          <div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--accent-3)', marginBottom: 8 }}>Stack</div>
            <div style={{ fontSize: 18, fontWeight: 500, letterSpacing: '-0.01em' }}>Herramientas que usamos a diario</div>
          </div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
            {stack.map(s => (
              <span key={s} style={{
                padding: '8px 14px', borderRadius: 999,
                background: 'var(--surface)',
                border: '1px solid var(--border)',
                fontSize: 13, fontFamily: 'var(--font-mono)', color: 'var(--text-dim)'
              }}>{s}</span>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
window.ProcessSection = ProcessSection;