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

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

interface Faq3Props {
  heading: string;
  description: string;
  items?: FaqItem[];
  supportHeading: string;
  supportDescription: string;
  supportButtonText: string;
  supportButtonUrl: string;
  className?: string;
}

const faqItems = [
  {
    id: "faq-1",
    question: "داشبورد تحلیل کدام شاخص‌ها را نشان می‌دهد؟",
    answer:
      "ترافیک، تبدیل، درآمد و قیف کاربر را در یک نما می‌بینید؛ فیلتر بازه و بخش مخاطب هم آماده است.",
  },
  {
    id: "faq-2",
    question: "گزارش را می‌توانم با تیم به اشتراک بگذارم؟",
    answer:
      "لینک فقط‌خواندنی یا ارسال زمان‌بندی‌شده PDF و ایمیل برای مدیران و ذی‌نفعان در دسترس است.",
  },
  {
    id: "faq-3",
    question: "داده‌ها با چه تأخیری به‌روز می‌شوند؟",
    answer:
      "بیشتر رویدادها نزدیک به لحظه ثبت می‌شوند؛ گزارش‌های تجمیعی معمولاً ظرف چند دقیقه کامل می‌گردند.",
  },
  {
    id: "faq-4",
    question: "رویداد سفارشی تعریف می‌شود؟",
    answer:
      "رویدادهای محصول، فرم و پرداخت را با نام خودتان بسازید و در قیف و کوهورت استفاده کنید.",
  },
  {
    id: "faq-5",
    question: "محدودیت تعداد داشبورد داریم؟",
    answer:
      "در پلن‌های تیمی داشبورد نامحدود است؛ در پلن پایه سقف مشخصی برای ویجت‌ها اعمال می‌شود.",
  },
  {
    id: "faq-6",
    question: "خروجی داده را چطور بگیرم؟",
    answer:
      "CSV، اتصال انبار داده و Webhook برای همگام‌سازی با ابزار BI شما آماده است.",
  },
  {
    id: "faq-7",
    question: "راه‌اندازی اولیه چقدر زمان می‌برد؟",
    answer:
      "با یک قطعه کد یا SDK، معمولاً در کمتر از یک ساعت اولین رویدادها را در داشبورد می‌بینید.",
  },
];

const Faq3 = ({
  heading = "پرسش‌های تحلیل محصول",
  description = "پاسخ پرسش‌های رایج درباره داشبورد، رویداد و گزارش. اگر چیزی پیدا نکردید، با پشتیبانی در ارتباط باشید.",
  items = faqItems,
  className,
}: Faq3Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container mx-auto max-w-3xl space-y-16">
        <div className="flex flex-col text-center">
          <h2 className="mb-3 text-3xl font-semibold md:mb-4 lg:mb-6 lg:text-xl">
            {heading}
          </h2>
          <p className="text-muted-foreground lg:text-lg">{description}</p>
        </div>
        <Accordion
          type="single"
          collapsible
          className="w-full text-start"
        >
          {items.map((item) => (
            <AccordionItem key={item.id} value={item.id}>
              <AccordionTrigger className="transition-opacity duration-200 hover:no-underline hover:opacity-60">
                <div className="font-medium sm:py-1 lg:py-2 lg:text-lg">
                  {item.question}
                </div>
              </AccordionTrigger>
              <AccordionContent className="sm:mb-1 lg:mb-2">
                <div className="text-muted-foreground lg:text-lg">
                  {item.answer}
                </div>
              </AccordionContent>
            </AccordionItem>
          ))}
        </Accordion>
      </div>
    </section>
  );
};

export { Faq3 };