// Faq.jsx — accordion
function Faq() {
  const items = [
    {
      q: '¿Qué tipo de médicos pueden trabajar contigo?',
      a: 'Trabajamos principalmente con especialistas con consultorio establecido — dermatólogos, ginecólogos, cardiólogos, cirujanos plásticos, ortopedistas, pediatras, entre otros. Si tu especialidad no está en la lista, hablemos: lo importante es que valores la ética médica en la comunicación.',
    },
    {
      q: '¿En cuánto tiempo veré resultados?',
      a: 'Los primeros movimientos los notas en 4–6 semanas: aumento de seguidores cualificados, mensajes directos de pacientes y mejor conversación digital. Las citas reales empiezan a llegar de forma consistente entre el mes 3 y 4, una vez que el embudo está optimizado.',
    },
    {
      q: '¿Por qué no garantizan un número exacto de pacientes?',
      a: 'Porque sería deshonesto. Tu volumen de pacientes depende de tu especialidad, tu zona, tu precio y la calidad de tu atención. Lo que sí garantizamos es un proceso transparente, contenido profesional y reportes mensuales con los números reales de tu inversión.',
    },
    {
      q: '¿Yo tengo que grabar videos?',
      a: 'Sí, pero te acompañamos. Vamos al consultorio una vez al mes para grabar contigo: dirigimos cámara, guion, iluminación y edición. Tú solo te enfocas en hablar de lo que sabes — nosotros nos encargamos de que se vea profesional.',
    },
    {
      q: '¿Trabajas con doctores fuera de Tampico?',
      a: 'Sí. Atendemos consultorios en toda la República Mexicana. La estrategia, el copy, el diseño y la pauta los manejamos a distancia. Para grabaciones en consultorio fuera de Tampico, coordinamos visitas trimestrales o trabajamos con un fotógrafo local.',
    },
    {
      q: '¿Qué incluye el diagnóstico inicial?',
      a: 'Una llamada de 30 minutos sin costo donde revisamos tus redes actuales, tu competencia local y tu objetivo principal. Sales con tres recomendaciones concretas que puedes aplicar incluso si no trabajas con nosotros.',
    },
  ];

  const [openIdx, setOpenIdx] = React.useState(0);

  return (
    <section id="faq" className="section" data-screen-label="05 FAQ">
      <div className="section__inner faq">
        <div className="faq__intro">
          <span className="section__eyebrow">Preguntas frecuentes</span>
          <h2 className="section__title">
            Todo lo que <em>preguntan</em> antes de empezar.
          </h2>
          <p className="section__lead" style={{marginTop: 24}}>
            ¿Tienes una duda que no está aquí? Escríbenos por WhatsApp y te respondemos personalmente.
          </p>
        </div>

        <div className="faq__list">
          {items.map((it, i) => (
            <div key={i} className={'faq__item ' + (openIdx === i ? 'is-open' : '')}>
              <button
                className="faq__q"
                onClick={() => setOpenIdx(openIdx === i ? -1 : i)}
                aria-expanded={openIdx === i}
              >
                <span>{it.q}</span>
                <span className="faq__plus" aria-hidden="true">+</span>
              </button>
              <div className="faq__a">
                <div>
                  <p>{it.a}</p>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Faq = Faq;