import type { LucideIcon } from "lucide-react";
import { Clock, Heart, Home, Wallet } from "lucide-react";

import { cn } from "@/lib/utils";

interface FaqItem {
  icon: LucideIcon;
  heading: string;
  description: string;
}

interface Faq15Props {
  title?: string;
  items?: FaqItem[];
  className?: string;
}

const defaultItems: FaqItem[] = [
  {
    icon: Heart,
    heading: "سرنخ‌ها دیگر گم نمی‌شوند",
    description:
      "هر ورودی از فرم و تبلیغ در یک قیف ثبت می‌شود تا پیگیری‌ها شفاف بماند و فرصت فروش از دست نرود.",
  },
  {
    icon: Wallet,
    heading: "هزینه جذب قابل اندازه‌گیری",
    description:
      "هزینه هر کانال را کنار تبدیل ببینید و بودجه را روی مسیرهایی بگذارید که واقعاً درآمد می‌سازند.",
  },
  {
    icon: Clock,
    heading: "پیگیری بدون کار دستی تکراری",
    description:
      "یادآور تماس و ایمیل خودکار زمان تیم را آزاد می‌کند تا روی مذاکره متمرکز بمانند، نه روی صفحه‌گسترده.",
  },
  {
    icon: Home,
    heading: "گزارش یکسان برای کل سازمان",
    description:
      "مدیران و کارشناسان یک منبع حقیقت دارند؛ پیش‌بینی فروش و عملکرد تیم بدون نسخه پراکنده Excel.",
  },
];

const Faq15 = ({
  title = "چرا تیم‌های فروش سراغ CRM یکپارچه می‌روند؟",
  items = defaultItems,
  className,
}: Faq15Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container mx-auto max-w-3xl">
        <h2 className="text-center text-3xl font-semibold md:text-2xll">
          {title}
        </h2>
        <ul className="mt-12 grid grid-cols-1 gap-8 text-start md:grid-cols-2 md:gap-10">
          {items.map((item, idx) => (
            <li className="flex flex-col gap-2.5" key={idx}>
              <div className="flex items-center gap-2 md:gap-2.5">
                <item.icon className="size-5 shrink-0 md:size-6" />
                <h3 className="font-semibold md:text-lg">{item.heading}</h3>
              </div>
              <p className="text-sm text-muted-foreground md:text-base">
                {item.description}
              </p>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
};

export { Faq15 };