/* faq.jsx */

const FAQS = [
  {
    q: "¿Dónde está ubicada la clínica?",
    a: "Atendemos en consulta privada en Montería, Córdoba (Colombia). La dirección exacta se comparte una vez confirmada tu cita, para preservar la intimidad de las pacientes."
  },
  {
    q: "¿Cómo es la primera consulta?",
    a: "La valoración inicial dura entre 45 y 60 minutos. Incluye historia clínica, análisis facial o tricológico según el motivo, fotografía estandarizada y un plan de tratamiento personalizado con presupuesto transparente. No estás obligada a tomar el plan ese mismo día."
  },
  {
    q: "¿Los resultados son naturales?",
    a: "Esa es la esencia de la consulta. Trabajamos con dosis conservadoras, técnicas de capas finas y un criterio estético que prioriza armonía sobre exageración. Si lo que buscas es un cambio muy marcado, te lo decimos con honestidad antes de empezar."
  },
  {
    q: "¿Qué tan dolorosos son los procedimientos?",
    a: "La mayoría de los tratamientos se realizan con anestesia tópica y técnica de aguja fina, por lo que la molestia es mínima. En procedimientos como microinjerto FUE se usa anestesia local y un protocolo de confort durante toda la sesión."
  },
  {
    q: "¿Atienden pacientes de fuera de Montería?",
    a: "Sí. Recibimos pacientes de Sincelejo, Cartagena, Barranquilla y toda la región Caribe, así como desde Bogotá y Medellín. Coordinamos la agenda en bloques para que puedas realizar valoración y tratamiento en una sola visita cuando es seguro hacerlo."
  },
  {
    q: "¿Cómo agendo y cuál es la política de cancelación?",
    a: "Puedes agendar por WhatsApp o el formulario de esta página. Reservamos el bloque con un abono que se descuenta del tratamiento. Se puede reagendar sin costo hasta 24 horas antes de la cita."
  },
];

function FAQ() {
  const [open, setOpen] = useState(0);

  return (
    <section className="section-pad" id="faq" style={{ background: "var(--surface-2)" }}>
      <div className="wrap">
        <div className="faq-grid">
          <Reveal>
            <Eyebrow>Preguntas frecuentes</Eyebrow>
            <h2 className="section-title" style={{ marginTop: 18 }}>
              Todo lo que querías<br/><em>preguntar primero.</em>
            </h2>
            <p className="lead" style={{ marginTop: 24 }}>
              Si tu pregunta no está aquí, escríbenos por WhatsApp. Respondemos personalmente.
            </p>
            <a className="btn btn-ghost" style={{ marginTop: 24 }} href="https://wa.me/573013083210" target="_blank" rel="noreferrer">
              Hablar por WhatsApp <Arr />
            </a>
          </Reveal>

          <Reveal delay={1}>
            <div className="faq-list" itemScope itemType="https://schema.org/FAQPage">
              {FAQS.map((f, i) => (
                <div
                  key={i}
                  className={`faq-item ${open === i ? "is-open" : ""}`}
                  itemScope
                  itemProp="mainEntity"
                  itemType="https://schema.org/Question"
                >
                  <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
                    <span itemProp="name">{f.q}</span>
                    <span className="plus"><Plus /></span>
                  </button>
                  <div className="faq-a" itemScope itemProp="acceptedAnswer" itemType="https://schema.org/Answer">
                    <div className="faq-a-inner" itemProp="text">{f.a}</div>
                  </div>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { FAQ });