function HowItWorks() {
  const steps = [
    {
      num: '1',
      title: 'Te inscribes',
      desc: 'Completa el formulario en menos de un minuto con tus datos y tu situación actual.'
    },
    {
      num: '2',
      title: 'Te contactamos',
      desc: 'Un asesor de ATU Jobs te escribirá por WhatsApp o te llamará para conocer tu caso sin compromiso.'
    },
    {
      num: '3',
      title: 'Te orientamos',
      desc: 'Te explicamos los caminos formativos, laborales y de regularización que mejor se adaptan a ti.'
    }
  ];

  const scrollToForm = (e) => {
    e.preventDefault();
    document.getElementById('form')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };

  return (
    <section className="section" style={{ background: 'var(--bg-light)', padding: '60px 0' }}>
      <div className="container">
        <div style={{ textAlign: 'center', maxWidth: '800px', margin: '0 auto 48px auto' }}>
          <div className="eyebrow-pill" style={{ marginBottom: '14px', background: 'var(--bg-brand-soft)', color: 'var(--atu-blue)' }}>
            ¿Cómo funciona?
          </div>
          <h2 style={{ fontSize: '28px', color: 'var(--atu-blue)' }}>
            Tu camino hacia un futuro regularizado en 3 sencillos pasos
          </h2>
          <p className="lead" style={{ fontSize: '15px', color: 'var(--fg-2)', marginTop: '8px' }}>
            Un proceso rápido y transparente pensado para facilitarte las cosas desde el primer día.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: '40px', position: 'relative' }}>
          {steps.map((step, i) => (
            <div key={i} style={{
              background: '#fff',
              borderRadius: '16px',
              padding: '32px 24px',
              border: '1px solid var(--border-strong)',
              boxShadow: 'var(--shadow-sm)',
              position: 'relative',
              textAlign: 'center'
            }}>
              <div style={{
                position: 'absolute',
                top: '-20px',
                left: '50%',
                transform: 'translateX(-50%)',
                width: '40px',
                height: '40px',
                borderRadius: '50%',
                background: 'var(--atu-coral)',
                color: '#fff',
                fontWeight: '700',
                fontSize: '18px',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                boxShadow: 'var(--shadow-cta)'
              }}>
                {step.num}
              </div>
              <h3 style={{ fontSize: '19px', fontWeight: '700', marginTop: '12px', marginBottom: '12px', color: 'var(--atu-blue)' }}>
                {step.title}
              </h3>
              <p style={{ margin: 0, fontSize: '13.5px', lineHeight: '1.6', color: 'var(--fg-2)' }}>
                {step.desc}
              </p>
            </div>
          ))}
        </div>

        <div style={{ textAlign: 'center', marginTop: '40px' }}>
          <a href="#form" onClick={scrollToForm} className="btn btn-primary">
            Empezar ahora
          </a>
        </div>
      </div>
    </section>
  );
}

window.HowItWorks = HowItWorks;