"use client";

import Masonry, { ResponsiveMasonry } from "react-responsive-masonry";

import { Avatar, AvatarImage } from "@/components/ui/avatar";
import { Card } from "@/components/ui/card";
import { cn } from "@/lib/utils";

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

interface Testimonial9Props {
  className?: string;
}

const Testimonial9 = ({ className }: Testimonial9Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="flex flex-col items-center gap-6">
          <h2 className="mb-2 text-center text-3xl font-semibold lg:text-2xll">
            مورد اعتماد بیش از ۱۰۰۰ تیم فروش
          </h2>
          <p className="text-muted-foreground lg:text-lg">
            تیم‌های فروش و بازاریابی در سراسر کشور روی سامانه مدیریت ارتباط با مشتری ما حساب می‌کنند
          </p>
        </div>
        <div className="mt-14 w-full">
          <ResponsiveMasonry
            columnsCountBreakPoints={{ 350: 1, 768: 2, 1024: 3 }}
          >
            <Masonry gutter="20px" columnsCount={3}>
              {testimonials.map((testimonial, idx) => {
                return (
                  <Card key={idx} className="p-5">
                    <div className="flex justify-between">
                      <div className="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>
                      <a href={testimonial.link}>
                        <img
                          alt="منبع نظر"
                          src={testimonial.icon}
                          className="size-4"
                        />
                      </a>
                    </div>
                    <div className="mt-8 leading-7 text-foreground/70">
                      <q>{testimonial.content}</q>
                    </div>
                  </Card>
                );
              })}
            </Masonry>
          </ResponsiveMasonry>
        </div>
      </div>
    </section>
  );
};

export { Testimonial9 };