import { Check } from "lucide-react";

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

const sections = [
  {
    title: "پروفایل ۳۶۰ درجه مشتری",
    items: [
      "ثبت خودکار فعالیت‌های فروش",
      "امتیازدهی هوشمند سرنخ",
      "گزارش عملکرد هر نماینده",
      "همگام‌سازی با ایمیل و تقویم",
      "ردیابی مرحله هر معامله",
      "هشدار معاملات در معرض ریسک",
      "ثبت خودکار فعالیت‌های فروش",
      "امتیازدهی هوشمند سرنخ",
      "گزارش عملکرد هر نماینده",
    ],
  },
  {
    title: "اتوماسیون مراحل فروش",
    items: [
      "همگام‌سازی با ایمیل و تقویم",
      "ردیابی مرحله هر معامله",
      "هشدار معاملات در معرض ریسک",
      "ثبت خودکار فعالیت‌های فروش",
      "امتیازدهی هوشمند سرنخ",
      "گزارش عملکرد هر نماینده",
      "همگام‌سازی با ایمیل و تقویم",
      "ردیابی مرحله هر معامله",
      "هشدار معاملات در معرض ریسک",
    ],
  },
  {
    title: "پیش‌بینی درآمد",
    items: [
      "ثبت خودکار فعالیت‌های فروش",
      "امتیازدهی هوشمند سرنخ",
      "گزارش عملکرد هر نماینده",
      "همگام‌سازی با ایمیل و تقویم",
      "ردیابی مرحله هر معامله",
      "هشدار معاملات در معرض ریسک",
      "ثبت خودکار فعالیت‌های فروش",
      "امتیازدهی هوشمند سرنخ",
      "گزارش عملکرد هر نماینده",
    ],
  },
];

interface Feature25Props {
  className?: string;
}

const Feature25 = ({ className }: Feature25Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="mx-auto flex max-w-3xl flex-col items-center gap-6">
          <Badge variant="outline">هر سرنخ را تا قرارداد دنبال کنید</Badge>
          <h2 className="mb-2 text-center text-3xl font-semibold lg:text-xl">
            فروش تیم‌تان را یکجا مدیریت کنید
          </h2>
          <p className="text-center text-muted-foreground lg:text-lg">
            تمام تعاملات، سرنخ‌ها و قراردادها در یک فضای کاری متمرکز جمع می‌شود. تیم فروش بدون جابجایی بین ابزارها، سریع‌تر پیش‌بینی می‌کند و معاملات بیشتری می‌بندد.
          </p>
        </div>
        <div className="flex flex-col items-center justify-center">
          {sections.map((section, idx) => (
            <div key={idx} className="w-full max-w-96 lg:max-w-none">
              <Separator className="my-16 w-full" />
              <div className="mx-auto inline-block w-full gap-x-10 lg:grid lg:grid-cols-4">
                <h3 className="mb-4 text-xl font-semibold lg:text-3xl">
                  {section.title}
                </h3>
                <ul className="col-span-3 grid gap-x-10 gap-y-4 lg:grid-cols-3">
                  {section.items.map((item, itemIdx) => (
                    <li
                      key={itemIdx}
                      className="flex items-center gap-2 text-muted-foreground"
                    >
                      <Check className="size-4 shrink-0" />
                      {item}
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Feature25 };