/**
 * سؤالات متداول مقاله — همان آرایه‌ای که در `app/blog/[slug]/page.js` به
 * FAQPage JSON-LD می‌رود. حضور مرئیِ همین پرسش/پاسخ‌ها شرط اعتبار آن schema است؛
 * بدون آن، rich result رد می‌شود.
 *
 * از <details>/<summary> بومی استفاده می‌شود تا بدون جاوااسکریپت و بدون
 * وابستگی جدید، آکاردئون دسترس‌پذیر داشته باشیم.
 */
function Faq({ data }) {
  const items = (Array.isArray(data?.faq) ? data.faq : []).filter(
    (f) => f?.q && f?.a
  );

  if (items.length === 0) return null;

  return (
    <section className="mt-[16px] sm:mt-[20px] md:mt-[24px]">
      <h2 className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-bold mb-[12px] md:mb-[16px]">
        سؤالات متداول
      </h2>
      <ul className="flex flex-col gap-[8px] md:gap-[12px]">
        {items.map((item, idx) => (
          <li
            key={`${item.q}-${idx}`}
            className="rounded-[8px] border border-[#EFEFEF] bg-[#FCFCFC] px-[12px] md:px-[16px] py-[10px] md:py-[12px]"
          >
            <details>
              <summary className="cursor-pointer list-none text-[#3B3B3B] text-[13px] md:text-[15px] font-bold">
                {item.q}
              </summary>
              <p className="mt-[8px] text-[#525252] text-[13px] md:text-[15px] font-normal leading-[26px] md:leading-[30px]">
                {item.a}
              </p>
            </details>
          </li>
        ))}
      </ul>
    </section>
  );
}

export default Faq;