/**
 * faq.jsx — accordion of the four questions customers actually ask a
 * locksmith. The same Q&As are mirrored as FAQPage structured data in
 * index.html so Google can show them as rich results; keep both in sync.
 */

function FaqItem({ item, isOpen, onToggle, id }) {
  return (
    <div className={"faq-item" + (isOpen ? " faq-item--open" : "")}>
      <button
        type="button"
        className="faq-item__q"
        aria-expanded={isOpen}
        aria-controls={id}
        onClick={onToggle}
      >
        {item.q}
        <Icon name="chevron" size={20} />
      </button>
      {isOpen && (
        <p className="faq-item__a" id={id}>
          {item.a}
        </p>
      )}
    </div>
  );
}

function Faq() {
  const { t } = useLang();
  /* Single open item at a time keeps the section compact on mobile. */
  const [openIndex, setOpenIndex] = React.useState(0);

  return (
    <section className="section faq" id="preguntas" data-screen-label="Preguntas frecuentes">
      <div className="container">
        <SectionHead center kicker={t.faq.kicker} title={t.faq.title} />

        <div className="faq__list">
          {t.faq.items.map((item, i) => (
            <div className="reveal" key={item.q} style={{ "--s": i }}>
              <FaqItem
                item={item}
                id={"faq-answer-" + i}
                isOpen={openIndex === i}
                onToggle={() => setOpenIndex(openIndex === i ? -1 : i)}
              />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Faq });