// Flashcards de preguntas frecuentes, en cuadrícula de 3x2. Contenido en
// frontend/config/faq-data.js. Cada tarjeta despliega su respuesta de forma
// independiente (no es un acordeón de una sola apertura).
const { useState: useStateFaq } = React;

function FaqItem({ item }) {
  const [open, setOpen] = useStateFaq(false);
  return (
    <div className={`faq__item ${open ? 'is-open' : ''}`}>
      <button type="button" className="faq__q" onClick={() => setOpen(!open)} aria-expanded={open}>
        <span>{item.q}</span>
        <span className="faq__icon" aria-hidden="true"></span>
      </button>
      <div className="faq__a" style={{ maxHeight: open ? '320px' : '0px' }}>
        <p>{item.a}</p>
      </div>
    </div>
  );
}

function Faq() {
  return (
    <section id="faq" className="section section--tight reveal">
      <div className="container">
        <div className="section__head">
          <div className="faq__marks" aria-hidden="true">
            <span className="faq__mark faq__mark--1">¿</span>
            <span className="faq__mark faq__mark--2">?</span>
            <span className="faq__mark faq__mark--4">¿</span>
            <span className="faq__mark faq__mark--5">¿</span>
            <span className="faq__mark faq__mark--6">?</span>
            <span className="faq__mark faq__mark--7">¿</span>
            <span className="faq__mark faq__mark--8">?</span>
            <span className="faq__mark faq__mark--9">¿</span>
          </div>
          <h2 dangerouslySetInnerHTML={window.tHtml('faq.title')} />
        </div>

        <div className="faq__grid">
          {window.FAQ_DATA.map((item) => <FaqItem key={item.q} item={item} />)}
        </div>
      </div>
    </section>
  );
}