import { Infinity as InfinityIcon, MessagesSquare, Target } from "lucide-react";

import { Avatar, AvatarImage } from "@/components/ui/avatar";
import { cn } from "@/lib/utils";

const avatars = [
  {
    src: "/block-media/shadcnblocks/block/avatar-1.webp",
    alt: "داشبورد مدیریت ارتباط با مشتری",
    className: "size-16",
  },
  {
    src: "/block-media/shadcnblocks/block/avatar-6.webp",
    alt: "نمای پایپ‌لاین فروش",
    className: "size-24",
  },
  {
    src: "/block-media/shadcnblocks/block/avatar-3.webp",
    alt: "پروفایل یکپارچه مشتری",
    className: "size-16",
  },
];

const features = [
  {
    title: "تقسیم خودکار سرنخ",
    description:
      "تاریخچه تماس، قرارداد و تیکت هر مشتری را در یک صفحه ببینید و بدون جستجو تصمیم بگیرید.",
    icon: MessagesSquare,
  },
  {
    title: "گزارش عملکرد فروش",
    description:
      "وظایف تکراری فروش را خودکار کنید و تمرکز تیم را روی بستن معامله بگذارید.",
    icon: Target,
  },
  {
    title: "مدیریت قرارداد",
    description:
      "بر اساس داده واقعی پایپ‌لاین، درآمد ماه‌های آینده را با اطمینان بیشتر تخمین بزنید.",
    icon: InfinityIcon,
  },
];

interface Feature93Props {
  className?: string;
}

const Feature93 = ({ className }: Feature93Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="text-center">
          <span className="flex items-end justify-center">
            {avatars.map((avatar, index) => (
              <Avatar
                key={avatar.src}
                className={cn(
                  "border",
                  avatar.className,
                  index > 0 && "-ms-4",
                )}
              >
                <AvatarImage src={avatar.src} alt={avatar.alt} />
              </Avatar>
            ))}
          </span>
          <h2 className="mt-12 text-xl font-bold lg:text-2xll">
            هر سرنخ را تا قرارداد دنبال کنید
          </h2>
          <div className="mt-20 grid justify-center gap-16 lg:grid-cols-3">
            {features.map((feature) => (
              <div key={feature.title} className="max-w-md">
                <feature.icon
                  className="mx-auto mb-6 size-12"
                  strokeWidth={1.5}
                />
                <h3 className="mb-4 text-xl font-medium lg:text-xl">
                  {feature.title}
                </h3>
                <p className="text-muted-foreground">{feature.description}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export { Feature93 };