import { ArrowRight, CheckCircle2 } from "lucide-react";

import { Button } from "@/components/ui/button";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { cn } from "@/lib/utils";

const slides = [
  {
    id: 1,
    tabName: "اتوماسیون AI",
    title: "تحلیل احساس",
    description:
      "درخواست‌ها را خودکار دسته‌بندی کنید و به تیم مناسب بفرستید.",
    features: [
      "یادگیری از داده سازمان",
      "پیشنهاد اقدام بعدی",
      "خلاصه گزارش خودکار",
      "تشخیص نیت کاربر",
    ],
    exploreLabel: "دستیار کسب‌وکار",
    link: "#",
    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
  },
  {
    id: 2,
    tabName: "هوش مصنوعی",
    title: "دستیار گفتگو",
    description:
      "مشتریان در معرض ریزش را زودتر شناسایی کنید.",
    features: [
      "اولویت‌بندی هوشمند",
      "بهبود مستمر مدل",
      "یادگیری از داده سازمان",
      "پیشنهاد اقدام بعدی",
    ],
    exploreLabel: "پیشنهاد هوشمند",
    link: "#",
    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
  },
  {
    id: 3,
    tabName: "اتوماسیون AI",
    title: "خلاصه‌سازی هوشمند",
    description:
      "متن‌های طولانی را در چند ثانیه به نکات کلیدی تبدیل کنید.",
    features: [
      "خلاصه گزارش خودکار",
      "تشخیص نیت کاربر",
      "اولویت‌بندی هوشمند",
      "بهبود مستمر مدل",
    ],
    exploreLabel: "دستیار کسب‌وکار",
    link: "#",
    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
  },
  {
    id: 4,
    tabName: "هوش مصنوعی",
    title: "پیشنهاد پاسخ",
    description:
      "بهترین پاسخ را بر اساس زمینه مکالمه پیشنهاد دهید.",
    features: [
      "یادگیری از داده سازمان",
      "پیشنهاد اقدام بعدی",
      "خلاصه گزارش خودکار",
      "تشخیص نیت کاربر",
    ],
    exploreLabel: "پیشنهاد هوشمند",
    link: "#",
    image: "/block-media/shadcnblocks/block/placeholder-4.svg",
  },
  {
    id: 5,
    tabName: "اتوماسیون AI",
    title: "طبقه‌بندی خودکار",
    description:
      "درخواست‌ها را خودکار دسته‌بندی کنید و به تیم مناسب بفرستید.",
    features: [
      "اولویت‌بندی هوشمند",
      "بهبود مستمر مدل",
      "یادگیری از داده سازمان",
      "پیشنهاد اقدام بعدی",
    ],
    exploreLabel: "دستیار کسب‌وکار",
    link: "#",
    image: "/block-media/shadcnblocks/block/placeholder-5.svg",
  },
];

interface Feature19Props {
  className?: string;
}

const Feature19 = ({ className }: Feature19Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="mx-auto flex max-w-3xl flex-col items-center gap-6">
          <h2 className="text-center text-3xl font-semibold lg:text-2xll">
            با هوش مصنوعی سریع‌تر تصمیم بگیرید
          </h2>
          <p className="text-center text-balance text-muted-foreground lg:text-xl">
            مدل‌های هوشمند الگوهای پنهان در داده فروش و پشتیبانی را پیدا می‌کنند. تیم‌ها با پیشنهادهای عملی، سریع‌تر اقدام می‌کنند.
          </p>
        </div>
        <div className="mt-12 flex justify-start">
          <Tabs
            dir="rtl"
            defaultValue="1"
            className="flex w-full max-w-5xl flex-col items-start gap-8 md:gap-12"
          >
            <div
              dir="rtl"
              className="flex w-full justify-start overflow-x-auto overflow-y-hidden"
            >
              <TabsList className="w-max whitespace-nowrap">
                {slides.map((slide) => (
                  <TabsTrigger key={slide.id} value={slide.id.toString()}>
                    {slide.tabName}
                  </TabsTrigger>
                ))}
              </TabsList>
            </div>
            {slides.map((slide) => (
              <TabsContent
                value={slide.id.toString()}
                key={slide.id}
                className="w-full"
              >
                <div
                  dir="rtl"
                  className="grid grid-cols-1 items-center gap-10 md:grid-cols-2"
                >
                  <div className="flex flex-col items-start text-right">
                    <h2 className="mb-4 text-xl font-semibold lg:text-xl">
                      {slide.title}
                    </h2>
                    <p className="text-muted-foreground lg:text-xl">
                      {slide.description}
                    </p>
                    <ul className="mt-8 grid w-full grid-cols-1 gap-2 lg:grid-cols-2">
                      {slide.features.map((feature) => (
                        <li key={feature} className="flex items-center gap-2">
                          <CheckCircle2 className="size-4 shrink-0" />
                          <span className="font-medium">{feature}</span>
                        </li>
                      ))}
                    </ul>
                    <Button variant="outline" size="sm" className="mt-8" asChild>
                      <a href={slide.link}>
                        {slide.exploreLabel}
                        <ArrowRight className="ms-2 size-4 rtl:rotate-180" />
                      </a>
                    </Button>
                  </div>
                  <img
                    src={slide.image}
                    alt={slide.title}
                    className="order-first max-h-[400px] w-full rounded-lg object-cover md:order-0"
                  />
                </div>
              </TabsContent>
            ))}
          </Tabs>
        </div>
      </div>
    </section>
  );
};

export { Feature19 };