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

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

interface Faq11Props {
  className?: string;
}

const Faq11 = ({ className }: Faq11Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn(
        "relative mx-2.5 mt-2.5 rounded-t-2xl rounded-b-[36px] bg-linear-to-b from-background via-background to-slate-100 lg:mx-4 dark:to-slate-900",
        className,
      )}
    >
      <section className="py-32">
        <div className="container mx-auto grid max-w-5xl gap-16 lg:grid-cols-2">
          <div className="space-y-4 text-start">
            <h2 className="text-xl font-semibold tracking-tight md:text-xl lg:text-2xll">
              سوالی دارید؟
            </h2>

            <p className="max-w-md leading-snug font-medium text-muted-foreground">
              اگر پاسخ مورد نظرتان را پیدا نکردید،{" "}
              <a href="#" className="underline underline-offset-4">
                تماس بگیرید
              </a>
              .
            </p>
          </div>

          <div className="grid gap-6 text-start">
            {categories.map((category, categoryIndex) => (
              <div key={category.title} className="">
                <h3 className="border-b py-4 font-medium text-muted-foreground">
                  {category.title}
                </h3>
                <Accordion type="single" collapsible className="w-full">
                  {category.questions.map((item, i) => (
                    <AccordionItem key={i} value={`${categoryIndex}-${i}`}>
                      <AccordionTrigger className="text-start">
                        {item.question}
                      </AccordionTrigger>
                      <AccordionContent className="text-muted-foreground">
                        {item.answer}
                      </AccordionContent>
                    </AccordionItem>
                  ))}
                </Accordion>
              </div>
            ))}
          </div>
        </div>
      </section>
    </section>
  );
};

export { Faq11 };