// Testimonios + FAQ
function Testimonios() {
  const items = [
    {
      stars: 5,
      text: 'Nunca había tramitado mi visa y pensé que sería complicadísimo. El equipo me explicó todo, me ayudó con el DS-160 y me preparó para la entrevista. Me la dieron por 10 años a la primera.',
      name: 'María F.',
      where: 'Monterrey, NL',
      initials: 'MF',
    },
    {
      stars: 5,
      text: 'Mi visa estaba vencida desde 2020 y necesitaba renovarla rápido para un viaje. Me consiguieron cita en menos de 3 semanas en Hermosillo y todo salió perfecto. 100% recomendados.',
      name: 'Carlos R.',
      where: 'Guadalajara, JAL',
      initials: 'CR',
    },
    {
      stars: 5,
      text: 'Tenía mi cita hasta 2027 y necesitaba viajar este año por trabajo. Me adelantaron la cita a Ciudad Juárez en menos de dos meses. Increíble el seguimiento y la honestidad del proceso.',
      name: 'Luisa M.',
      where: 'CDMX',
      initials: 'LM',
    },
  ];
  return (
    <section className="section testimonios">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow"><span className="dot"></span> Testimonios</span>
          <h2>Lo que dicen los <span className="serif-italic">clientes</span> que ya viajan con su visa.</h2>
          <p>Historias reales de personas en toda la república que confiaron en VisasPro para tramitar, renovar o adelantar su cita.</p>
        </div>
        <div className="testi-grid">
          {items.map((t, i) => (
            <div key={i} className="testi reveal" style={{'--delay': (i*100)+'ms'}}>
              <div className="stars">
                {Array.from({length: t.stars}).map((_, k) => <Icon.star key={k}/>)}
              </div>
              <p>“{t.text}”</p>
              <div className="who">
                <div className="avatar">{t.initials}</div>
                <div className="meta">
                  <div className="name">{t.name}</div>
                  <div className="where">{t.where}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FAQ() {
  const [open, setOpen] = React.useState(0);
  const items = [
    { q: '¿Garantizan que me otorguen la visa?',
      a: 'No. La decisión final siempre es del cónsul estadounidense y nadie puede garantizar un resultado. Lo que sí garantizamos es que tu solicitud estará preparada de forma impecable y que llegarás a la entrevista listo y bien asesorado, lo cual aumenta significativamente tus probabilidades.' },
    { q: '¿Cuánto tiempo tarda todo el proceso?',
      a: 'Depende del consulado y del tipo de trámite. La preparación de tu solicitud con nosotros toma de 2 a 5 días. Las citas en consulados mexicanos varían entre 1 y 18 meses, y con nuestro servicio de adelanto solemos conseguir fechas en semanas.' },
    { q: '¿Atienden a clientes fuera de Monterrey?',
      a: 'Sí. Atendemos a clientes en toda la república mexicana de forma 100% remota, por WhatsApp, videollamada o presencial si te encuentras en nuestra zona. Todos los documentos se preparan digitalmente.' },
    { q: '¿Qué consulados manejan para adelantos de cita?',
      a: 'Trabajamos con todos los consulados de México: Monterrey, CDMX, Guadalajara, Hermosillo, Ciudad Juárez, Tijuana, Matamoros, Nogales, Nuevo Laredo y Mérida. Te ayudamos a elegir el más conveniente según disponibilidad y ubicación.' },
    { q: '¿Cuánto cuesta el servicio?',
      a: 'El costo varía según el tipo de trámite (primera vez, renovación o adelanto) y la complejidad del caso. Tras tu asesoría inicial gratis te enviamos una cotización clara, sin sorpresas ni costos ocultos. Los derechos consulares (MRV) se pagan aparte directamente al gobierno de EE.UU.' },
    { q: '¿Aceptan casos con visa negada o antecedentes?',
      a: 'Sí, evaluamos cada caso de forma individual. Si has tenido una negativa previa, situación migratoria irregular u otros antecedentes, te decimos con honestidad las posibilidades reales antes de iniciar cualquier trámite.' },
  ];

  return (
    <section className="section faq">
      <div className="container faq-grid">
        <div className="reveal">
          <span className="eyebrow"><span className="dot"></span> Preguntas frecuentes</span>
          <h2 style={{marginTop:16}}>Las dudas más comunes <span className="serif-italic">resueltas.</span></h2>
          <p>Si tu pregunta no está aquí, escríbenos por WhatsApp y un asesor humano te responde.</p>
          <a className="btn btn-dark" href="https://wa.me/528126381417" target="_blank" rel="noreferrer" style={{marginTop:24}}>
            <Icon.whatsapp size={16}/> Pregunta por WhatsApp
          </a>
        </div>
        <div className="faq-list reveal" style={{'--delay':'150ms'}}>
          {items.map((it, i) => (
            <div key={i} className={'faq-item' + (open === i ? ' open' : '')}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
                <span>{it.q}</span>
                <span className="plus"><Icon.plus/></span>
              </button>
              <div className="faq-a" style={{maxHeight: open === i ? '300px' : '0'}}>
                <div className="faq-a-inner">{it.a}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Testimonios, FAQ });