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

const steps = [
  {
    title: "تقسیم خودکار سرنخ",
    description:
      "تاریخچه تماس، قرارداد و تیکت هر مشتری را در یک صفحه ببینید و بدون جستجو تصمیم بگیرید.",
  },
  {
    title: "گزارش عملکرد فروش",
    description:
      "وظایف تکراری فروش را خودکار کنید و تمرکز تیم را روی بستن معامله بگذارید.",
  },
  {
    title: "مدیریت قرارداد",
    description: "بر اساس داده واقعی پایپ‌لاین، درآمد ماه‌های آینده را با اطمینان بیشتر تخمین بزنید.",
  },
];

interface Feature119Props {
  className?: string;
}

const Feature119 = ({ className }: Feature119Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="flex flex-col items-center gap-12">
          <div className="flex flex-col items-center gap-2.5">
            <Badge variant="outline">مدیریت فروش</Badge>
            <h2 className="text-center text-xl md:text-2xll">هر سرنخ را تا قرارداد دنبال کنید</h2>
          </div>
          <div className="grid gap-7 md:grid-cols-2 md:gap-12 lg:grid-cols-3">
            {steps.map((step, index) => (
              <div key={step.title} className="flex gap-4">
                <span className="text-md flex size-11 shrink-0 items-center justify-center rounded-full bg-muted font-mono">
                  {(index + 1).toLocaleString("fa-IR", {
                    minimumIntegerDigits: 2,
                  })}
                </span>
                <div className="flex flex-col gap-1 text-start">
                  <h3 className="text-xl font-semibold">{step.title}</h3>
                  <p className="text-muted-foreground">{step.description}</p>
                </div>
              </div>
            ))}
          </div>
          <img
            src="/block-media/shadcnblocks/block/placeholder-8-wide.svg"
            alt="داشبورد مدیریت ارتباط با مشتری"
            className="aspect-video w-full rounded-xl object-cover"
          />
        </div>
      </div>
    </section>
  );
};

export { Feature119 };