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

const items = [
  {
    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
    imageAlt: "داشبورد مدیریت ارتباط با مشتری",
    title: "تقسیم خودکار سرنخ",
    description:
      "تاریخچه تماس، قرارداد و تیکت هر مشتری را در یک صفحه ببینید و بدون جستجو تصمیم بگیرید.",
    colSpan: "md:col-span-2",
  },
  {
    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
    imageAlt: "نمای پایپ‌لاین فروش",
    title: "گزارش عملکرد فروش",
    description:
      "وظایف تکراری فروش را خودکار کنید و تمرکز تیم را روی بستن معامله بگذارید.",
    colSpan: "md:col-span-3",
  },
  {
    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
    imageAlt: "پروفایل یکپارچه مشتری",
    title: "مدیریت قرارداد",
    description:
      "بر اساس داده واقعی پایپ‌لاین، درآمد ماه‌های آینده را با اطمینان بیشتر تخمین بزنید.",
    colSpan: "md:col-span-3",
  },
  {
    image: "/block-media/shadcnblocks/block/placeholder-4.svg",
    imageAlt: "داشبورد مدیریت ارتباط با مشتری",
    title: "تاریخچه تعاملات",
    description:
      "پیگیری‌های از قلم افتاده را قبل از سرد شدن سرنخ به‌موقع یادآوری کنید.",
    colSpan: "md:col-span-2",
  },
];

interface Feature37Props {
  className?: string;
}

const Feature37 = ({ className }: Feature37Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="grid grid-cols-1 gap-6 md:grid-cols-5">
          {items.map((item) => (
            <div
              key={item.title}
              className={cn(
                "flex flex-col justify-between rounded-lg bg-accent",
                item.colSpan,
              )}
            >
              <img
                src={item.image}
                alt={item.imageAlt}
                className="aspect-video h-full max-h-72 w-full object-cover"
              />
              <div className="p-6">
                <p className="mb-3 text-lg font-semibold">{item.title}</p>
                <p className="text-muted-foreground">{item.description}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Feature37 };