import { CloudLightning, Compass, Gift, Shield, Star, Zap } from "lucide-react";

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

const features = [
  {
    title: "تحلیل باخت معامله",
    description: "پیشنهادهای حرفه‌ای را در چند دقیقه بسازید و زمان آماده‌سازی را کم کنید.",
    icon: Star,
  },
  {
    title: "هدف‌گذاری تیمی",
    description: "وضعیت هر پیشنهاد را از ارسال تا امضا بدون پیگیری دستی دنبال کنید.",
    icon: Zap,
  },
  {
    title: "اتوماسیون پیگیری",
    description: "دلایل از دست دادن معامله را تحلیل کنید و استراتژی فروش را بهبود دهید.",
    icon: Shield,
  },
  {
    title: "داشبورد مدیر فروش",
    description: "اهداف فردی و تیمی را شفاف تعریف کنید و پیشرفت را لحظه‌ای ببینید.",
    icon: Compass,
  },
  {
    title: "همکاری فروش و بازاریابی",
    description: "سرنخ‌های با بالاترین احتمال تبدیل را در بالای صف کار روزانه قرار دهید.",
    icon: CloudLightning,
  },
  {
    title: "اولویت‌بندی سرنخ",
    description: "پیشنهادهای حرفه‌ای را در چند دقیقه بسازید و زمان آماده‌سازی را کم کنید.",
    icon: Gift,
  },
];

interface Feature68Props {
  className?: string;
}

const Feature68 = ({ className }: Feature68Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("bg-background py-32", className)}>
      <div className="container">
        <div className="flex flex-col gap-4">
          <h2 className="text-xl font-bold tracking-tight md:text-3xl lg:text-xl">
            پیش‌بینی درآمد را دقیق‌تر کنید
          </h2>
          <p className="max-w-prose text-base text-muted-foreground md:text-lg">
            با یادآورهای هوشمند و اولویت‌بندی سرنخ، زمان تیم روی معاملات با احتمال بیشتر صرف می‌شود و چرخه فروش کوتاه‌تر می‌شود.
          </p>
        </div>

        <div className="mt-8 rounded-xl border border-border bg-card/50 px-6 py-8 md:px-10 md:py-12">
          <ul className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
            {features.map((feature) => (
              <li key={feature.title} className="flex items-start gap-3">
                <div className="flex size-10 shrink-0 items-center justify-center rounded-sm bg-primary/10 p-2">
                  <feature.icon className="size-5" />
                </div>
                <div>
                  <p className="font-medium">{feature.title}</p>
                  <p className="text-sm text-muted-foreground">
                    {feature.description}
                  </p>
                </div>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
};

export { Feature68 };