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

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

interface Faq7Props {
  className?: string;
}

const Faq7 = ({ className }: Faq7Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container mx-auto max-w-5xl">
        <div className="grid gap-10 md:grid-cols-2">
          <div className="flex flex-col gap-6 text-start">
            <h2 className="text-xl font-semibold">
              به راهنمایی بیشتری نیاز دارید؟
                                        <br />
              <span className="text-muted-foreground/70">
                تیم ما آماده پاسخ‌گویی به شماست.
                                            </span>
            </h2>
            <p className="text-lg text-muted-foreground md:text-xl">
              اگر پاسخ پرسش خود را پیدا نکردید، با
                                        <a href="#" className="mx-1 whitespace-nowrap underline">
                تیم پشتیبانی
              </a>
              در ارتباط باشید.
                                      </p>
            <Button size="lg" variant="outline" className="w-fit">
              مشاهده همه پرسش‌ها
                                      </Button>
          </div>
          <Accordion type="multiple" className="text-start">
            {faqs.map((faq, index) => (
              <AccordionItem key={index} value={`item-${index}`}>
                <AccordionTrigger className="text-start">
                  {faq.question}
                </AccordionTrigger>
                <AccordionContent>{faq.answer}</AccordionContent>
              </AccordionItem>
            ))}
          </Accordion>
        </div>
      </div>
    </section>
  );
};

export { Faq7 };