// FAQ — two-column accordion, one item open at a time. Item 1 is open by default.
// Reusable beyond the Home page: pass `items` (and optionally `eyebrow`/`title`/`sub`) to
// configure it for another list of questions — e.g. the /faq page reuses this exact component
// with a longer, expanded list. `showHead` lets a page that already has its own intro banner
// (like the /faq page's PageHeader) skip this section's own eyebrow/title/sub block so the two
// aren't stacked redundantly. With no props at all, it renders exactly as it does on Home.
const Faq = ({
  items,
  eyebrow,
  title,
  sub,
  showHead = true,
  readmore = true,
} = {}) => {
  const faqItems = items || t("faq.items");
  const faqEyebrow = eyebrow ?? t("faq.eyebrow");
  const faqTitle = title ?? t("faq.title");
  const faqSub = sub ?? t("faq.sub");
  const [openIndex, setOpenIndex] = React.useState(0);

  return (
    <section id="faq" className="scl-section scl-section--white">
      <div className="scl-container">
        {showHead && (
          <div className="scl-section__head">
            <div>
              <div className="scl-eyebrow">
                <span className="scl-rule" /> {faqEyebrow}
              </div>
              <h2 className="scl-h2">{faqTitle}</h2>
            </div>
            <p className="scl-lead scl-section__head-sub">{faqSub}</p>
          </div>
        )}

        <div className="scl-faq-grid">
          {faqItems.map((item, i) => {
            const isOpen = openIndex === i;
            const buttonId = "scl-faq-button-" + i;
            const panelId = "scl-faq-panel-" + i;
            return (
              <div
                key={i}
                className={"scl-faq-item" + (isOpen ? " is-open" : "")}
              >
                <button
                  type="button"
                  id={buttonId}
                  className="scl-faq-item__question"
                  aria-expanded={isOpen}
                  aria-controls={panelId}
                  onClick={() => setOpenIndex(isOpen ? -1 : i)}
                >
                  <span className="scl-faq-item__q-text">
                    <span className="scl-faq-item__num">
                      {String(i + 1).padStart(2, "0")}
                    </span>
                    {item.question}
                  </span>
                  <span className="scl-faq-item__toggle" aria-hidden="true">
                    <Icon name={isOpen ? "minus" : "plus"} size={14} />
                  </span>
                </button>
                <div
                  id={panelId}
                  role="region"
                  aria-labelledby={buttonId}
                  className="scl-faq-item__panel"
                >
                  <div className="scl-faq-item__panel-inner">
                    <p className="scl-small scl-faq-item__answer">
                      {item.answer}
                    </p>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
        {/* {readmore && (
          <div class="scl-eyebrow scl-eyebrow--100">
            <div>
              <a href="/faq">Read more</a>
            </div>
          </div>
        )} */}
      </div>
    </section>
  );
};

window.Faq = Faq;