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

interface FaqItem {
  id: string;
  question: string;
  answer: string;
  className?: string;
}

interface Faq1Props {
  heading?: string;
  items?: FaqItem[];
  className?: string;
}

const Faq1 = ({
  heading = "پرسش‌های رایج CRM",
  items = [
    {
      id: "faq-1",
      question: "چطور قیف فروش را برای کل تیم یکسان کنم؟",
      answer:
        "مراحل و شروط پیگیری را یک‌بار تعریف کنید؛ هر تغییر بلافاصله در کارت‌ها و داشبورد همه اعضا دیده می‌شود.",
    },
    {
      id: "faq-2",
      question: "آیا پیگیری سرنخ‌ها خودکار می‌شود؟",
      answer:
        "بله. یادآور تماس، ایمیل و ارجاع به مسئول فروش با قوانین اتوماسیون زمان‌بندی می‌شود تا هیچ سرنخی جا نماند.",
    },
    {
      id: "faq-3",
      question: "داده‌های مشتریان چقدر محافظت می‌شوند؟",
      answer:
        "دسترسی نقش‌محور است، داده‌ها رمزنگاری می‌شوند و ورودها در گزارش فعالیت ثبت می‌گردند.",
    },
    {
      id: "faq-4",
      question: "نرخ تبدیل هر مرحله را از کجا ببینم؟",
      answer:
        "در داشبورد فروش، تبدیل، زمان ماندگاری و عملکرد هر عضو تیم به‌صورت لحظه‌ای نمایش داده می‌شود.",
    },
    {
      id: "faq-5",
      question: "با ایمیل و پیام‌رسان تیم یکپارچه می‌شود؟",
      answer:
        "اتصالات آماده برای ایمیل، تقویم و پیام‌رسان تیمی دارید؛ برای نیاز سفارشی هم API در دسترس است.",
    },
    {
      id: "faq-6",
      question: "انتقال مخاطبین قبلی چقدر طول می‌کشد؟",
      answer:
        "بیشتر تیم‌ها ظرف یکی دو روز مخاطبین و تاریخچه معاملات را وارد می‌کنند؛ برای نگاشت فیلدها همراهتان هستیم.",
    },
    {
      id: "faq-7",
      question: "پلن رایگان چه امکاناتی دارد؟",
      answer:
        "تا سه کاربر، مدیریت سرنخ پایه و گزارش‌های اصلی رایگان است. اتوماسیون پیشرفته با ارتقا فعال می‌شود.",
    },
  ],
  className,
}: Faq1Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container mx-auto max-w-3xl">
        <h1 className="mb-4 text-center text-3xl font-semibold md:mb-11 md:text-xl">
          {heading}
        </h1>
        <Accordion type="single" collapsible className="w-full text-start">
          {items.map((item, index) => (
            <AccordionItem key={index} value={`item-${index}`}>
              <AccordionTrigger className="font-semibold hover:no-underline">
                {item.question}
              </AccordionTrigger>
              <AccordionContent className="text-muted-foreground">
                {item.answer}
              </AccordionContent>
            </AccordionItem>
          ))}
        </Accordion>
      </div>
    </section>
  );
};

export { Faq1 };