/* FAQ — preguntas frecuentes (GEO + humanos). Los mismos datos viven en el
   JSON-LD FAQPage del <head> para los motores que no ejecutan JS. */
const { useState: useFaqState } = React;

const FAQ_ITEMS = [
  { q: "¿Qué es Billboard AR Experience?", a: "Es un programa internacional diseñado por Billboard Argentina que combina formación, networking y una experiencia inmersiva en la industria musical, culminando con la participación en los principales eventos de la música en Miami." },
  { q: "¿Quién comercializa la experiencia?", a: "La comercialización la realiza Travel Services, a través de un producto diseñado por Billboard Argentina." },
  { q: "¿Cuáles son los medios de pago disponibles?", a: "Depósito o transferencia bancaria (en pesos o dólares; los depósitos tienen un 5% adicional por Retención del Impuesto a las Ganancias), tarjeta de crédito (en pesos, con la percepción del 30% por viajes al exterior) y crédito personal (sujeto a aprobación, con financiación en pesos o dólares)." },
  { q: "¿Puedo contratar la experiencia sin vuelos?", a: "Sí. Podés contratar Billboard AR Experience sin incluir los vuelos." },
  { q: "¿Puedo contratar la experiencia sin hospedaje?", a: "Sí. También existe la posibilidad de participar sin hospedaje." },
  { q: "¿Puedo contratar sin vuelos y sin hospedaje?", a: "Sí. Podemos enviarte una propuesta personalizada con el programa completo, excluyendo esos servicios." },
  { q: "¿Qué incluye el programa si no contrato vuelos u hospedaje?", a: "Mantenés el acceso a todas las actividades incluidas según la modalidad contratada: workshops, actividades de networking, accesos a los eventos y demás beneficios. Te enviamos el detalle correspondiente a tu caso." },
  { q: "¿Solo pueden participar personas de Argentina?", a: "No. La experiencia está abierta a participantes de cualquier país del mundo." },
  { q: "Vivo fuera de Argentina, ¿puedo inscribirme?", a: "Sí. Podés participar sin importar tu país de residencia." },
  { q: "¿Las clases y workshops son obligatoriamente presenciales?", a: "No. La etapa de formación puede realizarse de manera virtual, por lo que podés participar desde cualquier parte del mundo." },
  { q: "¿Necesito viajar a Buenos Aires para la formación?", a: "No necesariamente. Los workshops pueden realizarse de forma virtual para quienes residen fuera de Buenos Aires o en el exterior." },
  { q: "¿Qué sucede una vez que confirmo mi inscripción?", a: "Recibís el cronograma completo, la documentación necesaria, información sobre la preparación previa, indicaciones para el viaje (si corresponde) y acceso a los canales oficiales de comunicación con el equipo de Billboard AR Experience." },
  { q: "¿Puedo solicitar más información antes de decidir?", a: "Sí. Podemos enviarte el programa completo, el detalle de lo que incluye la experiencia, las opciones de contratación y las alternativas de financiación." },
];

function FaqItem({ item, open, onToggle }) {
  return (
    <div style={{ borderBottom: "1px solid var(--border-on-dark)" }}>
      <button
        onClick={onToggle}
        aria-expanded={open}
        style={{
          width: "100%", display: "flex", alignItems: "center", justifyContent: "space-between",
          gap: "16px", padding: "20px 4px", background: "none", border: "none", cursor: "pointer",
          textAlign: "left", color: "var(--white)",
          font: "var(--fw-semibold) var(--fs-body)/1.4 var(--font-body)",
        }}
      >
        <span>{item.q}</span>
        <span aria-hidden="true" style={{ flex: "none", width: 22, height: 22, color: "var(--text-on-dark-muted)", transition: "transform var(--dur-fast)", transform: open ? "rotate(180deg)" : "none" }}>
          {Icons.chevronDown}
        </span>
      </button>
      {open ? (
        <p style={{ margin: "0 4px 22px", maxWidth: "68ch", font: "var(--fw-regular) var(--fs-body-sm)/1.6 var(--font-body)", color: "var(--text-on-dark-muted)" }}>
          {item.a}
        </p>
      ) : null}
    </div>
  );
}

function Faq() {
  const [open, setOpen] = useFaqState(0);
  return (
    <Section id="faq" tone="dark">
      <Reveal>
        <SectionHeading size="lg" title={<>Preguntas <span className="bb-gradient-text">frecuentes</span></>} />
      </Reveal>
      <div style={{ maxWidth: "760px", marginInline: "auto", marginTop: "clamp(2rem, 4vw, 3rem)" }}>
        {FAQ_ITEMS.map(function (it, i) {
          return (
            <Reveal key={i} delay={Math.min(i * 40, 240)}>
              <FaqItem
                item={it}
                open={open === i}
                onToggle={function () {
                  const willOpen = open !== i;
                  setOpen(willOpen ? i : -1);
                  if (willOpen) bbTrack("faq_open", { q: it.q });
                }}
              />
            </Reveal>
          );
        })}
      </div>
    </Section>
  );
}

window.Faq = Faq;
