"use client";

import AutoScroll from "embla-carousel-auto-scroll";

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

interface Logos9Props {
  className?: string;
}

const Logos9 = ({ className }: Logos9Props) => {
  const logos = [
    {
      id: "logo-1",
      description: "لوگوی ۱",
      image:
        "/block-media/shadcnblocks/block/logos/astro-wordmark.svg",
      className: "h-7 w-auto",
    },
    {
      id: "logo-2",
      description: "لوگوی ۲",
      image:
        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-1.svg",
      className: "h-7 w-auto",
    },
    {
      id: "logo-3",
      description: "لوگوی ۳",
      image:
        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-2.svg",
      className: "h-7 w-auto",
    },
    {
      id: "logo-4",
      description: "لوگوی ۴",
      image:
        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-3.svg",
      className: "h-7 w-auto",
    },
    {
      id: "logo-5",
      description: "لوگوی ۵",
      image:
        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-4.svg",
      className: "h-7 w-auto",
    },
    {
      id: "logo-6",
      description: "لوگوی ۶",
      image:
        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-5.svg",
      className: "h-5 w-auto",
    },
    {
      id: "logo-7",
      description: "لوگوی ۷",
      image:
        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-6.svg",
      className: "h-7 w-auto",
    },
    {
      id: "logo-8",
      description: "لوگوی ۸",
      image:
        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-7.svg",
      className: "h-7 w-auto",
    },
  ];
  const testimonials = [
    {
      quote:
        "قابلیت‌های جستجوی هوش مصنوعی اشتراک‌گذاری دانش تیم ما را متحول کرد. واقعاً بازی‌ساز بهره‌وری است.",
      name: "مرکوری، مدیر مالی",
      image:
        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-3.svg",
    },
    {
      quote:
        "کامپوننت‌های منظم و مستندات عالی ساعت‌های بی‌شماری برای ما ذخیره کرد و سازگاری را حفظ کرد.",
      name: "پرپلکسیتی، سرپرست یادگیری ماشین",
      image:
        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-7.svg",
    },
    {
      quote:
        "گزینه‌های سفارشی‌سازی عالی  ظاهری منحصربه‌فرد ساختیم و در عین حال قابلیت اطمینان آزموده را حفظ کردیم.",
      name: "رتول، مدیر محصول",
      image:
        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-5.svg",
    },
  ];
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container flex flex-col items-center text-center">
        <h1 className="my-6 text-lg font-semibold tracking-tight text-foreground">
          بهترین تیم‌های محصول جهان از بلاک‌های ما استفاده می‌کنند
        </h1>
      </div>

      <div className="relative mx-auto flex items-center justify-center pt-8 lg:max-w-5xl">
        <Carousel
          opts={{ loop: true, direction: "rtl", align: "start" }}
          plugins={[AutoScroll({ playOnInit: true })]}
        >
          <CarouselContent className="ms-0">
            {logos.map((logo) => (
              <CarouselItem
                key={logo.id}
                className="flex basis-1/3 justify-center ps-0 sm:basis-1/4 md:basis-1/5 lg:basis-1/6"
              >
                <div className="flex shrink-0 items-center justify-center lg:mx-10">
                  <div>
                    <img
                      src={logo.image}
                      alt={logo.description}
                      className={logo.className}
                    />
                  </div>
                </div>
              </CarouselItem>
            ))}
          </CarouselContent>
        </Carousel>
        <div className="absolute inset-y-0 start-0 w-12 bg-linear-to-l from-background to-transparent" />
        <div className="absolute inset-y-0 end-0 w-12 bg-linear-to-r from-background to-transparent" />
      </div>
      <Separator className="mx-auto my-15 max-w-5xl" />

      <div>
        <Carousel
          opts={{ loop: true, direction: "rtl", align: "start" }}
          className="mx-auto w-full max-w-6xl"
        >
          <CarouselContent>
            {testimonials.map((testimonial, index) => (
              <CarouselItem key={index} className="md:basis-1/2 lg:basis-1/3">
                <div
                  className={cn(
                    "relative w-full border-e border-border px-12 text-center md:px-8 md:text-start",
                    index == 0 && "lg:border-s",
                  )}
                  key={index}
                >
                  <h5 className="mt-5 mb-14 line-clamp-3 text-lg tracking-tight text-muted-foreground md:mb-28">
                    {testimonial.quote}
                  </h5>
                  <div className="mt-auto">
                    <p className="text-lg font-semibold tracking-tight text-foreground">
                      {testimonial.name}
                    </p>
                    <img
                      className="mx-auto my-5 w-40 md:mx-0"
                      alt="لوگوی شرکت"
                      src={testimonial.image}
                    />
                  </div>
                </div>
              </CarouselItem>
            ))}
          </CarouselContent>
        </Carousel>
      </div>
    </section>
  );
};

export { Logos9 };