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

const integrations = [
  {
    title: "Slack",
    description:
      "درخواست‌ها را خودکار دسته‌بندی کنید و به تیم مناسب بفرستید.",
    image: "/block-media/shadcnblocks/block/block-1.svg",
  },
  {
    title: "تحلیل احساس",
    description:
      "مشتریان در معرض ریزش را زودتر شناسایی کنید.",
    image: "/block-media/shadcnblocks/block/block-2.svg",
  },
  {
    title: "Dropbox",
    description:
      "متن‌های طولانی را در چند ثانیه به نکات کلیدی تبدیل کنید.",
    image: "/block-media/shadcnblocks/block/block-3.svg",
  },
  {
    title: "GitHub",
    description:
      "بهترین پاسخ را بر اساس زمینه مکالمه پیشنهاد دهید.",
    image: "/block-media/shadcnblocks/block/block-4.svg",
  },
  {
    title: "Figma",
    description:
      "درخواست‌ها را خودکار دسته‌بندی کنید و به تیم مناسب بفرستید.",
    image: "/block-media/shadcnblocks/block/block-5.svg",
  },
  {
    title: "Trello",
    description:
      "مشتریان در معرض ریزش را زودتر شناسایی کنید.",
    image: "/block-media/shadcnblocks/block/block-6.svg",
  },
  {
    title: "Asana",
    description:
      "متن‌های طولانی را در چند ثانیه به نکات کلیدی تبدیل کنید.",
    image: "/block-media/shadcnblocks/block/block-1.svg",
  },
  {
    title: "Jira",
    description:
      "بهترین پاسخ را بر اساس زمینه مکالمه پیشنهاد دهید.",
    image: "/block-media/shadcnblocks/block/block-2.svg",
  },
];

interface Feature44Props {
  className?: string;
}

const Feature44 = ({ className }: Feature44Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <h2 className="mb-4 text-xl font-semibold lg:text-xl">
          با هوش مصنوعی سریع‌تر تصمیم بگیرید
        </h2>
        <p className="text-muted-foreground lg:text-lg">
          کارهای تکراری را به AI بسپارید
        </p>
        <ul className="mt-8 grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3">
          {integrations.map((integration) => (
            <li key={integration.title}>
              <Card className="p-6">
                <img
                  src={integration.image}
                  alt={`لوگوی ${integration.title}`}
                  className="w-14"
                />
                <h3 className="mt-4 mb-1 text-lg font-medium">
                  {integration.title}
                </h3>
                <p className="text-sm text-muted-foreground">
                  {integration.description}
                </p>
              </Card>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
};

export { Feature44 };