"use client";

import { startTransition, useEffect, useState } from "react";

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

interface Testimonial17Props {
  className?: string;
}

const Testimonial17 = ({ className }: Testimonial17Props) => {
  const [api, setApi] = useState<CarouselApi>();
  const [current, setCurrent] = useState(0);
  const [count, setCount] = useState(0);

  useEffect(() => {
    if (!api) {
      return;
    }

    startTransition(() => {
      setCount(api.scrollSnapList().length);
      setCurrent(api.selectedScrollSnap() + 1);
    });

    api.on("select", () => {
      startTransition(() => {
        setCurrent(api.selectedScrollSnap() + 1);
      });
    });
  }, [api]);

  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="flex flex-col gap-14 lg:grid lg:grid-cols-3 lg:gap-0">
          <h2 className="text-center text-3xl font-bold lg:text-start lg:text-xl">
            تیم‌های فروش با سامانه مدیریت ارتباط با مشتری ما سریع‌تر می‌بندند
          </h2>
          <Carousel setApi={setApi} className="w-full lg:hidden">
            <CarouselContent>
              <CarouselItem>
                <div className="rounded-2xl border p-8 select-none">
                  <img
                    src="/block-media/shadcnblocks/block/logos/shadcn-ui-wordmark.svg"
                    alt="لوگوی ری یو آی"
                    className="mb-6 h-5 dark:invert"
                  />
                  <p className="mb-10 text-xl font-semibold">
                    پس از یکپارچه‌سازی سامانه مدیریت ارتباط با مشتری، نرخ تبدیل لید به فرصت ما جهش کرد.
                    پیگیری فرصت‌ها دیگر پراکنده نیست.
                  </p>
                  <div className="mb-3 flex gap-4">
                    <Avatar className="size-12 rounded-full ring-1 ring-input">
                      <AvatarImage
                        src="/block-media/shadcnblocks/block/avatar-1.webp"
                        alt="سارا احمدی"
                      />
                    </Avatar>
                    <div>
                      <p className="font-medium">سارا احمدی</p>
                      <p className="text-muted-foreground">
                        مدیر فروش، @company
                      </p>
                    </div>
                  </div>
                </div>
              </CarouselItem>
              <CarouselItem>
                <div className="rounded-2xl border p-8 select-none">
                  <img
                    src="/block-media/shadcnblocks/block/logos/nextjs-wordmark.svg"
                    alt="لوگوی فریم‌ورک وب"
                    className="mb-6 h-9 dark:invert"
                  />
                  <p className="mb-10 text-xl font-semibold">
                    اتوماسیون بازاریابی مسیر لید را شفاف کرد و انتقال به فروش
                    بدون تأخیر و بدون داده ناقص انجام می‌شود.
                  </p>
                  <div className="mb-3 flex gap-4">
                    <Avatar className="size-12 rounded-full ring-1 ring-input">
                      <AvatarImage
                        src="/block-media/shadcnblocks/block/avatar-2.webp"
                        alt="مازیار رضایی"
                      />
                    </Avatar>
                    <div>
                      <p className="font-medium">مازیار رضایی</p>
                      <p className="text-muted-foreground">
                        مدیر عملیات درآمد، @company
                      </p>
                    </div>
                  </div>
                </div>
              </CarouselItem>
              <CarouselItem>
                <div className="rounded-2xl border p-8 select-none">
                  <img
                    src="/block-media/shadcnblocks/block/logos/tailwind-wordmark-white.svg"
                    alt="لوگوی استایل‌دهی مدرن"
                    className="mb-6 h-4 lg:h-5"
                  />
                  <p className="mb-10 text-xl font-semibold">
                    چرخه فروش را ۳۳٫۲٪ کوتاه کردیم؛ نمره‌دهی لید و پیگیری خودکار
                    واقعاً نتیجه داد.
                  </p>
                  <div className="mb-3 flex gap-4">
                    <Avatar className="size-12 rounded-full ring-1 ring-input">
                      <AvatarImage
                        src="/block-media/shadcnblocks/block/avatar-3.webp"
                        alt="نیلوفر حسینی"
                      />
                    </Avatar>
                    <div>
                      <p className="font-medium">نیلوفر حسینی</p>
                      <p className="text-muted-foreground">
                        مدیر بازاریابی، @company
                      </p>
                    </div>
                  </div>
                </div>
              </CarouselItem>
            </CarouselContent>
            <div className="mt-8 flex justify-center">
              {Array.from({ length: count }).map((_, index) => (
                <span
                  key={index}
                  className={cn(
                    "mx-2 inline-block size-3 cursor-pointer rounded-full border-2",
                    index + 1 === current && "border-primary bg-primary",
                  )}
                  onClick={() => api && api.scrollTo(index)}
                />
              ))}
            </div>
          </Carousel>
          <div className="col-span-2 hidden grid-cols-2 items-center gap-6 lg:grid">
            <div className="rounded-2xl border p-8">
              <img
                src="/block-media/shadcnblocks/block/logos/shadcn-ui-wordmark.svg"
                alt="لوگوی ری یو آی"
                className="mb-6 h-6 dark:invert"
              />
              <p className="mb-10 text-xl font-semibold">
                پس از یکپارچه‌سازی سامانه مدیریت ارتباط با مشتری، نرخ تبدیل لید به فرصت ما جهش کرد.
                پیگیری فرصت‌ها برای تیم واقعاً شفاف شده!
              </p>
              <div className="mb-3 flex gap-4">
                <Avatar className="size-12 rounded-full ring-1 ring-input">
                  <AvatarImage
                    src="/block-media/shadcnblocks/block/avatar-1.webp"
                    alt="سارا احمدی"
                  />
                </Avatar>
                <div>
                  <p className="font-medium">سارا احمدی</p>
                  <p className="text-muted-foreground">
                    مدیر فروش، @company
                  </p>
                </div>
              </div>
            </div>
            <div className="flex flex-col gap-6">
              <div className="rounded-2xl border p-8">
                <img
                  src="/block-media/shadcnblocks/block/logos/nextjs-wordmark.svg"
                  alt="لوگوی فریم‌ورک وب"
                  className="mb-6 h-8 dark:invert"
                />
                <p className="mb-10 text-xl font-semibold">
                  اتوماسیون بازاریابی مسیر لید را شفاف کرد و انتقال به فروش
                  بدون تأخیر و بدون داده ناقص انجام می‌شود.
                </p>
                <div className="mb-3 flex gap-4">
                  <Avatar className="size-12 rounded-full ring-1 ring-input">
                    <AvatarImage
                      src="/block-media/shadcnblocks/block/avatar-2.webp"
                      alt="مازیار رضایی"
                    />
                  </Avatar>
                  <div>
                    <p className="font-medium">مازیار رضایی</p>
                    <p className="text-muted-foreground">
                      مدیر عملیات درآمد، @company
                    </p>
                  </div>
                </div>
              </div>
              <div className="rounded-2xl border p-8">
                <img
                  src="/block-media/shadcnblocks/block/logos/tailwind-wordmark-black.svg"
                  alt="لوگوی استایل‌دهی مدرن"
                  className="mb-6 h-4 dark:invert"
                />
                <p className="mb-10 text-xl font-semibold">
                  چرخه فروش را ۳۰٪ کوتاه کردیم؛ نمره‌دهی لید و پیگیری خودکار
                  واقعاً نتیجه داد.
                </p>
                <div className="mb-3 flex gap-4">
                  <Avatar className="size-12 rounded-full ring-1 ring-input">
                    <AvatarImage
                      src="/block-media/shadcnblocks/block/avatar-3.webp"
                      alt="نیلوفر حسینی"
                    />
                  </Avatar>
                  <div>
                    <p className="font-medium">نیلوفر حسینی</p>
                    <p className="text-muted-foreground">
                      مدیر بازاریابی، @company
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Testimonial17 };