reui-blocks/blocks/testimonial8.tsx

"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:
      "تجربه توسعه استثنایی. اتصال هوشمند مستندسازی شده و SDKها پایدار و قابل اعتمادند.",
  },
  {
    name: "مهتاب شریفی",
    role: "طراح",
    avatar:
      "/block-media/shadcnblocks/block/avatar-1.webp",
    content:
      "سیستم طراحی و کتابخانه کامپوننت، فرایند طراحی ما را ساده کرد. اکنون رابط‌های یکدست و زیبا را بسیار سریع‌تر می‌سازیم و همکاری بین طراحی و توسعه هرگز این‌قدر روان نبوده. کنترل نسخه برای دارایی‌های طراحی و فرایند تحویل بدون اصطکاک، تکرارهای بی‌پایان رفت و برگشت را حذف کرده است.",
  },
  {
    name: "پارسا موسوی",
    role: "توسعه‌دهنده",
    avatar:
      "/block-media/shadcnblocks/block/avatar-6.webp",
    content:
      "کیفیت کد و عملکرد در سطح بالایی است. پلتفرم مقیاس ما را بدون مشکل پوشش می‌دهد و ابزارهای توسعه، دیباگ و بهینه‌سازی را آسان کرده‌اند. برای تیم توسعه ما تحول‌آفرین بوده. مستندات جامع و پشتیبانی فعال جامعه، راه‌اندازی اولیه توسعه‌دهندگان جدید را بسیار روان کرده است.",
  },
  {
    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 };