"use client";

import AutoScroll from "embla-carousel-auto-scroll";
import { useRef } from "react";

import { Avatar, AvatarImage } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import { Card } from "@/components/ui/card";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
} from "@/components/ui/carousel";
import { cn } from "@/lib/utils";

const testimonials1 = [
  {
    name: "سارا احمدی",
    role: "مدیرعامل و بنیان‌گذار",
    avatar:
      "/block-media/shadcnblocks/block/avatar/avatar8.jpg",
    content:
      "با یک پایپ‌لاین یکپارچه، نرخ بستن معامله در فصل اول ۲۲٪ رشد کرد. تیم فروش روی فرصت‌های واقعی تمرکز می‌کند.",
  },
  {
    name: "مازیار رضایی",
    role: "مدیر فروش",
    avatar:
      "/block-media/shadcnblocks/block/avatar/avatar5.webp",
    content:
      "زمان پاسخ به لید را به‌طور محسوسی کوتاه کردیم. هر لید ورودی بلافاصله به مسئول درست می‌رسد.",
  },
  {
    name: "نیلوفر حسینی",
    role: "مدیر بازاریابی",
    avatar:
      "/block-media/shadcnblocks/block/avatar/avatar8.webp",
    content:
      "بالاخره سامانه مدیریت ارتباط با مشتری که بازاریابی و فروش هر دو با آن کار می‌کنند. امتیازدهی لید شفاف و گزارش کمپین دقیق است.",
  },
  {
    name: "امیر محمدی",
    role: "سرپرست تیم فروش",
    avatar:
      "/block-media/shadcnblocks/block/avatar/avatar5.jpg",
    content:
      "پیش‌بینی درآمد از حدس هفتگی به عدد مبتنی بر مرحله‌های پایپ‌لاین تبدیل شد.",
  },
  {
    name: "رؤیا کاظمی",
    role: "مدیر موفقیت مشتری",
    avatar:
      "/block-media/shadcnblocks/block/avatar/avatar9.jpg",
    content:
      "تاریخچه کامل مشتری را می‌بینیم. تمدید و ارتقا حساب بدون جست‌وجو در چند ابزار انجام می‌شود.",
  },
  {
    name: "پارسا موسوی",
    role: "تحلیل‌گر فروش",
    avatar:
      "/block-media/shadcnblocks/block/avatar/avatar7.jpg",
    content:
      "داشبورد قیف و منبع لید همیشه به‌روز است. گزارش ماهانه را در چند دقیقه می‌بندیم، نه چند روز.",
  },
];

const testimonials2 = [
  {
    name: "مهسا نوری",
    role: "مدیر جذب مشتری",
    avatar:
      "/block-media/shadcnblocks/block/avatar/avatar10.jpg",
    content:
      "اتوماسیون بازاریابی دنباله‌های ایمیل و نمره‌دهی لید را خودکار کرد. هزینه جذب مشتری پایین آمد.",
  },
  {
    name: "علی رحمانی",
    role: "مدیر عملیات فروش",
    avatar:
      "/block-media/shadcnblocks/block/avatar/avatar7.webp",
    content:
      "بهره‌وری تیم فروش به‌طور محسوسی افزایش یافت. کمتر ورود داده، بیشتر تماس و مذاکره.",
  },
  {
    name: "امیرحسین قاسمی",
    role: "کارشناس فروش",
    avatar:
      "/block-media/shadcnblocks/block/avatar/avatar11.jpg",
    content:
      "وظایف، یادداشت‌ها و مرحله بعدی معامله همیشه جلوی چشم است. هیچ پیگیری مهمی از قلم نمی‌افتد.",
  },
  {
    name: "مهتاب شریفی",
    role: "مدیر بازاریابی محصول",
    avatar:
      "/block-media/shadcnblocks/block/avatar/avatar10.jpg",
    content:
      "تعریف یکسان از لید واجد شرایط بین تیم‌ها ایجاد شد. انتقال از بازاریابی به فروش روان و قابل اندازه‌گیری است.",
  },
  {
    name: "کاوه مرادی",
    role: "بنیان‌گذار استارتاپ",
    avatar:
      "/block-media/shadcnblocks/block/avatar/avatar11.jpg",
    content:
      "با این سامانه مدیریت ارتباط با مشتری فروش سازمانی را در زمان رکورد ساختیم. از روز اول دید روی فرصت‌ها داشتیم، نه ماه‌ها بعد.",
  },
  {
    name: "سمیرا جعفری",
    role: "مدیر عملیات درآمد",
    avatar:
      "/block-media/shadcnblocks/block/avatar/avatar2.webp",
    content:
      "حتی در مقیاس بالاتر، گزارش‌ها پایدار و هم‌خوان با داده‌ی زنده فروش باقی ماندند.",
  },
];

interface Testimonial7Props {
  className?: string;
}

const Testimonial7 = ({ className }: Testimonial7Props) => {
  const plugin1 = useRef(
    AutoScroll({
      startDelay: 500,
      speed: 0.7,
    }),
  );

  const plugin2 = useRef(
    AutoScroll({
      startDelay: 500,
      speed: 0.7,
      direction: "backward",
    }),
  );
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container flex flex-col items-center gap-6">
        <Badge variant="outline">نظرات مشتریان</Badge>
        <h2 className="text-center text-3xl lg:text-2xll">
          نتیجه واقعی در پایپ‌لاین فروش
        </h2>
        <p className="text-center text-muted-foreground lg:text-lg">
          تجربه تیم‌هایی را بخوانید که با سامانه مدیریت ارتباط با مشتری و اتوماسیون فروش ما نرخ تبدیل و
          پیگیری لید را متحول کرده‌اند.
        </p>
      </div>
      <div className="lg:container">
        <div className="mt-16 space-y-6 [mask-image:linear-gradient(90deg,transparent,black_10%,black_90%,transparent)]">
          <Carousel
            opts={{
              loop: true,
            }}
            plugins={[plugin1.current]}
            onMouseLeave={() => plugin1.current.play()}
          >
            <CarouselContent className="-ml-4">
              {testimonials1.map((testimonial, index) => (
                <CarouselItem key={index} className="basis-auto py-px pl-4">
                  <Card className="max-w-96 gap-2 p-6 select-none">
                    <div className="mb-4 flex gap-4">
                      <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>
                    <q className="text-muted-foreground">
                      {testimonial.content}
                    </q>
                  </Card>
                </CarouselItem>
              ))}
            </CarouselContent>
          </Carousel>
          <Carousel
            opts={{
              loop: true,
            }}
            plugins={[plugin2.current]}
            onMouseLeave={() => plugin2.current.play()}
          >
            <CarouselContent className="-ml-4">
              {testimonials2.map((testimonial, index) => (
                <CarouselItem key={index} className="basis-auto py-px pl-4">
                  <Card className="max-w-96 p-6 select-none">
                    <div className="mb-4 flex gap-4">
                      <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>
                    <q className="text-muted-foreground">
                      {testimonial.content}
                    </q>
                  </Card>
                </CarouselItem>
              ))}
            </CarouselContent>
          </Carousel>
        </div>
      </div>
    </section>
  );
};

export { Testimonial7 };