import { Calendar, Target, Trophy, Users, type LucideIcon } from "lucide-react";

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

const stats = [
  {
    value: `${(4.2).toLocaleString("fa-IR")}M+`,
    label: "تیکت",
  },
  {
    value: `${(221).toLocaleString("fa-IR")}هزار+`,
    label: "رضایت مشتری",
  },
  {
    value: (4.9).toLocaleString("fa-IR", {
      minimumFractionDigits: 1,
      maximumFractionDigits: 1,
    }),
    label: "مرکز تماس",
  },
  {
    value: `${(40).toLocaleString("fa-IR")}+`,
    label: "پشتیبانی مشتری",
  },
];

const cards: {
  icon: LucideIcon;
  title: string;
  description: string;
}[] = [
  {
    icon: Calendar,
    title: "پاسخ آماده",
    description:
      "پاسخ‌های پرتکرار را ذخیره کنید و با یک کلیک ارسال کنید.",
  },
  {
    icon: Target,
    title: "SLA هوشمند",
    description:
      "همه کانال‌های ارتباطی را در یک محیط مدیریت کنید و هیچ پیامی گم نشود.",
  },
  {
    icon: Users,
    title: "نظرسنجی رضایت",
    description: "تیکت‌های مهم بر اساس قرارداد یا شدت مسئله در صف بالاتر قرار می‌گیرند.",
  },
];

interface Feature136Props {
  className?: string;
}

const Feature136 = ({ className }: Feature136Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="grid place-content-center gap-10 lg:grid-cols-2">
          <div className="mx-auto flex max-w-3xl flex-col items-center justify-center gap-4 lg:items-start">
            <Badge
              variant="outline"
              className="flex items-center gap-1 px-2.5 py-1.5 text-sm"
            >
              <Trophy className="h-auto w-4" />
              تیکت
            </Badge>
            <h2 className="text-center text-3xl font-semibold lg:text-start lg:text-xl">
              زمان حل مسئله را کوتاه کنید
            </h2>
            <p className="text-center text-muted-foreground lg:text-start lg:text-lg">
              پاسخ‌های آماده و پایگاه دانش، زمان پاسخ را کم می‌کند و کیفیت را در کل تیم یکسان نگه می‌دارد.
            </p>

            <div className="mt-9 flex w-full flex-col justify-center gap-6 md:flex-row lg:justify-start">
              <div className="flex justify-between gap-6">
                <div className="mx-auto text-center lg:text-start">
                  <p className="mb-1.5 text-3xl font-bold">{stats[0].value}</p>
                  <p className="text-muted-foreground">{stats[0].label}</p>
                </div>
                <Separator orientation="vertical" className="h-auto" />
                <div className="mx-auto text-center lg:text-start">
                  <p className="mb-1.5 text-3xl font-bold">{stats[1].value}</p>
                  <p className="text-muted-foreground">{stats[1].label}</p>
                </div>
              </div>
              <Separator
                orientation="vertical"
                className="hidden h-auto md:block"
              />
              <Separator orientation="horizontal" className="block md:hidden" />
              <div className="flex justify-between gap-6">
                <div className="mx-auto text-center lg:text-start">
                  <p className="mb-1.5 text-3xl font-bold">{stats[2].value}</p>
                  <p className="text-muted-foreground">{stats[2].label}</p>
                </div>
                <Separator orientation="vertical" className="h-auto" />
                <div className="mx-auto text-center lg:text-start">
                  <p className="mb-1.5 text-3xl font-bold">{stats[3].value}</p>
                  <p className="text-muted-foreground">{stats[3].label}</p>
                </div>
              </div>
            </div>
          </div>
          <img
            src="/block-media/shadcnblocks/block/placeholder-1.svg"
            alt="مدیریت تیکت"
            className="ms-auto max-h-[450px] w-full rounded-xl object-cover"
          />
        </div>
        <div className="mt-10 grid gap-6 md:grid-cols-3">
          {cards.map((card) => (
            <div key={card.title} className="flex flex-col gap-4">
              <div className="flex flex-col gap-3 rounded-lg border p-6">
                <div className="flex flex-col items-center gap-2 lg:flex-row">
                  <card.icon className="h-auto w-6 shrink-0" />
                  <h3 className="text-center text-lg font-medium lg:text-start">
                    {card.title}
                  </h3>
                </div>
                <p className="text-center text-sm text-muted-foreground md:text-base lg:text-start">
                  {card.description}
                </p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Feature136 };