import {
  Blocks,
  ChevronRight,
  Infinity as InfinityIcon,
  Laptop,
  ListEnd,
  Zap,
  ZoomIn,
} from "lucide-react";

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

const features = [
  {
    title: "تاریخچه مشتری",
    description:
      "پاسخ‌های پرتکرار را ذخیره کنید و با یک کلیک ارسال کنید.",
    icon: <ZoomIn className="size-6" />,
    link: "#",
  },
  {
    title: "صندوق یکپارچه",
    description:
      "همه کانال‌های ارتباطی را در یک محیط مدیریت کنید و هیچ پیامی گم نشود.",
    icon: <Blocks className="size-6" />,
    link: "#",
  },
  {
    title: "اولویت‌بندی تیکت",
    description:
      "تیکت‌های مهم بر اساس قرارداد یا شدت مسئله در صف بالاتر قرار می‌گیرند.",
    icon: <Laptop className="size-6" />,
    link: "#",
  },
  {
    title: "پایگاه دانش",
    description:
      "مشتریان و تیم با مقالات راهنما سریع‌تر به پاسخ می‌رسند.",
    icon: <ListEnd className="size-6" />,
    link: "#",
  },
  {
    title: "پاسخ آماده",
    description:
      "پاسخ‌های پرتکرار را ذخیره کنید و با یک کلیک ارسال کنید.",
    icon: <Zap className="size-6" />,
    link: "#",
  },
  {
    title: "SLA هوشمند",
    description:
      "همه کانال‌های ارتباطی را در یک محیط مدیریت کنید و هیچ پیامی گم نشود.",
    icon: <InfinityIcon className="size-6" />,
    link: "#",
  },
];

interface Feature18Props {
  className?: string;
}

const Feature18 = ({ className }: Feature18Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn(
        "relative py-32 before:absolute before:inset-0 before:bg-primary/10 before:[mask-image:url('/block-media/shadcnblocks/block/patterns/waves.svg')] before:[mask-size:64px_32px] before:[mask-repeat:repeat]",
        className,
      )}
    >
      <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,var(--tw-gradient-stops))] from-transparent to-background"></div>
      <div className="relative container">
        <h2 className="mb-8 max-w-xl text-xl font-semibold text-balance lg:text-xl">
          زمان حل مسئله را کوتاه کنید
        </h2>
        <div className="z-30 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
          {features.map((feature, index) => (
            <div
              key={index}
              className="flex flex-col gap-10 rounded-lg border bg-background p-8"
            >
              <div>
                {feature.icon}
                <h3 className="mt-6 mb-2 font-medium">{feature.title}</h3>
                <p className="text-sm text-muted-foreground">
                  {feature.description}
                </p>
              </div>
              <a
                href={feature.link}
                className="flex items-center gap-2 text-sm font-medium"
              >
                بیشتر بدانید
                <ChevronRight className="size-4 rtl:rotate-180" />
              </a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Feature18 };