function FAQ() {
  const items = [
    {
      q: "¿Con cuánto tiempo de anticipación debo reservar?",
      a: "Recomendamos entre 6 y 12 meses para bodas. Las fechas de octubre a diciembre se cierran rápido — si tu boda cae en temporada, escríbenos cuanto antes."
    },
    {
      q: "¿Hacen servicio a domicilio o en el venue?",
      a: "Sí. Llegamos al lugar donde te estés preparando — casa, hotel o hacienda — con todo el equipo necesario. Para destinos fuera de Guadalajara aplica un costo adicional de traslado."
    },
    {
      q: "¿Qué incluye la prueba de maquillaje (trial)?",
      a: "Una sesión de aproximadamente 2.5 horas en nuestro estudio. Hacemos al menos una propuesta completa — incluyendo ceja — con la posibilidad de ajustar tono, intensidad o look. Te llevas todas las recomendaciones por escrito."
    },
    {
      q: "¿Trabajas con todo tipo de piel?",
      a: "Sí. Veintiséis años atendiendo todo tipo de piel, tono y textura. Usamos producto profesional, hipoalergénico, y adaptamos la fórmula a las condiciones del día y del clima."
    },
    {
      q: "¿Puedes maquillar también a mi mamá, hermanas y damas?",
      a: "Por supuesto. Coordinamos un equipo según el tamaño del cortejo y los tiempos del evento, manteniendo coherencia en estilo y armonía con el look de la novia."
    },
    {
      q: "¿Ofrecen brow shading sin maquillaje de boda?",
      a: "Sí, brow shading es un servicio independiente que ofrecemos en estudio durante todo el año. Las citas se agendan con 2–4 semanas de anticipación."
    },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section id="preguntas" style={{ padding: "140px 0", background: "var(--ivory)" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.3fr", gap: 80, alignItems: "start" }}>
          <div style={{ position: "sticky", top: 100 }}>
            <div className="eyebrow">Preguntas · 07</div>
            <h2 className="display" style={{ fontSize: "clamp(40px, 4.5vw, 64px)", margin: "20px 0 24px", color: "var(--coffee)", textWrap: "balance" }}>
              Lo que las novias<br/>
              <span className="italic" style={{ color: "var(--rose)" }}>nos preguntan.</span>
            </h2>
            <p style={{ color: "var(--coffee-soft)", fontSize: 15, lineHeight: 1.6, maxWidth: 380 }}>
              Si no encuentras tu respuesta aquí, escríbenos directamente — te
              responderemos personalmente en menos de 24 horas.
            </p>
          </div>

          <div>
            {items.map((it, i) => (
              <div key={i} style={{ borderTop: "1px solid var(--marfil)", borderBottom: i === items.length - 1 ? "1px solid var(--marfil)" : "0" }}>
                <button onClick={() => setOpen(open === i ? -1 : i)}
                  style={{
                    width: "100%", textAlign: "left", padding: "28px 0",
                    display: "flex", justifyContent: "space-between", alignItems: "center",
                    color: "var(--coffee)",
                  }}>
                  <span className="display" style={{ fontSize: 22, paddingRight: 24, textWrap: "balance" }}>{it.q}</span>
                  <span style={{
                    width: 36, height: 36, borderRadius: 999,
                    border: "1px solid var(--coffee)",
                    display: "grid", placeItems: "center",
                    transform: open === i ? "rotate(45deg)" : "none",
                    transition: "transform .35s ease",
                    flex: "0 0 auto",
                  }}>
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2"><path d="M12 5v14M5 12h14" /></svg>
                  </span>
                </button>
                <div style={{
                  maxHeight: open === i ? 200 : 0,
                  overflow: "hidden",
                  transition: "max-height .5s ease, padding .5s ease",
                  paddingBottom: open === i ? 28 : 0,
                }}>
                  <p style={{ margin: 0, color: "var(--coffee-soft)", fontSize: 15, lineHeight: 1.7, maxWidth: 600, textWrap: "pretty" }}>{it.a}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

window.FAQ = FAQ;