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:
      "بله. خطاهای ایندکس، سرعت، لینک شکسته و سیگنال Core Web Vitals کنار داده‌های رتبه قرار می‌گیرند.",
  },
  {
    question: "پیشنهاد موضوع محتوا بر چه اساسی است؟",
    answer:
      "بر اساس شکاف پوشش کلمه کلیدی، حجم جستجو و رقابت، موضوعات با بالاترین پتانسیل ترافیک پیشنهاد می‌شود.",
  },
  {
    question: "گزارش را می‌توانم برای مدیر یا مشتری بفرستم؟",
    answer:
      "گزارش زمان‌بندی‌شده با برند شما به‌صورت PDF یا لینک زنده برای ذی‌نفعان ارسال می‌شود.",
  },
  {
    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">پرسش‌های SEO</Badge>
          <h1 className="mt-4 text-xl font-semibold">
            همه چیز درباره رشد ارگانیک
                                </h1>
          <p className="mt-6 font-medium text-muted-foreground">
            پاسخ پرسش‌های رایج تیم‌های SEO درباره رتبه، محتوا و سلامت فنی سایت.
                                </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 };