import { Calendar } from "lucide-react";

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

interface DataItem {
  id: number;
  number: string;
  title: string;
  description: string;
  image: string;
  imageAlt: string;
}

const DATA: DataItem[] = [
  {
    id: 1,
    number: "۱",
    title: "پاسخ آماده",
    description:
      "پاسخ‌های پرتکرار را ذخیره کنید و با یک کلیک ارسال کنید.",
    image: "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
    imageAlt: "مدیریت تیکت",
  },
  {
    id: 2,
    number: "۲",
    title: "SLA هوشمند",
    description:
      "همه کانال‌های ارتباطی را در یک محیط مدیریت کنید و هیچ پیامی گم نشود.",
    image: "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
    imageAlt: "داشبورد رضایت",
  },
  {
    id: 3,
    number: "۰۳",
    title: "نظرسنجی رضایت",
    description:
      "تیکت‌های مهم بر اساس قرارداد یا شدت مسئله در صف بالاتر قرار می‌گیرند.",
    image: "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
    imageAlt: "مرکز پشتیبانی مشتری",
  },
];

interface Feature191Props {
  className?: string;
}

const Feature191 = ({ className }: Feature191Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("bg-accent py-32", className)}>
      <div className="container">
        <div className="flex flex-col items-center pb-4 text-center">
          <div>
            <span className="my-3 mb-4 flex items-center justify-center">
              <Badge variant="outline" className="gap-2 bg-background px-3 py-1">
                <Calendar className="h-4 w-4" />
                <span className="text-xs">تیکت</span>
              </Badge>
            </span>
          </div>
          <h2 className="pb-3 text-xl font-semibold text-balance sm:text-3xl md:text-xl lg:text-2xll">
            رضایت مشتری
          </h2>
          <p className="max-w-md text-sm text-pretty text-muted-foreground lg:max-w-2xl lg:text-lg">
            پاسخ‌های آماده و پایگاه دانش، زمان پاسخ را کم می‌کند و کیفیت را در کل تیم یکسان نگه می‌دارد.
          </p>
        </div>

        <div className="mt-4 grid grid-cols-1 gap-4 px-4 sm:px-6 md:grid-cols-2 md:px-8 lg:grid-cols-3 lg:px-12">
          {DATA.map((feature) => (
            <div
              key={feature.id}
              className="grid grid-cols-1 rounded-2xl border bg-background shadow-sm"
            >
              <div className="p-6 text-start">
                <Badge className="rounded-sm bg-muted-foreground py-2 font-mono">
                  {feature.number}
                </Badge>
                <p className="text-md my-4 font-semibold">{feature.title}</p>
                <p className="text-pretty text-muted-foreground">
                  {feature.description}
                </p>
              </div>
              <div className="mt-auto flex min-h-[200px] justify-center rounded-b-2xl">
                <div className="h-[200px] w-full">
                  <img
                    src={feature.image}
                    alt={feature.imageAlt}
                    className="h-full w-full rounded-b-2xl object-cover"
                  />
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Feature191 };