import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel";
import { Separator } from "@/components/ui/separator";
import { cn } from "@/lib/utils";

const formatYears = (years: number) =>
  `${years.toLocaleString("fa-IR")}+ سال تجربه`;

const members = [
  {
    name: "علی رضوی",
    image:
      "/block-media/shadcnblocks/block/avatar-6.webp",
    role: "مدیرعامل",
    yearsOfExperience: 15,
  },
  {
    name: "سارا احمدی",
    image:
      "/block-media/shadcnblocks/block/avatar-7.webp",
    role: "طراح ارشد",
    yearsOfExperience: 8,
  },
  {
    name: "امیر محمدی",
    image:
      "/block-media/shadcnblocks/block/avatar-8.webp",
    role: "مهندس ارشد محصول",
    yearsOfExperience: 10,
  },
  {
    name: "مریم حسینی",
    image:
      "/block-media/shadcnblocks/block/avatar-1.webp",
    role: "مدیر بازاریابی",
    yearsOfExperience: 12,
  },
  {
    name: "پویا جعفری",
    image:
      "/block-media/shadcnblocks/block/avatar-5.webp",
    role: "مدیر فروش",
    yearsOfExperience: 7,
  },
  {
    name: "سمیه رحیمی",
    image:
      "/block-media/shadcnblocks/block/avatar-3.webp",
    role: "مدیر موفقیت مشتری",
    yearsOfExperience: 5,
  },
  {
    name: "حسین کاظمی",
    image:
      "/block-media/shadcnblocks/block/avatar-2.webp",
    role: "مدیر فناوری",
    yearsOfExperience: 20,
  },
  {
    name: "نرگس مرادی",
    image:
      "/block-media/shadcnblocks/block/avatar-7.webp",
    role: "طراح محصول",
    yearsOfExperience: 6,
  },
  {
    name: "آرمان نوری",
    image:
      "/block-media/shadcnblocks/block/avatar-4.webp",
    role: "مهندس فرانت‌اند",
    yearsOfExperience: 4,
  },
  {
    name: "لیلا کریمی",
    image:
      "/block-media/shadcnblocks/block/avatar-1.webp",
    role: "متخصص بازاریابی",
    yearsOfExperience: 3,
  },
  {
    name: "کامران پارخی",
    image:
      "/block-media/shadcnblocks/block/avatar-5.webp",
    role: "نماینده فروش",
    yearsOfExperience: 5,
  },
  {
    name: "مهسا امینی",
    image:
      "/block-media/shadcnblocks/block/avatar-3.webp",
    role: "متخصص پشتیبانی",
    yearsOfExperience: 2,
  },
  {
    name: "توماج راست",
    image:
      "/block-media/shadcnblocks/block/avatar-5.webp",
    role: "مهندس بک‌اند",
    yearsOfExperience: 8,
  },
  {
    name: "مینا کیانی",
    image:
      "/block-media/shadcnblocks/block/avatar-7.webp",
    role: "طراح رابط کاربری",
    yearsOfExperience: 4,
  },
  {
    name: "دانیال غفاری",
    image:
      "/block-media/shadcnblocks/block/avatar-6.webp",
    role: "مدیر بازاریابی",
    yearsOfExperience: 9,
  },
  {
    name: "ژیلا لطفی",
    image:
      "/block-media/shadcnblocks/block/avatar-1.webp",
    role: "مدیر فروش",
    yearsOfExperience: 11,
  },
  {
    name: "امیر حسینی",
    image:
      "/block-media/shadcnblocks/block/avatar-8.webp",
    role: "مدیر پشتیبانی",
    yearsOfExperience: 6,
  },
  {
    name: "پریسا معمار",
    image:
      "/block-media/shadcnblocks/block/avatar-3.webp",
    role: "مدیر عملیات",
    yearsOfExperience: 18,
  },
  {
    name: "رایان طهماسب",
    image:
      "/block-media/shadcnblocks/block/avatar-2.webp",
    role: "مهندس سیستم",
    yearsOfExperience: 7,
  },
  {
    name: "سحر تابنده",
    image:
      "/block-media/shadcnblocks/block/avatar-7.webp",
    role: "طراح محصول",
    yearsOfExperience: 5,
  },
];

interface Team8Props {
  className?: string;
}

const Team8 = ({ className }: Team8Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn("overflow-hidden py-32", className)}
    >
      <div className="container">
        <h2 className="text-start text-2xll font-medium md:text-2xll">
          پیشگامان فناوری <br />
          <span className="text-primary/50">که آینده را می‌سازند</span>
        </h2>
        <p className="mt-6 max-w-md text-start text-muted-foreground">
          ما توسعه‌دهندگان، مهندسان و نوآوران فناوری درخشان را گرد هم
          می‌آوریم تا راه‌حل‌های دیجیتال پیشگامانه بسازیم.
        </p>
        <Carousel>
          <div className="mt-4 hidden items-center justify-start gap-4 md:flex">
            <CarouselPrevious className="static size-11 translate-x-0 translate-y-0" />
            <CarouselNext className="static size-11 translate-x-0 translate-y-0" />
          </div>
          <div className="mt-16 [&>div[data-slot=carousel-content]]:overflow-visible">
            <CarouselContent className="max-w-[min(calc(100vw-4rem),24rem)] select-none">
              {members.map((member) => (
                <CarouselItem key={member.name} className="max-w-72">
                  <div className="rounded-2xl border border-border bg-background p-7 text-center">
                    <img
                      src={member.image}
                      alt={member.name}
                      className="mx-auto size-20 rounded-full border border-border"
                    />
                    <div className="mt-6 flex flex-col justify-center">
                      <p className="text-lg font-medium text-primary">
                        {member.name}
                      </p>
                      <p className="text-sm text-muted-foreground">
                        {member.role}
                      </p>
                    </div>
                    <Separator className="my-6 bg-linear-to-r from-background via-border to-background" />
                    <p className="text-sm text-muted-foreground">
                      {formatYears(member.yearsOfExperience)}
                    </p>
                  </div>
                </CarouselItem>
              ))}
            </CarouselContent>
          </div>
        </Carousel>
      </div>
    </section>
  );
};

export { Team8 };