import { ChevronRight } from "lucide-react";

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

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

interface Faq4Props {
  className?: string;
}

const Faq4 = ({ className }: Faq4Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container mx-auto max-w-3xl">
        <div className="text-center">
          <Badge className="text-xs font-medium">پرسش‌های متداول</Badge>
          <h1 className="mt-4 text-xl font-semibold">
            پاسخ پرسش‌های پرتکرار
                                </h1>
          <p className="mt-6 font-medium text-muted-foreground">
            پاسخ متداول‌ترین پرسش‌های کاربران درباره امکانات، خدمات و نحوه استفاده از پلتفرم را در این بخش مشاهده کنید.
                                </p>
        </div>
        <div className="mt-12">
          <Accordion type="single" collapsible className="text-start">
            {faqs.map((faq, index) => (
              <AccordionItem
                key={index}
                value={`item-${index}`}
                className="border-b-0"
              >
                <AccordionTrigger className="hover:text-foreground/60 hover:no-underline">
                  {faq.question}
                </AccordionTrigger>
                <AccordionContent>{faq.answer}</AccordionContent>
              </AccordionItem>
            ))}
          </Accordion>
        </div>
        <Separator className="my-12" />
        <div className="flex flex-col justify-between gap-12 text-start md:flex-row md:items-end">
          <div className="lg:col-span-2">
            <h1 className="mt-4 text-xl font-semibold">پاسخ خود را پیدا نکردید؟</h1>
            <p className="mt-6 font-medium text-muted-foreground">
              کارشناسان ما آماده‌اند تا به پرسش‌های شما پاسخ دهند و در انتخاب بهترین راهکار همراهتان باشند.
                                      </p>
          </div>
          <div className="flex md:justify-end">
            <a href="#" className="flex items-center gap-2 hover:underline">
              ارتباط با تیم پشتیبانی
                                        <ChevronRight className="h-auto w-4 rtl:rotate-180" />
            </a>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Faq4 };