"use client";

import { Star } from "lucide-react";
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";

interface DataItem {
  name: string;
  avatar: string;
  content: string;
  margin?: string;
}

const DATA: DataItem[] = [
  {
    name: "امیرحسین قاسمی",
    avatar:
      "/block-media/shadcnblocks/block/avatar-5.webp",
    content:
      "این CRM کاملاً قیف فروش ما را متحول کرد. پیگیری لید و فرصت‌ها شفاف شده و نرخ پاسخ‌دهی تیم بالا رفته.",
    margin: "mt-6",
  },
  {
    name: "نیلوفر حسینی",
    avatar:
      "/block-media/shadcnblocks/block/avatar-3.webp",
    content:
      "توالی‌های پیگیری ایمیل نجات‌بخش بودند. کمک کردند بدون افت کیفیت، لیدهای گرم را سریع‌تر ببندیم.",
  },
  {
    name: "پارسا موسوی",
    avatar:
      "/block-media/shadcnblocks/block/avatar-6.webp",
    content:
      "از وقتی اتوماسیون بازاریابی را فعال کردیم، کیفیت لید ورودی و نرخ واجد شرایط بودن جهش کرده.",
    margin: "mt-4",
  },
  {
    name: "سارا احمدی",
    avatar:
      "/block-media/shadcnblocks/block/avatar-7.webp",
    content:
      "داشبورد قیف باورنکردنی است. بینش لازم برای پیش‌بینی درآمد و کوچینگ نمایندگان را می‌دهد.",
  },
  {
    name: "مازیار رضایی",
    avatar:
      "/block-media/shadcnblocks/block/avatar-5.webp",
    content:
      "یکپارچه‌سازی با ایمیل و پشتیبانی بی‌نقص بود. مسیریابی لید از روز اول دقیق کار کرد.",
  },
  {
    name: "مهسا نوری",
    avatar:
      "/block-media/shadcnblocks/block/avatar-1.webp",
    content:
      "مدیریت حساب‌های کلیدی و تمدید قرارداد در یک نما، هماهنگی تیم فروش را آسان کرده.",
  },
  {
    name: "فاطمه رستمی",
    avatar:
      "/block-media/shadcnblocks/block/avatar-7.webp",
    content:
      "کمپین‌های خودکار یکنواختی پیام را حفظ کردند و هزینه جذب لید واجد شرایط کاهش یافت.",
  },
  {
    name: "مهتاب شریفی",
    avatar:
      "/block-media/shadcnblocks/block/avatar-3.webp",
    content:
      "نمره‌دهی لید اولویت‌بندی فرصت‌ها را شفاف کرد؛ نمایندگان روی معاملات درست تمرکز می‌کنند.",
  },
  {
    name: "کاوه مرادی",
    avatar:
      "/block-media/shadcnblocks/block/avatar-4.webp",
    content:
      "گزارش نرخ تبدیل در هر مرحله قیف، گلوگاه‌های فروش را سریع مشخص کرد.",
  },
];

interface RewardCardProps {
  icon: string;
  title: string;
  subtitle: string;
}

const RewardCard = ({ icon, title, subtitle }: RewardCardProps) => (
  <div className="flex flex-col gap-2 rounded-xl bg-muted p-2 px-4 shadow-sm">
    <div className="flex flex-row items-center gap-2">
      <div className="rounded-full bg-background p-2">
        <img
          src={icon}
          alt={title}
          width={40}
          height={40}
          className="rounded-full"
        />
      </div>
      <div className="flex flex-col">
        <span className="text-sm font-medium">{title}</span>
        <span className="text-sm text-muted-foreground">{subtitle}</span>
      </div>
    </div>
  </div>
);

interface Testimonial24Props {
  className?: string;
}

const Testimonial24 = ({ className }: Testimonial24Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="flex flex-col items-center gap-6 px-4 sm:px-8">
          <h2 className="mb-2 text-center text-3xl font-semibold lg:text-2xll">
            ببینید چرا تیم‌های فروش <br /> CRM ما را انتخاب می‌کنند
          </h2>

          <div className="mt-4 flex flex-col items-center gap-4 sm:flex-row">
            <RewardCard
              icon="/block-media/shadcnblocks/block/block-1.svg"
              title="برترین برای فروش"
              subtitle="انتخاب ۱۴۲"
            />

            <RewardCard
              icon="/block-media/shadcnblocks/block/block-2.svg"
              title="برترین برای CRM"
              subtitle="انتخاب ۱۴۱"
            />
          </div>
        </div>

        <div className="relative mt-14 w-full px-4 after:absolute after:inset-x-0 after:-bottom-2 after:h-96 after:bg-linear-to-t after:from-background sm:px-8 md:px-16 lg:px-32">
          <ResponsiveMasonry
            columnsCountBreakPoints={{ 350: 1, 768: 2, 1024: 3 }}
          >
            <Masonry gutter="20px" columnsCount={3}>
              {DATA.map((testimonial, idx) => (
                <Card
                  key={idx}
                  className={cn(
                    "rounded-xl p-5 shadow-sm",
                    idx > 3 && idx <= 5 && "hidden md:block",
                    idx > 5 && "hidden lg:block",
                    testimonial.margin,
                  )}
                >
                  <div className="mb-4 flex gap-1">
                    {[...Array(5)].map((_, i) => (
                      <Star key={i} className="h-4 w-4 fill-primary" />
                    ))}
                  </div>

                  <div className="mt-4 text-sm text-foreground">
                    <q>{testimonial.content}</q>
                  </div>

                  <div className="mt-4 flex items-center gap-2">
                    <Avatar className="size-9 rounded-full ring-1 ring-muted">
                      <AvatarImage
                        src={testimonial.avatar}
                        alt={testimonial.name}
                      />
                    </Avatar>
                    <div className="text-sm">
                      <p className="font-medium">{testimonial.name}</p>
                    </div>
                  </div>
                </Card>
              ))}
            </Masonry>
          </ResponsiveMasonry>
        </div>
      </div>
    </section>
  );
};

export { Testimonial24 };