// Process — horizontal timeline
const STEPS = [
  { n: '01', title: 'Consulta', text: 'Contáctame por WhatsApp o Instagram. Hablamos de tu idea, estilo y zona del cuerpo.' },
  { n: '02', title: 'Diseño', text: 'Creo un diseño personalizado basado en tu visión. Lo revisamos hasta que sea perfecto.' },
  { n: '03', title: 'Sesión', text: 'Preparamos todo con los más altos estándares de higiene y calidad.' },
  { n: '04', title: 'Resultado', text: 'Tu tatuaje listo para mostrar. Te guío en el cuidado post-tatuaje.' },
];

function Process() {
  return (
    <section id="proceso" style={{ background: 'var(--bg-secondary)', maxWidth: 'none', padding: '90px 6vw' }}>
      <div style={{ maxWidth: 1600, margin: '0 auto' }}>
        <Reveal><div className="label-tag">Proceso</div></Reveal>
        <Reveal delay={0.1}>
          <h2 style={{ fontSize: 'clamp(36px, 6vw, 84px)', marginTop: 16, lineHeight: 1, maxWidth: 900 }}>
            ¿Cómo es <em style={{ color: 'var(--ink-red-bright)' }}>el proceso?</em>
          </h2>
        </Reveal>

        <div style={{ marginTop: 56, position: 'relative' }}>
          <div className="process-grid">
            {STEPS.map((s, i) => (
              <Reveal key={s.n} delay={i * 0.1}>
                <div className="process-card">
                  <motion.div
                    initial={{ scale: 0 }}
                    whileInView={{ scale: 1 }}
                    viewport={{ once: true }}
                    transition={{ duration: 0.5, delay: i * 0.1 }}
                    style={{
                      width: 60, height: 60, borderRadius: '50%',
                      border: '1px solid var(--ink-red-bright)',
                      background: 'var(--bg-primary)',
                      display: 'grid', placeItems: 'center',
                      fontFamily: 'var(--font-display)', fontSize: 20, fontStyle: 'italic',
                      color: 'var(--ink-red-bright)', flexShrink: 0,
                    }}
                  >{s.n}</motion.div>
                  <div>
                    <h3 style={{
                      fontFamily: 'var(--font-accent)',
                      fontSize: 20, color: 'var(--white)',
                      letterSpacing: '0.15em',
                    }}>{s.title.toUpperCase()}</h3>
                    <p style={{ color: 'var(--gray)', fontSize: 14, lineHeight: 1.6, marginTop: 8 }}>
                      {s.text}
                    </p>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </div>
      <style>{`
        .process-grid {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 16px;
        }
        .process-card {
          display: flex; gap: 20px; align-items: flex-start;
          padding: 24px;
          background: rgba(20,10,10,0.4);
          border: 1px solid rgba(139,0,0,0.2);
          height: 100%;
        }
        @media (max-width: 600px) {
          .process-card { padding: 18px; gap: 14px; }
          .process-card h3 { font-size: 16px !important; }
          .process-card p { font-size: 12px !important; }
        }
      `}</style>
    </section>
  );
}

window.Process = Process;