/* global React, Eyebrow, Icon, Btn */

const STEPS = [
  {
    n: '01', title: 'Diagnóstico gratuito',
    desc: 'En una sesión de 30 minutos mapeamos tus riesgos actuales, gaps de cumplimiento y prioridades comerciales bloqueadas.',
  },
  {
    n: '02', title: 'Plan a medida',
    desc: 'Recibís una propuesta concreta — qué normativa, qué servicios, en qué orden y con qué timeline. Sin sorpresas, sin retainer obligatorio.',
  },
  {
    n: '03', title: 'Implementación con Ariana',
    desc: 'Nuestra plataforma automatiza controles, recolecta evidencia y te guía paso a paso. Tu equipo opera; nosotros ejecutamos.',
  },
  {
    n: '04', title: 'Certificación + soporte continuo',
    desc: 'Te acompañamos en la auditoría externa y mantenemos el cumplimiento monitoreado 24/7. Renovaciones sin parar la operación.',
  },
];

const Process = () => (
  <section id="proceso" data-screen-label="05 Process" style={{ padding: '120px 5vw', position: 'relative' }}>
    <div style={{ maxWidth: 1280, margin: '0 auto' }}>
      <div style={{ marginBottom: 72, display:'grid', gridTemplateColumns: '1.4fr 1fr', gap: 48, alignItems:'end' }}>
        <div>
          <Eyebrow>Cómo trabajamos</Eyebrow>
          <h2 style={{
            fontFamily:'var(--font-display)', fontWeight: 600,
            fontSize: 'clamp(32px, 4vw, 56px)', lineHeight: 1.05,
            letterSpacing:'-0.025em', color:'var(--fg)', margin:'18px 0 0',
          }}>
            Cuatro pasos.<br/>Cero sorpresas<span style={{color:'var(--brotek-magenta)'}}>.</span>
          </h2>
        </div>
        <p style={{ fontSize: 16, color:'var(--fg-muted)', lineHeight: 1.6 }}>
          Pensado para equipos que ya tienen demasiado en el plato. Te entregamos
          el plan completo en la primera semana — vos decidís cuándo arrancar.
        </p>
      </div>

      {/* Step row */}
      <div style={{ position:'relative' }}>
        {/* Connecting line */}
        <div style={{
          position:'absolute', top: 36, left: '6%', right: '6%', height: 1,
          background: 'linear-gradient(90deg, transparent, rgba(236,0,140,.4) 20%, rgba(163,53,231,.4) 50%, rgba(53,231,71,.4) 80%, transparent)',
        }}/>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 32 }}>
          {STEPS.map((s, i) => {
            const colors = ['#EC008C', '#A335E7', '#3551E7', '#35E747'];
            return (
              <div key={s.n} style={{ position:'relative' }}>
                <div style={{
                  width: 72, height: 72, borderRadius: '50%',
                  background: '#171717',
                  border: `1px solid ${colors[i]}55`,
                  display:'flex', alignItems:'center', justifyContent:'center',
                  fontFamily:'var(--font-mono)', fontSize: 14, color: colors[i],
                  boxShadow: `inset 0 0 30px ${colors[i]}22, 0 0 0 6px #171717`,
                  marginBottom: 28, fontWeight: 600,
                }}>{s.n}</div>
                <h3 style={{
                  fontFamily:'var(--font-display)', fontWeight: 600, fontSize: 20,
                  color:'var(--fg)', marginBottom: 12, letterSpacing:'-0.015em',
                }}>{s.title}</h3>
                <p style={{ fontSize: 14, color:'var(--fg-muted)', lineHeight: 1.55 }}>{s.desc}</p>
              </div>
            );
          })}
        </div>
      </div>

      <div style={{ marginTop: 64, display:'flex', justifyContent:'center' }}>
        <Btn variant="primary" size="lg" icon="calendar" href="https://calendar.google.com/calendar/u/0/appointments/schedules/AcZssZ03LzoOyBnS6ZQylmBi2miXKi2eqVs6DxXcx48byUlVPWTC4Cw9BxRHRHjYOO5s2vPvppukA3C-" target="_blank">Agendar diagnóstico ahora</Btn>
      </div>
    </div>
  </section>
);

window.Process = Process;