import {
  BarChartHorizontal,
  BatteryCharging,
  CircleHelp,
  Layers,
  WandSparkles,
  ZoomIn,
} from "lucide-react";

import { cn } from "@/lib/utils";

const reasons = [
  {
    title: "پاسخ آماده",
    description:
      "پاسخ‌های پرتکرار را ذخیره کنید و با یک کلیک ارسال کنید.",
    icon: ZoomIn,
  },
  {
    title: "SLA هوشمند",
    description:
      "همه کانال‌های ارتباطی را در یک محیط مدیریت کنید و هیچ پیامی گم نشود.",
    icon: BarChartHorizontal,
  },
  {
    title: "نظرسنجی رضایت",
    description:
      "تیکت‌های مهم بر اساس قرارداد یا شدت مسئله در صف بالاتر قرار می‌گیرند.",
    icon: CircleHelp,
  },
  {
    title: "تخصیص خودکار",
    description:
      "مشتریان و تیم با مقالات راهنما سریع‌تر به پاسخ می‌رسند.",
    icon: WandSparkles,
  },
  {
    title: "تاریخچه مشتری",
    description:
      "پاسخ‌های پرتکرار را ذخیره کنید و با یک کلیک ارسال کنید.",
    icon: Layers,
  },
  {
    title: "صندوق یکپارچه",
    description:
      "همه کانال‌های ارتباطی را در یک محیط مدیریت کنید و هیچ پیامی گم نشود.",
    icon: BatteryCharging,
  },
];

interface Feature85Props {
  className?: string;
}

const Feature85 = ({ className }: Feature85Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="border-t">
        <div>
          <div className="relative container overflow-hidden border-x border-muted-foreground/20 py-32">
            <div className="isolate mx-auto flex max-w-3xl flex-col gap-20">
              <div className="bg absolute -start-px -top-1 -z-10 h-full w-full bg-[linear-gradient(to_left,hsl(var(--muted-foreground))_1px,transparent_1px),linear-gradient(to_bottom,hsl(var(--muted-foreground))_1px,transparent_1px)] [mask-image:radial-gradient(ellipse_100%_120%_at_50%_50%,transparent_20%,#000_100%)] bg-[size:64px_64px] opacity-20 [clip-path:inset(0px_0px_50%_0px)]" />
              <h2 className="text-center text-3xl md:text-2xll">
                زمان حل مسئله را کوتاه کنید
              </h2>
              <img
                src="/block-media/shadcnblocks/block/placeholder-aspect-video-1.svg"
                alt="مدیریت تیکت"
                className="max-h-64 w-full rounded-xl object-cover"
              />
              <p className="text-center text-xl md:text-3xl">
                پاسخ‌های آماده و پایگاه دانش، زمان پاسخ را کم می‌کند و کیفیت را در کل تیم یکسان نگه می‌دارد.
              </p>
            </div>
          </div>
          <div className="border-t border-muted-foreground/20">
            <div className="container border-x border-muted-foreground/20 px-0">
              <div className="grid gap-px bg-muted-foreground/20 md:grid-cols-2 lg:grid-cols-3">
                {reasons.map((reason) => (
                  <div
                    key={reason.title}
                    className="flex gap-4 bg-muted px-6 pt-8 pb-8 md:flex-col md:gap-0 md:px-8 md:pt-16"
                  >
                    <reason.icon
                      className="size-7 shrink-0 md:size-8"
                      strokeWidth={1.5}
                    />
                    <div>
                      <h3 className="mb-2 md:mt-6 md:text-lg">
                        {reason.title}
                      </h3>
                      <p className="text-muted-foreground">
                        {reason.description}
                      </p>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
          <div>
            <div className="border-x border-t border-muted-foreground/20">
              <div className="container border-x border-muted-foreground/20 py-16" />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Feature85 };