import { BarChart, Check, Shield, Zap } from "lucide-react";

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

const FEATURES = [
  {
    id: "cloud-storage",
    title: "تحلیل باخت معامله",
    icon: Zap,
    iconColor: "text-purple-400/90",
    bgGradient: "from-purple-500",
    items: [
      "یادآور پیگیری خودکار",
      "پیش‌بینی درآمد ماهانه",
      "مقایسه عملکرد نمایندگان",
    ],
  },
  {
    id: "performance-scaling",
    title: "هدف‌گذاری تیمی",
    icon: BarChart,
    iconColor: "text-teal-400/90",
    bgGradient: "from-teal-500",
    items: [
      "ثبت دلیل باخت معامله",
      "قالب ایمیل فروش آماده",
      "گزارش نرخ تبدیل هر مرحله",
    ],
  },
  {
    id: "security-protection",
    title: "اتوماسیون پیگیری",
    icon: Shield,
    iconColor: "text-red-400/90",
    bgGradient: "from-red-500",
    items: [
      "گزارش نرخ تبدیل هر مرحله",
      "یادآور پیگیری خودکار",
      "پیش‌بینی درآمد ماهانه",
    ],
  },
];

interface Feature200Props {
  className?: string;
}

const Feature200 = ({ className }: Feature200Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="mx-auto mt-8 grid max-w-5xl grid-cols-1 gap-2 lg:grid-cols-3">
          {FEATURES.map((feature) => {
            const Icon = feature.icon;

            return (
              <div
                key={feature.id}
                className={cn(
                  "relative h-full overflow-hidden rounded-xl bg-radial-[at_80%_14%] from-[-50%] via-zinc-950 via-75% to-zinc-950 p-6",
                  feature.bgGradient,
                )}
              >
                <div className="absolute inset-0 h-full w-full bg-[radial-gradient(white_1px,transparent_1px)] [mask-image:radial-gradient(ellipse_at_80%_14%,#000,transparent_40%)] [background-size:3px_3px] opacity-35" />
                <div
                  className={cn(
                    "relative grid size-11 place-items-center rounded-full bg-gradient-to-b via-transparent p-[2px]",
                    `${feature.bgGradient}/50`,
                    `to-${feature.bgGradient.split("-")[1]}/50`,
                  )}
                >
                  <div
                    className={cn(
                      "grid size-full place-items-center rounded-full bg-zinc-950 bg-gradient-to-b via-transparent",
                      `${feature.bgGradient}/30`,
                      `to-${feature.bgGradient.split("-")[1]}/30`,
                    )}
                  >
                    <Icon className={feature.iconColor} />
                  </div>
                </div>
                <h3 className="relative mt-10 text-lg font-semibold text-background dark:text-primary">
                  {feature.title}
                </h3>
                <ul className="relative mt-4 space-y-3.5 text-sm text-background/70 dark:text-primary/70">
                  {feature.items.map((item) => (
                    <li key={item} className="flex items-center gap-2 text-start">
                      <Check className="mt-0.5 size-4 shrink-0" />
                      <span className="text-pretty">{item}</span>
                    </li>
                  ))}
                </ul>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};

export { Feature200 };