// ProductFaq — visible FAQ section on /product/, just above the SiteFooter.
// Mirrors the same 8 Q&A entries the homepage prerender injects under
// <section id="faq"> for SEO; surfaces them in-page so /product/ visitors
// see real answers without scrolling back to the homepage.
//
// Uses the existing .seo-faq selectors from styles.css (added in the SEO
// pass) so the visual treatment matches the homepage FAQ identically — no
// new CSS.

function ProductFaq() {
  const { React } = window;
  const faqs = window.SHARED_FAQS || [];

  return (
    <section id="product-faq" className="seo-faq" aria-labelledby="product-faq-heading">
      <h2 id="product-faq-heading">Frequently asked questions</h2>
      {faqs.map((faq, i) => (
        <details
          key={i}
          className="faq-item"
          itemScope
          itemType="https://schema.org/Question"
        >
          <summary itemProp="name">{faq.q}</summary>
          <div
            itemScope
            itemProp="acceptedAnswer"
            itemType="https://schema.org/Answer"
          >
            <p itemProp="text">{faq.a}</p>
          </div>
        </details>
      ))}
    </section>
  );
}

window.ProductFaq = ProductFaq;