"use client";

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

const utilities = [
  {
    title: "تاریخچه مشتری",
    description:
      "پاسخ‌های پرتکرار را ذخیره کنید و با یک کلیک ارسال کنید.",
    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
    imageAlt: "مدیریت تیکت",
  },
  {
    title: "صندوق یکپارچه",
    description:
      "همه کانال‌های ارتباطی را در یک محیط مدیریت کنید و هیچ پیامی گم نشود.",
    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
    imageAlt: "داشبورد رضایت",
  },
  {
    title: "اولویت‌بندی تیکت",
    description:
      "تیکت‌های مهم بر اساس قرارداد یا شدت مسئله در صف بالاتر قرار می‌گیرند.",
    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
    imageAlt: "مرکز پشتیبانی مشتری",
  },
  {
    title: "پایگاه دانش",
    description:
      "مشتریان و تیم با مقالات راهنما سریع‌تر به پاسخ می‌رسند.",
    image: "/block-media/shadcnblocks/block/placeholder-4.svg",
    imageAlt: "مدیریت تیکت",
  },
  {
    title: "پاسخ آماده",
    description:
      "پاسخ‌های پرتکرار را ذخیره کنید و با یک کلیک ارسال کنید.",
    image: "/block-media/shadcnblocks/block/placeholder-5.svg",
    imageAlt: "داشبورد رضایت",
  },
  {
    title: "SLA هوشمند",
    description:
      "همه کانال‌های ارتباطی را در یک محیط مدیریت کنید و هیچ پیامی گم نشود.",
    image: "/block-media/shadcnblocks/block/placeholder-6.svg",
    imageAlt: "مرکز پشتیبانی مشتری",
  },
];

interface Feature148Props {
  className?: string;
}

const Feature148 = ({ className }: Feature148Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="m-auto mb-24 max-w-xl text-center">
          <h2 className="mb-6 text-3xl font-semibold lg:text-2xll">
            زمان حل مسئله را کوتاه کنید
          </h2>
          <p className="m-auto max-w-3xl text-lg lg:text-xl">
            کیفیت پاسخگویی را قابل اندازه‌گیری کنید
          </p>
          <Button asChild className="mt-8 rounded-xl" size="lg">
            <a href="#">تیکت‌های مهم بر اساس قرارداد یا شدت مسئله در صف بالاتر قرار می‌گیرند.</a>
          </Button>
        </div>
        <div className="mt-11 grid w-full grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
          {utilities.map((utility) => (
            <Card key={utility.title} className="border-0 pt-0">
              <img
                src={utility.image}
                alt={utility.imageAlt}
                className="aspect-video w-full rounded-t-xl object-cover"
              />
              <div className="p-5 text-start">
                <p className="mb-1 font-medium">{utility.title}</p>
                <p className="text-muted-foreground">{utility.description}</p>
              </div>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Feature148 };