reui-blocks/blocks/faq8.tsx

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { cn } from "@/lib/utils";

const faqs = {
  general: [
    {
      question: "این بخش چه کاربردی دارد؟",
      answer:
        "در این بخش پاسخ رایج‌ترین پرسش‌های کاربران درباره خدمات، امکانات و نحوه استفاده از سامانه ارائه شده است.",
    },
    {
      question: "چرا وجود این بخش ضروری است؟",
      answer:
        "کاربران بدون نیاز به ثبت تیکت یا تماس با پشتیبانی می‌توانند پاسخ بسیاری از پرسش‌های خود را در همین بخش پیدا کنند.",
    },
    {
      question: "چگونه یک بخش پرسش‌های متداول مؤثر ایجاد کنیم؟",
      answer:
        "پرسش‌های پرتکرار کاربران را جمع‌آوری کرده و برای هر مورد پاسخی کوتاه، دقیق و کاربردی تهیه کنید.",
    },
    {
      question: "مزیت به‌روزرسانی منظم این بخش چیست؟",
      answer:
        "به‌روزرسانی مداوم این بخش باعث افزایش رضایت کاربران، کاهش درخواست‌های پشتیبانی و دسترسی سریع‌تر به اطلاعات می‌شود.",
    },
    {
      question: "چگونه یک بخش پرسش‌های متداول مؤثر ایجاد کنیم؟",
      answer:
        "پرسش‌های پرتکرار کاربران را جمع‌آوری کرده و برای هر مورد پاسخی کوتاه، دقیق و کاربردی تهیه کنید.",
    },
  ],
  billing: [
    {
      question: "چگونه اطلاعات پرداخت یا صورتحساب را ویرایش کنم؟",
      answer:
        "از بخش «حساب کاربری» و سپس «پرداخت و صورتحساب» می‌توانید اطلاعات مالی خود را ویرایش کنید.",
    },
    {
      question: "چگونه اشتراک خود را لغو یا تغییر دهم؟",
      answer:
        "از طریق تنظیمات اشتراک در حساب کاربری می‌توانید پلن خود را لغو یا تغییر دهید.",
    },
    {
      question: "شرایط بازگشت وجه چگونه است؟",
      answer:
        "در صورت واجد شرایط بودن، می‌توانید طبق قوانین بازگشت وجه، درخواست خود را حداکثر تا ۳۰ روز پس از خرید ثبت کنید.",
    },
    {
      question: "چگونه روش پرداخت را تغییر دهم؟",
      answer:
        "در بخش پرداخت، امکان افزودن، حذف یا ویرایش روش‌های پرداخت در هر زمان وجود دارد.",
    },
  ],
};

interface Faq8Props {
  className?: string;
}

const Faq8 = ({ className }: Faq8Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container mx-auto max-w-5xl">
        <h2 className="mb-8 text-center text-3xl font-semibold md:mb-11 md:text-2xll">
          پرسش‌های متداول
                          </h2>
        <div className="grid gap-4 border-t pt-4 text-start md:grid-cols-3 md:gap-10">
          <h3 className="text-xl font-medium">عمومی</h3>
          <Accordion type="multiple" className="md:col-span-2">
            {faqs.general.map((faq, index) => (
              <AccordionItem key={index} value={`general-${index}`}>
                <AccordionTrigger className="text-start">
                  {faq.question}
                </AccordionTrigger>
                <AccordionContent>{faq.answer}</AccordionContent>
              </AccordionItem>
            ))}
          </Accordion>
        </div>
        <div className="mt-10 grid gap-4 border-t pt-4 text-start md:grid-cols-3 md:gap-10">
          <h3 className="text-xl font-medium">صورتحساب</h3>
          <Accordion type="multiple" className="md:col-span-2">
            {faqs.billing.map((faq, index) => (
              <AccordionItem key={index} value={`billing-${index}`}>
                <AccordionTrigger className="text-start">
                  {faq.question}
                </AccordionTrigger>
                <AccordionContent>{faq.answer}</AccordionContent>
              </AccordionItem>
            ))}
          </Accordion>
        </div>
      </div>
    </section>
  );
};

export { Faq8 };