"use client";

import {
  Infinity as InfinityIcon,
  Laptop,
  Zap,
  ZoomIn,
  type LucideIcon,
} from "lucide-react";

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

const items1 = [
  {
    title: "طبقه‌بندی خودکار",
    description: "درخواست‌ها را خودکار دسته‌بندی کنید و به تیم مناسب بفرستید.",
    imgSrc: "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
  },
  {
    title: "پیش‌بینی ریزش",
    description: "مشتریان در معرض ریزش را زودتر شناسایی کنید.",
    imgSrc: "/block-media/shadcnblocks/block/placeholder-dark-2.svg",
  },
  {
    title: "جستجوی معنایی",
    description: "متن‌های طولانی را در چند ثانیه به نکات کلیدی تبدیل کنید.",
    imgSrc: "/block-media/shadcnblocks/block/placeholder-dark-3.svg",
  },
  {
    title: "تولید محتوا",
    description: "بهترین پاسخ را بر اساس زمینه مکالمه پیشنهاد دهید.",
    imgSrc: "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
  },
];

const items2: {
  title: string;
  description: string;
  icon: LucideIcon;
}[] = [
  {
    title: "تحلیل احساس",
    description:
      "درخواست‌ها را خودکار دسته‌بندی کنید و به تیم مناسب بفرستید.",
    icon: InfinityIcon,
  },
  {
    title: "دستیار گفتگو",
    description:
      "مشتریان در معرض ریزش را زودتر شناسایی کنید.",
    icon: Laptop,
  },
  {
    title: "خلاصه‌سازی هوشمند",
    description: "متن‌های طولانی را در چند ثانیه به نکات کلیدی تبدیل کنید.",
    icon: Zap,
  },
  {
    title: "پیشنهاد پاسخ",
    description:
      "بهترین پاسخ را بر اساس زمینه مکالمه پیشنهاد دهید.",
    icon: ZoomIn,
  },
];

interface Feature137Props {
  className?: string;
}

const Feature137 = ({ className }: Feature137Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <h2 className="text-start text-xl font-semibold">با هوش مصنوعی سریع‌تر تصمیم بگیرید</h2>

        <div className="mt-12 grid grid-cols-1 gap-10 sm:grid-cols-2">
          {items1.map((item) => (
            <div
              className="overflow-hidden rounded-2xl bg-muted pb-8"
              key={item.title}
            >
              <img
                src={item.imgSrc}
                alt={`نمای ${item.title}`}
                className="h-40 w-full object-cover"
              />
              <p className="mt-8 mb-4 px-10 text-start text-xl font-semibold">
                {item.title}
              </p>
              <p className="px-10 text-start text-base text-muted-foreground">
                {item.description}
              </p>
            </div>
          ))}
        </div>

        <div className="mt-12">
          {items2.map((item, index) => (
            <div
              key={item.title}
              className={cn(
                "flex flex-col items-center justify-between gap-4 rounded-2xl p-8 sm:flex-row sm:gap-10",
                index % 2 !== 0 && "bg-muted",
              )}
            >
              <div className="flex w-full items-center gap-4 text-start">
                <item.icon className="size-8 shrink-0" />
                <p className="text-base font-semibold">{item.title}</p>
              </div>
              <p className="w-full text-start text-base text-muted-foreground">
                {item.description}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Feature137 };