import {
  Code,
  Infinity as InfinityIcon,
  Lock,
  MessageCircle,
  Text,
  Upload,
} from "lucide-react";

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

const features = [
  {
    title: "همکاری فروش و بازاریابی",
    description:
      "سرنخ‌های با بالاترین احتمال تبدیل را در بالای صف کار روزانه قرار دهید.",
    icon: <Lock className="size-5" />,
  },
  {
    title: "اولویت‌بندی سرنخ",
    description:
      "پیشنهادهای حرفه‌ای را در چند دقیقه بسازید و زمان آماده‌سازی را کم کنید.",
    icon: <MessageCircle className="size-5" />,
  },
  {
    title: "قالب پیشنهاد فروش",
    description:
      "وضعیت هر پیشنهاد را از ارسال تا امضا بدون پیگیری دستی دنبال کنید.",
    icon: <InfinityIcon className="size-5" />,
  },
  {
    title: "ردیابی کووت",
    description:
      "دلایل از دست دادن معامله را تحلیل کنید و استراتژی فروش را بهبود دهید.",
    icon: <Text className="size-5" />,
  },
  {
    title: "تحلیل باخت معامله",
    description:
      "اهداف فردی و تیمی را شفاف تعریف کنید و پیشرفت را لحظه‌ای ببینید.",
    icon: <Code className="size-5" />,
  },
  {
    title: "هدف‌گذاری تیمی",
    description:
      "سرنخ‌های با بالاترین احتمال تبدیل را در بالای صف کار روزانه قرار دهید.",
    icon: <Upload className="size-5" />,
  },
];

interface Feature26Props {
  className?: string;
}

const Feature26 = ({ className }: Feature26Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <Badge className="mb-6" variant="outline">
          تیم فروش
        </Badge>
        <h2 className="text-3xl font-medium">
          پیش‌بینی درآمد را دقیق‌تر کنید
        </h2>
        <Separator className="my-16" />
        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
          {features.map((feature, idx) => (
            <div key={idx} className="flex gap-3">
              <span className="flex size-11 shrink-0 items-center justify-center rounded-full bg-accent">
                {feature.icon}
              </span>
              <div>
                <h3 className="text-lg font-medium">{feature.title}</h3>
                <p className="leading-7 text-muted-foreground">
                  {feature.description}
                </p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Feature26 };