// بلوک سوالات متداول — همان منبع دادهٔ FAQPage schema، تا متن دیده‌شده و schema واگرا نشوند.
// استایل با کارت‌های موجود سایت هم‌خانواده است (bg سفید، rounded-lg، border روشن).
function Faq({ items = [] }) {
  if (!items.length) return null;

  return (
    <section className="mt-[48px]">
      <h2 className="text-[#3B3B3B] text-[16px] sm:text-[19px] md:text-[22px] lg:text-[24px] font-bold mb-[24px]">
        سوالات متداول
      </h2>
      <div className="flex flex-col gap-[16px]">
        {items.map((item) => (
          <details
            key={item.question}
            className="p-4 rounded-lg bg-[#FFF] border border-[#EFEFEF]"
          >
            <summary className="text-[#3B3B3B] text-[16px] font-bold cursor-pointer">
              {item.question}
            </summary>
            <p className="text-[#525252] text-[14px] md:text-[16px] font-normal mt-[12px] leading-8">
              {item.answer}
            </p>
          </details>
        ))}
      </div>
    </section>
  );
}

export default Faq;