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