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

interface Testimonial12Props {
  className?: string;
}

const Testimonial12 = ({ className }: Testimonial12Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="relative rounded-2xl bg-muted">
          <Carousel className="static">
            <CarouselContent className="-ml-4">
              <CarouselItem className="grid grid-cols-1 gap-y-10 pt-4 pr-4 pb-14 pl-8 sm:pt-8 lg:grid-cols-3 lg:gap-10 lg:p-20">
                <div>
                  <img
                    src="/block-media/shadcnblocks/block/placeholder-dark-1.svg"
                    alt="تصویر سارا احمدی"
                    className="mx-auto max-h-80 rounded-xl lg:mx-0 lg:max-h-none"
                  />
                  <div className="mt-4 text-center">
                    <h3 className="font-semibold">سارا احمدی</h3>
                    <p className="text-muted-foreground">مدیر فروش، نایک</p>
                  </div>
                </div>
                <div className="col-span-2">
                  <div className="mb-6 flex items-center justify-center gap-2 lg:mb-8 lg:justify-start">
                    <img
                      src="/block-media/shadcnblocks/block/logos/nike-icon.svg"
                      alt="لوگوی نایک"
                      className="h-auto w-7 lg:w-11"
                    />
                    <span className="text-xl font-semibold lg:text-3xl">
                      نایک
                    </span>
                  </div>
                  <p className="text-center text-xl font-semibold lg:text-start lg:text-xl">
                    «با این سامانه مدیریت ارتباط با مشتری توانستیم پایپ‌لاین فروش را شفاف کنیم و رشد
                    قابل‌توجهی در نرخ تبدیل فرصت‌ها داشته باشیم.»
                  </p>
                  <Separator className="my-8 lg:my-10" />
                  <div className="grid justify-center gap-10 text-center md:grid-cols-2 lg:justify-start lg:text-start">
                    <div className="flex flex-col">
                      <span className="mb-4 text-xl font-semibold md:text-2xll">
                        ۲٫۲x
                      </span>
                      <span className="font-medium">لیدهای واجد شرایط</span>
                      <span className="text-muted-foreground">
                        نسبت به ماه گذشته
                      </span>
                    </div>
                    <div className="flex flex-col">
                      <span className="mb-4 text-xl font-semibold md:text-2xll">
                        ۲۵۶٪
                      </span>
                      <span className="font-medium">افزایش درآمد فروش</span>
                      <span className="text-muted-foreground">
                        نسبت به سال گذشته
                      </span>
                    </div>
                  </div>
                </div>
              </CarouselItem>
              <CarouselItem className="grid grid-cols-1 gap-y-10 pt-4 pr-4 pb-14 pl-8 sm:pt-8 lg:grid-cols-3 lg:gap-10 lg:p-20">
                <div>
                  <img
                    src="/block-media/shadcnblocks/block/placeholder-dark-2.svg"
                    alt="تصویر مازیار رضایی"
                    className="mx-auto max-h-80 rounded-xl lg:mx-0 lg:max-h-none"
                  />
                  <div className="mt-4 text-center">
                    <h3 className="font-semibold">مازیار رضایی</h3>
                    <p className="text-muted-foreground">مدیر عملیات فروش، پیام‌رسان تیمی</p>
                  </div>
                </div>
                <div className="col-span-2">
                  <div className="mb-6 flex items-center justify-center gap-2 lg:mb-8 lg:justify-start">
                    <img
                      src="/block-media/shadcnblocks/block/logos/slack-icon.svg"
                      alt="لوگوی پیام‌رسان تیمی"
                      className="h-auto w-5 lg:mr-1 lg:w-9"
                    />
                    <span className="text-xl font-semibold lg:text-3xl">
                      پیام‌رسان تیمی
                    </span>
                  </div>
                  <p className="text-center text-xl font-semibold lg:text-start lg:text-xl">
                    «یکپارچه‌سازی سریع و نتایج ملموس در پیش‌بینی فروش، این راه‌حل
                    را به انتخاب اول تیم ما تبدیل کرد.»
                  </p>
                  <Separator className="my-8 lg:my-10" />
                  <div className="grid justify-center gap-10 text-center md:grid-cols-2 lg:justify-start lg:text-start">
                    <div className="flex flex-col">
                      <span className="mb-4 text-xl font-semibold md:text-2xll">
                        ۱٫۵x
                      </span>
                      <span className="font-medium">فرصت‌های فعال</span>
                      <span className="text-muted-foreground">
                        نسبت به ماه گذشته
                      </span>
                    </div>
                    <div className="flex flex-col">
                      <span className="mb-4 text-xl font-semibold md:text-2xll">
                        ۱۵۰٪
                      </span>
                      <span className="font-medium">افزایش درآمد فروش</span>
                      <span className="text-muted-foreground">
                        نسبت به سال گذشته
                      </span>
                    </div>
                  </div>
                </div>
              </CarouselItem>
            </CarouselContent>
            <div className="absolute right-6 bottom-6 z-10 lg:right-10 lg:bottom-10">
              <div className="relative flex items-center gap-4">
                <CarouselPrevious className="static translate-y-0" />
                <CarouselNext className="static translate-y-0" />
              </div>
            </div>
          </Carousel>
        </div>
      </div>
    </section>
  );
};

export { Testimonial12 };