"use client";

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

const defaultTestimonials = [
  {
    name: "سارا احمدی",
    role: "مدیرعامل و بنیان‌گذار",
    avatar:
      "/block-media/shadcnblocks/block/avatar-1.webp",
    content:
      "این سامانه مدیریت ارتباط با مشتری کاملاً نحوه مدیریت فروش ما را تغییر داد. دید شفاف روی پایپ‌لاین و اتوماسیون پیگیری، بهره‌وری تیم فروش را ۴۰٪ افزایش داد. بدون آن نمی‌توانم جریان درآمد را کنترل کنم. پشتیبانی مشتریان سریع است و به‌روزرسانی‌ها با نیاز واقعی فروش هم‌خوان‌اند.",
  },
  {
    name: "مازیار رضایی",
    role: "مدیر فروش",
    avatar:
      "/block-media/shadcnblocks/block/avatar-2.webp",
    content:
      "یکپارچه‌سازی با ایمیل، تقویم و ابزارهای بازاریابی بدون درز انجام شد. همکاری بلادرنگ بین تیم‌ها گردش کار فروش ما را یکپارچه کرد.",
  },
  {
    name: "نیلوفر حسینی",
    role: "مدیر بازاریابی",
    avatar:
      "/block-media/shadcnblocks/block/avatar-7.webp",
    content:
      "به‌عنوان مدیر بازاریابی، به ابزاری نیاز دارم که لیدها را منظم کند و با فروش هم‌تراز بماند. این پلتفرم با امتیازدهی لید، داشبورد کمپین و انتقال شفاف به فروش، هر دو را فراهم می‌کند. ردیابی تبدیل در لحظه برای بهینه‌سازی بودجه بسیار ارزشمند بوده است.",
  },
  {
    name: "امیر محمدی",
    role: "مدیر عملیات فروش",
    avatar:
      "/block-media/shadcnblocks/block/avatar-4.webp",
    content:
      "تحلیل و گزارش‌دهی دید بی‌سابقه‌ای به قیف فروش داده است. اکنون با اطمینان روی مرحله‌ها و کانال‌ها تصمیم می‌گیریم و کارایی در همه مناطق فروش بهبود یافته. داشبوردهای سفارشی و گزارش‌های خودکار هر هفته ساعت‌ها وقت ما را ذخیره می‌کند.",
  },
  {
    name: "سمیه اکبری",
    role: "سرپرست تیم فروش",
    avatar:
      "/block-media/shadcnblocks/block/avatar-7.webp",
    content:
      "راه‌اندازی تیم سریع بود. وظایف، مرحله‌ها و یادآوری‌ها از روز اول قابل اتکا بودند.",
  },
  {
    name: "مهتاب شریفی",
    role: "مدیر موفقیت مشتری",
    avatar:
      "/block-media/shadcnblocks/block/avatar-1.webp",
    content:
      "تاریخچه تعامل و سلامت حساب در یک جا جمع شد. تیم ما حساب‌های در خطر را زودتر می‌بیند و نرخ تمدید به‌طور محسوسی بهتر شده. هماهنگی فروش و پشتیبانی بدون رفت‌وبرگشت ایمیل انجام می‌شود.",
  },
  {
    name: "پارسا موسوی",
    role: "تحلیل‌گر فروش",
    avatar:
      "/block-media/shadcnblocks/block/avatar-6.webp",
    content:
      "کیفیت داده و گزارش‌ها در سطح بالایی است. پلتفرم مقیاس تیم در حال رشد را پوشش می‌دهد و ساخت قیف و Cohort آسان شده. برای تیم RevOps ما تحول‌آفرین بوده. مستندات روشن، راه‌اندازی تحلیل‌گران جدید را سریع کرده است.",
  },
  {
    name: "فاطمه رستمی",
    role: "مدیر بازاریابی",
    avatar:
      "/block-media/shadcnblocks/block/avatar-3.webp",
    content:
      "اتوماسیون بازاریابی تحول‌آفرین بود. نرخ تعامل ما ۶۰٪ افزایش یافت و بازگشت سرمایه کمپین‌ها به‌طور محسوسی بهتر شد. بینش‌های پلتفرم درک ما از مخاطب واجد شرایط را عمیق‌تر کرده است.",
  },
];

interface Testimonial8Props {
  testimonials?: Array<{
    name: string;
    role: string;
    avatar: string;
    content: string;
  }>;
  className?: string;
}

const Testimonial8 = ({
  testimonials = defaultTestimonials,
  className,
}: Testimonial8Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="flex flex-col items-center gap-4">
          <h2 className="text-center text-3xl font-semibold lg:text-2xll">
            تیم‌های فروش چه می‌گویند
          </h2>
          <p className="text-muted-foreground lg:text-xl">
            ببینید مشتریان چگونه با سامانه مدیریت ارتباط با مشتری ما نرخ تبدیل و بهره‌وری فروش را بالا
            می‌برند
          </p>
        </div>
        <div className="relative mt-14 w-full after:absolute after:inset-x-0 after:-bottom-2 after:h-96 after:bg-linear-to-t after:from-background">
          <div
            className="columns-1 gap-5 md:columns-2 lg:columns-3"
            style={{ columnGap: "20px" }}
          >
            {testimonials.map((testimonial, idx) => {
              // Reorder for masonry flow: distribute across columns first
              const displayIdx = (idx % 3) * 3 + Math.floor(idx / 3);

              return (
                <div
                  key={idx}
                  className={cn(
                    "mb-5",
                    displayIdx > 3 && displayIdx <= 5 && "hidden md:block",
                    displayIdx > 5 && "hidden lg:block",
                  )}
                >
                  <Card className="break-inside-avoid p-5">
                    <div className="flex gap-4 leading-5">
                      <Avatar className="size-10 rounded-full ring-1 ring-input">
                        <AvatarImage
                          src={testimonial.avatar}
                          alt={testimonial.name}
                        />
                      </Avatar>
                      <div className="mb-2 text-sm">
                        <p className="font-semibold text-foreground">
                          {testimonial.name}
                        </p>
                        <p className="text-muted-foreground">
                          {testimonial.role}
                        </p>
                      </div>
                    </div>

                    <div className="leading-7 text-foreground/60">
                      <q>{testimonial.content}</q>
                    </div>
                  </Card>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
};

export { Testimonial8 };