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

const formatNumber = (value: number) => value.toLocaleString("fa-IR");

interface Stats19Props {
  className?: string;
}

const Stats19 = ({ className }: Stats19Props) => {
  const stats = [
    {
      number: `${formatNumber(80)} هزار+`,
      description:
        "کاربر فعال روی پلتفرم سامانه مدیریت ارتباط با مشتری؛ از جذب سرنخ تا بستن معامله و نگه‌داشت حساب.",
    },
    {
      number: `${formatNumber(20)}+`,
      description:
        "تیم فروش سازمانی که پایپ‌لاین، پیش‌بینی درآمد و گزارش KPI را متمرکز کرده‌اند.",
    },
    {
      number: `${formatNumber(95)}٪`,
      description:
        "نرخ رضایت مشتری از پشتیبانی، شفافیت داده و پایداری سرویس در قراردادهای بلندمدت.",
    },
    {
      number: `${formatNumber(150)}+`,
      description:
        "پیاده‌سازی موفق سامانه مدیریت ارتباط با مشتری در صنایع مختلف؛ پیکربندی گردش‌کار متناسب با مدل فروش هر تیم.",
    },
    {
      number: `${formatNumber(5)} سال`,
      description:
        "تجربه متمرکز روی آنالیتیکس فروش و مقیاس‌پذیری پلتفرم برای تیم‌های در حال رشد.",
    },
    {
      number: `${formatNumber(24)}/${formatNumber(7)}`,
      description:
        "پشتیبانی شبانه‌روزی برای پایداری سرویس، رفع حوادث و تداوم عملیات فروش.",
    },
  ];

  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="grid grid-cols-1 gap-20 lg:grid-cols-6">
          <div className="top-10 col-span-2 flex h-fit w-fit items-center gap-3 py-8 lg:sticky">
            <span className="size-3 bg-orange-500" />
            <p className="text-xl text-foreground/30">نتایج مشتریان</p>
          </div>
          <ul className="col-span-4 w-full">
            {stats.map((stat, index) => (
              <li key={index} className="grid grid-cols-5 border-b py-8">
                <h3 className="col-span-2 text-xl font-medium">
                  {stat.number}
                </h3>
                <p className="col-span-3">{stat.description}</p>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
};

export { Stats19 };