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

const testimonials = [
  {
    name: "سارا احمدی",
    role: "مدیرعامل و بنیان‌گذار",
    avatar:
      "/block-media/shadcnblocks/block/avatar-1.webp",
    content:
      "با این CRM دید کامل روی پایپ‌لاین داریم. تیم فروش با اطمینان بیشتری اولویت‌بندی می‌کند و فرصت‌های در خطر زودتر دیده می‌شوند.",
  },
  {
    name: "مازیار رضایی",
    role: "مدیر فروش",
    avatar:
      "/block-media/shadcnblocks/block/avatar-2.webp",
    content:
      "انتقال از جداول پراکنده به یک سیستم واحد بدون دردسر بود. از هفته اول، گزارش مرحله‌به‌مرحله فروش قابل اتکا شد.",
  },
  {
    name: "نیلوفر حسینی",
    role: "مدیر بازاریابی",
    avatar:
      "/block-media/shadcnblocks/block/avatar-3.webp",
    content:
      "اجرای کمپین و سنجش تبدیل چند برابر سریع‌تر شد. لید را زودتر به فروش می‌رسانیم و بازخورد کانال‌ها را همان روز اعمال می‌کنیم.",
  },
  {
    name: "امیر محمدی",
    role: "سرپرست تیم فروش",
    avatar:
      "/block-media/shadcnblocks/block/avatar-4.webp",
    content:
      "یادآوری خودکار و وظایف پیگیری از قبل آماده‌اند. تیم من دیگر وقتش را صرف چک‌لیست دستی نمی‌کند.",
  },
  {
    name: "رؤیا کاظمی",
    role: "مدیر موفقیت مشتری",
    avatar:
      "/block-media/shadcnblocks/block/avatar-3.webp",
    content:
      "تاریخچه تعامل، تیکت و فرصت‌ها کنار هم است. تحویل از فروش به پشتیبانی بدون از دست رفتن زمینه انجام می‌شود.",
  },
  {
    name: "پارسا موسوی",
    role: "تحلیل‌گر فروش",
    avatar:
      "/block-media/shadcnblocks/block/avatar-6.webp",
    content:
      "ساخت گزارش قیف فروش ساده و قابل پیش‌بینی است. فیلترها معنادارند و اعداد با واقعیت CRM هم‌خوان‌اند.",
  },
];

interface Testimonial6Props {
  className?: string;
}

const Testimonial6 = ({ className }: Testimonial6Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <Carousel className="w-full">
          <div className="mb-8 flex justify-between px-1 lg:mb-12">
            <h2 className="text-xl font-semibold lg:text-2xll">
              چرا تیم‌های فروش ما را انتخاب می‌کنند
            </h2>
            <div className="flex items-center gap-2">
              <CarouselPrevious className="static translate-y-0" />
              <CarouselNext className="static translate-y-0" />
            </div>
          </div>
          <CarouselContent>
            {testimonials.map((testimonial, idx) => (
              <CarouselItem
                key={idx}
                className="basis-full md:basis-1/2 lg:basis-1/3"
              >
                <div className="h-full p-1">
                  <div className="flex h-full flex-col justify-between rounded-lg border p-6">
                    <q className="leading-7 text-foreground/70">
                      {testimonial.content}
                    </q>
                    <div className="mt-6 flex gap-4 leading-5">
                      <Avatar className="size-9 rounded-full ring-1 ring-input">
                        <AvatarImage
                          src={testimonial.avatar}
                          alt={testimonial.name}
                        />
                      </Avatar>
                      <div className="text-sm">
                        <p className="font-medium">{testimonial.name}</p>
                        <p className="text-muted-foreground">
                          {testimonial.role}
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </CarouselItem>
            ))}
          </CarouselContent>
        </Carousel>
      </div>
    </section>
  );
};

export { Testimonial6 };