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:
        "استارتاپ‌هایی که با راهکارهای نوآورانه و راهنمایی استراتژیک برای رشد و موفقیت در بازارهایشان پشتیبانی شده‌اند.",
    },
    {
      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 };