import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

const cards = [
  {
    title: "تحلیل باخت معامله",
    description:
      "سرنخ‌های با بالاترین احتمال تبدیل را در بالای صف کار روزانه قرار دهید.",
    logos: [
      "/block-media/shadcnblocks/block/block-1.svg",
      "/block-media/shadcnblocks/block/block-2.svg",
    ],
  },
  {
    title: "هدف‌گذاری تیمی",
    description:
      "پیشنهادهای حرفه‌ای را در چند دقیقه بسازید و زمان آماده‌سازی را کم کنید.",
    logos: [
      "/block-media/shadcnblocks/block/block-3.svg",
      "/block-media/shadcnblocks/block/block-4.svg",
    ],
  },
  {
    title: "اتوماسیون پیگیری",
    description:
      "وضعیت هر پیشنهاد را از ارسال تا امضا بدون پیگیری دستی دنبال کنید.",
    logos: [
      "/block-media/shadcnblocks/block/block-5.svg",
      "/block-media/shadcnblocks/block/block-6.svg",
    ],
  },
  {
    title: "داشبورد مدیر فروش",
    description:
      "دلایل از دست دادن معامله را تحلیل کنید و استراتژی فروش را بهبود دهید.",
    logos: [
      "/block-media/shadcnblocks/block/block-1.svg",
      "/block-media/shadcnblocks/block/block-2.svg",
    ],
  },
];

interface Feature94Props {
  className?: string;
}

const Feature94 = ({ className }: Feature94Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="mx-auto max-w-7xl">
          <div className="flex flex-col items-center justify-between gap-y-4 md:flex-row">
            <h2 className="text-center text-xl font-bold md:text-start md:text-xl">
              پیش‌بینی درآمد را دقیق‌تر کنید
              <br /> هر فرصت فروش را از دست ندهید
            </h2>
            <Button variant="outline" size="lg">
              عملکرد فروش را لحظه‌ای بسنجید
            </Button>
          </div>
          <div className="mt-16 grid gap-6 md:mt-24 md:grid-cols-2 lg:grid-cols-4">
            {cards.map((card) => (
              <div
                key={card.title}
                className="rounded-xl border bg-muted p-6"
              >
                <div className="mb-6 flex gap-4">
                  {card.logos.map((logo, index) => (
                    <img
                      key={`${card.title}-${index}`}
                      src={logo}
                      alt={`لوگوی یکپارچه‌سازی ${card.title}`}
                      className="h-auto w-16"
                    />
                  ))}
                </div>
                <h4 className="mb-4 text-xl font-semibold md:text-xl">
                  {card.title}
                </h4>
                <p className="text-lg text-muted-foreground">
                  {card.description}
                </p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export { Feature94 };