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 };