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

const formatDecimal = (value: number) =>
  new Intl.NumberFormat("fa-IR", {
    minimumFractionDigits: 1,
    maximumFractionDigits: 1,
  }).format(value);

const formatPercent = (value: number) => `${formatDecimal(value)}٪`;

interface Stats9Props {
  className?: string;
}

const Stats9 = ({ className }: Stats9Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="grid items-center gap-12 lg:grid-cols-2">
          <div className="mx-auto max-w-2xl lg:mx-0 lg:max-w-none">
            <div className="flex flex-col items-center gap-3 text-center lg:items-start lg:text-start">
              <Badge
                variant="outline"
                className="flex w-fit items-center gap-1"
              >
                قابلیت‌ها
              </Badge>
              <h1 className="mb-5 text-xl font-semibold text-pretty">
                فروش را با داده واقعی پایپ‌لاین هدایت کنید
              </h1>
              <p className="text-muted-foreground">
                گردش‌کار سامانه مدیریت ارتباط با مشتری، امتیازدهی سرنخ و گزارش درآمد را در یک داشبورد
                شفاف برای تیم فروش یکپارچه کنید.
              </p>
            </div>
            <div className="mt-12 flex justify-center gap-7 lg:justify-start">
              <div className="flex flex-col gap-1.5">
                <p className="text-xl font-bold text-foreground sm:text-3xl">
                  {formatDecimal(2.5)} میلیون+
                </p>
                <p className="text-muted-foreground">کاربر فعال سامانه مدیریت ارتباط با مشتری</p>
              </div>
              <Separator orientation="vertical" className="h-auto" />
              <div className="flex flex-col gap-1.5">
                <p className="text-xl font-bold text-foreground sm:text-3xl">
                  {formatPercent(99.9)}
                </p>
                <p className="text-muted-foreground">آپ‌تایم پلتفرم</p>
              </div>
              <Separator orientation="vertical" className="h-auto" />
              <div className="flex flex-col gap-1.5">
                <p className="text-xl font-bold text-foreground sm:text-3xl">
                  {formatDecimal(4.8)}
                </p>
                <p className="text-muted-foreground">امتیاز رضایت مشتری</p>
              </div>
            </div>
          </div>
          <div className="grid gap-2.5 text-start sm:grid-cols-2 sm:text-center lg:text-start">
            <div className="flex items-center gap-5 rounded-lg border border-border bg-muted p-6 sm:flex-col sm:items-start sm:p-7">
              <img
                src="/block-media/shadcnblocks/block/block-1.svg"
                alt="لوگوی یکپارچه‌سازی ابری"
                className="mx-0 size-12 sm:mx-auto lg:mx-0"
              />
              <div className="flex flex-col gap-1">
                <p className="text-sm font-semibold text-foreground sm:text-base">
                  یکپارچه‌سازی ابری
                </p>
                <p className="text-sm text-muted-foreground sm:text-base">
                  اتصال امن سامانه مدیریت ارتباط با مشتری به ایمیل، تقویم و ابزارهای فروش
                </p>
              </div>
            </div>
            <div className="flex items-center gap-5 rounded-lg border border-border bg-muted p-6 sm:flex-col sm:items-start sm:p-7">
              <img
                src="/block-media/shadcnblocks/block/block-2.svg"
                alt="لوگوی پایش ۲۴ ساعته"
                className="mx-0 size-12 sm:mx-auto lg:mx-0"
              />
              <div className="flex flex-col gap-1">
                <p className="text-sm font-semibold text-foreground sm:text-base">
                  پایش ۲۴ ساعته
                </p>
                <p className="text-sm text-muted-foreground sm:text-base">
                  رصد سلامت سرویس و هشدار لحظه‌ای برای تیم‌ها
                </p>
              </div>
            </div>
            <div className="flex items-center gap-5 rounded-lg border border-border bg-muted p-6 sm:flex-col sm:items-start sm:p-7">
              <img
                src="/block-media/shadcnblocks/block/block-3.svg"
                alt="لوگوی ابزارهای هوش مصنوعی"
                className="mx-0 size-12 sm:mx-auto lg:mx-0"
              />
              <div className="flex flex-col gap-1">
                <p className="text-sm font-semibold text-foreground sm:text-base">
                  امتیازدهی هوشمند سرنخ
                </p>
                <p className="text-sm text-muted-foreground sm:text-base">
                  اولویت‌بندی معاملات با مدل‌های پیش‌بینی درآمد
                </p>
              </div>
            </div>
            <div className="flex items-center gap-5 rounded-lg border border-border bg-muted p-6 sm:flex-col sm:items-start sm:p-7">
              <img
                src="/block-media/shadcnblocks/block/block-4.svg"
                alt="لوگوی امنیت سازمانی"
                className="mx-0 size-12 sm:mx-auto lg:mx-0"
              />
              <div className="flex flex-col gap-1">
                <p className="text-sm font-semibold text-foreground sm:text-base">
                  امنیت سازمانی
                </p>
                <p className="text-sm text-muted-foreground sm:text-base">
                  کنترل دسترسی، رمزنگاری و ممیزی برای داده مشتری
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Stats9 };