import { ArrowDown, ArrowUp, Infinity as InfinityIcon } from "lucide-react";

import { Card } from "@/components/ui/card";
import { cn } from "@/lib/utils";

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

interface Stats2Props {
  className?: string;
}

const Stats2 = ({ className }: Stats2Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <h1 className="text-center text-xl font-semibold lg:text-2xll">
          عملکرد فروش در یک نگاه
        </h1>
        <div className="grid gap-6 pt-9 text-center md:grid-cols-3 lg:pt-20">
          <Card className="border-none bg-accent p-8 lg:p-10">
            <p className="mb-1 flex items-center justify-center text-xl font-semibold lg:text-3xl">
              <ArrowUp className="ms-1 h-8 text-green-400" />
              {formatNumber(20000)}
            </p>
            <p className="text-muted-foreground">
              سرنخ واجد شرایط اضافه‌شده به پایپ‌لاین در ماه جاری.
            </p>
          </Card>
          <Card className="border-none bg-accent p-8 lg:p-10">
            <p className="mb-1 flex items-center justify-center text-xl font-semibold lg:text-3xl">
              <ArrowUp className="ms-1 h-8 text-green-400" />
              {formatNumber(20)}+
            </p>
            <p className="text-muted-foreground">
              اتصال آماده به ابزارهای فروش، ایمیل و پشتیبانی.
            </p>
          </Card>
          <Card className="border-none bg-accent p-8 lg:p-10">
            <p className="mb-1 flex items-center justify-center text-xl font-semibold lg:text-3xl">
              <ArrowDown className="ms-1 h-8 text-red-400" />
              {formatNumber(50)}٪
            </p>
            <p className="text-muted-foreground">
              کاهش میانگین زمان بستن معامله در تیم‌های فروش.
            </p>
          </Card>
          <Card className="border-none bg-accent p-8 lg:p-10">
            <p className="mb-1 flex items-center justify-center text-xl font-semibold lg:text-3xl">
              <ArrowUp className="ms-1 h-8 text-green-400" />
              {formatNumber(100)}+
            </p>
            <p className="text-muted-foreground">
              بازار و منطقه فعال برای تیم‌های سازمانی.
            </p>
          </Card>
          <Card className="border-none bg-accent p-8 lg:p-10">
            <p className="mb-1 flex items-center justify-center text-xl font-semibold lg:text-3xl">
              <ArrowUp className="ms-1 h-8 text-green-400" />
              {formatNumber(100)}٪
            </p>
            <p className="text-muted-foreground">
              وضوح داده برای تصمیم‌گیری روزانه مدیران فروش.
            </p>
          </Card>
          <Card className="border-none bg-accent p-8 lg:p-10">
            <p className="mb-1 flex items-center justify-center text-xl font-semibold lg:text-3xl">
              <InfinityIcon className="ms-1 h-8" />
              بی‌نهایت
            </p>
            <p className="text-muted-foreground">
              گزارش‌گیری بدون سقف ردیف، بدون محدودیت زمانی.
            </p>
          </Card>
        </div>
      </div>
    </section>
  );
};

export { Stats2 };