import { ArrowRight, GitCompare } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";

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

function IntegrationCard({
  title,
  description,
  image,
}: {
  title: string;
  description: string;
  image: string;
}) {
  return (
    <a
      href="#"
      className="flex flex-col gap-4 rounded-xl border p-6 transition-colors duration-300 hover:bg-muted/60"
    >
      <div className="flex items-center justify-between">
        <span className="grid size-12 shrink-0 place-content-center rounded-md border">
          <img
            src={image}
            alt={`لوگوی ${title}`}
            className="h-auto w-7"
          />
        </span>
        <span className="flex items-center gap-1 rounded-full border px-3 py-2.5 text-sm">
          هر سرنخ را تا قرارداد دنبال کنید
          <ArrowRight className="h-auto w-4 shrink-0 transition-all rtl:rotate-180" />
        </span>
      </div>
      <div>
        <h3 className="font-medium md:text-lg">{title}</h3>
        <p className="text-sm text-muted-foreground md:text-base">
          {description}
        </p>
      </div>
    </a>
  );
}

interface Feature107Props {
  className?: string;
}

const Feature107 = ({ className }: Feature107Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
          <div className="mx-auto flex flex-col gap-4 md:col-span-2">
            <Badge
              variant="outline"
              className="flex w-fit gap-1 px-2.5 py-1.5 text-sm"
            >
              <GitCompare className="h-auto w-4" />
              فروش تیم‌تان را یکجا مدیریت کنید
            </Badge>
            <h2 className="text-3xl font-semibold lg:text-xl">
              روابط مشتری را در یک نگاه ببینید
            </h2>
            <p className="text-muted-foreground">
              پایپ‌لاین فروش را شفاف کنید
            </p>
          </div>
          {integrations.map((integration) => (
            <IntegrationCard key={integration.title} {...integration} />
          ))}
        </div>
      </div>
    </section>
  );
};

export { Feature107 };