"use client";

import AutoScroll from "embla-carousel-auto-scroll";
import { Atom, ChevronRight, ShieldCheck, Star, Zap } from "lucide-react";

import { Avatar, AvatarImage } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
} from "@/components/ui/carousel";
import { cn } from "@/lib/utils";

const traitBadges = [
  { label: "فرایند هوشمند", icon: Zap },
  { label: "اتوماسیون", icon: ShieldCheck },
  { label: "گردش‌کار", icon: Atom },
];

const avatars = Array.from(
  { length: 7 },
  (_, index) =>
    `/block-media/shadcnblocks/block/avatar-${index + 1}.webp`,
);

interface Feature110Props {
  className?: string;
}

const Feature110 = ({ className }: Feature110Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="mx-auto flex max-w-xl flex-col items-center gap-5 text-center">
          <Badge variant="outline">صرفه‌جویی زمان</Badge>
          <h2 className="text-3xl font-semibold md:text-2xll">
            فرایندها را استاندارد و سریع کنید
          </h2>
          <p className="text-muted-foreground md:text-lg">
            اتوماسیون را در کل سازمان یکپارچه کنید
          </p>
        </div>
        <div className="mx-auto mt-12 grid max-w-5xl gap-7 md:grid-cols-2">
          <div className="flex flex-col gap-7">
            <div className="rounded-xl border bg-muted p-8 md:p-10">
              <div className="mb-7 flex flex-wrap items-center gap-2.5">
                {traitBadges.map(({ label, icon: Icon }) => (
                  <Badge
                    key={label}
                    variant="outline"
                    className="flex items-center gap-1 bg-background px-2.5 py-1.5 text-sm font-semibold"
                  >
                    <Icon className="h-auto w-4" />
                    {label}
                  </Badge>
                ))}
              </div>
              <h3 className="mb-2.5 font-semibold md:text-xl">لاگ اجرا</h3>
              <p className="text-sm text-muted-foreground md:text-base">
                قالب آماده
              </p>
              <a
                href="#"
                className="mt-5 flex items-center gap-1 text-sm font-medium md:text-base"
              >
                فرایند هوشمند
                <ChevronRight className="h-auto w-4 rtl:rotate-180" />
              </a>
            </div>
            <div className="rounded-xl border bg-muted pb-8 md:pb-10">
              <div className="p-8 md:p-10">
                <div className="mb-2.5 flex items-center justify-between">
                  <h3 className="font-semibold md:text-xl">اتصال ابزار</h3>
                  <Badge variant="outline" className="bg-background">
                    سازنده گردش‌کار
                  </Badge>
                </div>
                <p className="text-sm text-muted-foreground md:text-base">
                  قوانین ساده تعریف کنید تا وظایف تکراری بدون دخالت دست انجام شود. تیم روی تصمیم‌های مهم تمرکز می‌کند و سرعت اجرا بالاتر می‌رود.
                </p>
              </div>

              <Carousel
                opts={{
                  loop: true,
                  direction: "rtl",
                }}
                plugins={[
                  AutoScroll({
                    speed: 0.8,
                  }),
                ]}
                className="relative max-w-[calc(100vw-64px)] overflow-hidden"
              >
                <CarouselContent>
                  {avatars.map((src, index) => (
                    <CarouselItem
                      key={src}
                      className="w-fit basis-auto sm:basis-1/5"
                    >
                      <Avatar className="size-14 rounded-full ring-1 ring-input">
                        <AvatarImage
                          src={src}
                          alt={`تصویر پروفایل ${(index + 1).toLocaleString("fa-IR")}`}
                        />
                      </Avatar>
                    </CarouselItem>
                  ))}
                </CarouselContent>
                <div className="absolute inset-0 bg-linear-to-l from-muted via-transparent to-muted" />
              </Carousel>
            </div>
          </div>
          <div className="flex flex-col gap-7">
            <div className="rounded-xl border bg-muted p-8 md:p-10">
              <div className="mb-2.5 flex items-center gap-1">
                {Array.from({ length: 5 }).map((_, index) => (
                  <Star key={index} className="h-auto w-5 fill-primary" />
                ))}
              </div>
              <p className="mb-7 text-sm text-muted-foreground">
                از بیش از {(15000).toLocaleString("fa-IR")} کاربر
              </p>
              <h3 className="mb-2.5 font-semibold md:text-xl">
                تریگر رویداد
              </h3>
              <p className="text-sm text-muted-foreground md:text-base">
                شرط هوشمند
              </p>
            </div>
            <div className="rounded-xl border bg-muted p-8 md:p-10">
              <div className="mb-14 flex justify-start">
                <Badge variant="outline" className="bg-background">
                  اتوماسیون
                </Badge>
              </div>
              <h3 className="mb-2.5 font-semibold md:text-xl">اعلان خودکار</h3>
              <p className="text-sm text-muted-foreground md:text-base">
                تأیید چندمرحله‌ای
              </p>
              <a
                href="#"
                className="mt-5 flex items-center gap-1 text-sm font-medium md:text-base"
              >
                گردش‌کار
                <ChevronRight className="h-auto w-4 rtl:rotate-180" />
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Feature110 };