import { MessageCircleQuestion } from "lucide-react";

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

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

interface Faq10Props {
  className?: string;
}

const Faq10 = ({ className }: Faq10Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="border-y">
        <div className="container mx-auto flex max-w-3xl flex-col gap-6 border-x py-4 text-center max-lg:border-x lg:py-8">
          <Badge
            variant="outline"
            className="mx-auto w-fit gap-1 bg-card px-3 text-sm font-normal tracking-tight shadow-sm"
          >
            <MessageCircleQuestion className="size-4" />

            <span>پرسش‌های متداول</span>
          </Badge>
          <h2 className="text-3xl leading-tight tracking-tight md:text-xl lg:text-2xll">
            هر آنچه باید بدانید
          </h2>
          <p className="mx-auto max-w-[600px] tracking-[-0.32px] text-muted-foreground">
            به دنبال پاسخ سریع هستید؟{" "}
            <span className="underline">بخش پرسش‌های متداول</span> را مطالعه کنید.
                                </p>
        </div>
      </div>

      <div className="container mx-auto max-w-3xl">
        <div className="pt-8 pb-4 md:pb-8 lg:pt-[3.75rem] lg:pb-[50px]">
          <Accordion type="single" collapsible className="space-y-4 text-start">
            {DATA.map((item, index) => (
              <AccordionItem
                key={index}
                value={`item-${index}`}
                className="rounded-[7px] border px-6 text-primary data-[state=open]:pb-2"
              >
                <AccordionTrigger className="py-5 text-start text-base tracking-[-0.32px]">
                  {item.question}
                </AccordionTrigger>
                <AccordionContent className="text-base tracking-[-0.32px] text-muted-foreground">
                  {item.answer}
                </AccordionContent>
              </AccordionItem>
            ))}
          </Accordion>
        </div>
      </div>
      <div className="h-8 w-full border-y md:h-12 lg:h-[112px]">
        <div className="container mx-auto h-full max-w-3xl border-x"></div>
      </div>
    </section>
  );
};

export { Faq10 };