// Servicios + Nosotros + Process
function Servicios() {
  const cards = [
    {
      n: '01', icon: <Icon.passport size={28}/>,
      title: 'Visa por Primera Vez',
      desc: 'Si nunca has tramitado tu visa americana, te guiamos paso a paso desde el llenado del DS-160 hasta tu entrevista consular.',
      list: ['Llenado completo del DS-160', 'Pago de derechos MRV', 'Preparación para tu entrevista', 'Revisión de documentos'],
    },
    {
      n: '02', icon: <Icon.refresh size={28}/>,
      title: 'Renovación de Visa',
      desc: '¿Tu visa está por vencer o ya venció? Te ayudamos con el proceso de renovación, incluso si aplicas sin entrevista.',
      list: ['Evaluamos si calificas sin entrevista', 'Llenado del DS-160 actualizado', 'Tracking del envío y entrega', 'Atención hasta recibir tu visa'],
    },
    {
      n: '03', icon: <Icon.calendar size={28}/>,
      title: 'Adelanto de Citas',
      desc: 'Te conseguimos una cita más cercana en consulados como Monterrey, CDMX, Guadalajara, Hermosillo, Ciudad Juárez y más.',
      list: ['Búsqueda diaria de fechas abiertas', 'Cambio entre consulados', 'Alertas en tiempo real', 'Sin alterar tu solicitud original'],
    },
  ];
  return (
    <section className="section services" id="servicios">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow"><span className="dot"></span> Servicios</span>
          <h2>Tres formas de obtener tu visa, <span className="serif-italic">acompañado</span> por expertos.</h2>
          <p>Cada caso es único. Te asignamos un asesor personal que entiende tu situación y diseña el camino más eficiente para tu visa americana.</p>
        </div>
        <div className="services-grid">
          {cards.map((c, i) => (
            <div key={c.n} className="service-card reveal" style={{'--delay': (i*100)+'ms'}}>
              <div className="num">{c.n}</div>
              <div className="icon">{c.icon}</div>
              <h3>{c.title}</h3>
              <p>{c.desc}</p>
              <ul>
                {c.list.map(it => <li key={it}>{it}</li>)}
              </ul>
              <a className="link" href="Servicios.html">
                Más información
                <Icon.arrow/>
              </a>
            </div>
          ))}
        </div>

        <div style={{marginTop:48, display:'flex', justifyContent:'center'}} className="reveal">
          <a className="btn btn-dark" href="Servicios.html">
            Conoce nuestros servicios <Icon.arrow/>
          </a>
        </div>
      </div>
    </section>
  );
}

function Nosotros() {
  return (
    <section className="section nosotros" id="nosotros">
      <div className="container nosotros-grid">
        <div className="nosotros-visual reveal">
          <div>
            <div className="label">Años de experiencia</div>
            <div className="yrs">5<sup>+</sup></div>
          </div>
          <div className="quote">
            “Nuestro trabajo no termina hasta que tienes tu visa en la mano. Cada cliente recibe atención personalizada, sin importar la complejidad de su caso.”
            <div style={{marginTop:18, fontFamily:'Geist, sans-serif', fontStyle:'normal', fontSize:14, color:'rgba(255,255,255,0.7)', letterSpacing:'.02em'}}>
              — Equipo VisasPro
            </div>
          </div>
        </div>

        <div className="nosotros-body reveal" style={{'--delay':'150ms'}}>
          <span className="eyebrow"><span className="dot"></span> Nosotros</span>
          <h2 style={{marginTop:16}}>Más de 5 años ayudando a mexicanos a cruzar la frontera <span className="serif-italic">con confianza.</span></h2>
          <p>
            En VisasPro nos especializamos exclusivamente en visas americanas. No somos una agencia
            de viajes con servicios extra: somos un equipo de asesores expertos que conocen al detalle
            los procesos consulares, los formularios y las preguntas más frecuentes de la entrevista.
          </p>
          <p>
            Atendemos casos en toda la república mexicana, de manera remota o presencial,
            con un enfoque humano, transparente y libre de promesas falsas.
          </p>

          <div className="values">
            <div className="value">
              <div className="v-icon"><Icon.shield size={18}/></div>
              <div>
                <h4>Procesos transparentes</h4>
                <p>Nunca prometemos lo que no podemos cumplir. Te explicamos riesgos y posibilidades reales.</p>
              </div>
            </div>
            <div className="value">
              <div className="v-icon"><Icon.users size={18}/></div>
              <div>
                <h4>Asesor dedicado</h4>
                <p>Tendrás una persona que conoce tu caso de principio a fin, sin call centers.</p>
              </div>
            </div>
            <div className="value">
              <div className="v-icon"><Icon.clock size={18}/></div>
              <div>
                <h4>Respuesta rápida</h4>
                <p>Te respondemos por WhatsApp en menos de una hora en horario hábil.</p>
              </div>
            </div>
            <div className="value">
              <div className="v-icon"><Icon.globe size={18}/></div>
              <div>
                <h4>Cobertura nacional</h4>
                <p>Trabajamos con todos los consulados de México y atendemos clientes en todo el país.</p>
              </div>
            </div>
          </div>

          <div style={{marginTop:32, display:'flex', gap:12, flexWrap:'wrap'}}>
            <a className="btn btn-dark" href="Nosotros.html">
              Conoce más sobre nosotros <Icon.arrow/>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

function Process() {
  const steps = [
    { n: '01', t: 'Asesoría inicial', d: 'Agendamos una llamada o chat para entender tu caso, revisar antecedentes y definir la mejor estrategia de aplicación.' },
    { n: '02', t: 'Preparación de tu trámite', d: 'Llenamos contigo el DS-160, pagamos derechos, agendamos cita y preparamos los documentos necesarios para tu entrevista.' },
    { n: '03', t: 'Acompañamiento hasta tu visa', d: 'Te entrenamos para la entrevista consular y monitoreamos el proceso hasta que tu visa esté en tus manos.' },
  ];
  return (
    <section className="section process">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow"><span className="dot"></span> Cómo trabajamos</span>
          <h2>Tres pasos claros, <span className="serif-italic" style={{color:'#fff'}}>cero sorpresas.</span></h2>
          <p>Un proceso pensado para que sepas exactamente qué sigue, cuánto tarda y qué esperar en cada etapa.</p>
        </div>
        <div className="process-grid">
          {steps.map((s, i) => (
            <div key={s.n} className="step reveal" style={{'--delay': (i*120)+'ms'}}>
              <div className="step-num">
                <span className="n">{s.n}</span>
                <span>Paso {i+1}</span>
              </div>
              <h3>{s.t}</h3>
              <p>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Servicios, Nosotros, Process });