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

const testimonials = [
  {
    name: "سارا احمدی",
    role: "مدیرعامل و بنیان‌گذار",
    avatar:
      "/block-media/shadcnblocks/block/avatar/avatar9.jpg",
    content:
      "با یک پایپ‌لاین شفاف، نرخ تبدیل فرصت‌ها ۳۵٪ بالا رفت. تیم فروش دیگر در اکسل و چت گم نمی‌شود و هر لید صاحب مشخص دارد.",
  },
  {
    name: "مازیار رضایی",
    role: "مدیر فروش",
    avatar:
      "/block-media/shadcnblocks/block/avatar/avatar7.jpg",
    content:
      "زمان پاسخ به لید از چند ساعت به کمتر از پانزده دقیقه رسید. اتوماسیون فروش، پیگیری‌های تکراری را حذف کرد و تمرکز تیم روی بستن معامله ماند.",
  },
  {
    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/avatar2.webp",
    content:
      "از اولین تماس تا تمدید قرارداد، تاریخچه کامل مشتری را می‌بینیم. نرخ حفظ مشتری بالا رفت چون ریسک‌ها را زودتر تشخیص می‌دهیم و قبل از قطع همکاری وارد عمل می‌شویم.",
  },
  {
    name: "پارسا موسوی",
    role: "تحلیل‌گر فروش",
    avatar:
      "/block-media/shadcnblocks/block/avatar/avatar11.jpg",
    content:
      "گزارش‌های آماده‌ی فروش، ساعت‌ها جمع‌آوری دستی داده را حذف کرد. حالا عملکرد تیم و منابع لید را هفتگی و با عدد واقعی مرور می‌کنیم.",
  },
  {
    name: "مهسا نوری",
    role: "مدیر جذب مشتری",
    avatar:
      "/block-media/shadcnblocks/block/avatar/avatar2.jpg",
    content:
      "امتیازدهی خودکار لید کمک کرد بودجه تبلیغات را روی کانال‌های واقعاً تبدیل‌شونده متمرکز کنیم. هزینه جذب مشتری پایین آمد.",
  },
  {
    name: "علی رحمانی",
    role: "مدیر عملیات فروش",
    avatar:
      "/block-media/shadcnblocks/block/avatar/avatar12.jpg",
    content:
      "بهره‌وری تیم فروش به‌طور محسوسی افزایش یافت. کمتر وقت صرف ورود داده می‌شود و بیشتر صرف مکالمه با مشتری واقعی.",
  },
];

interface Testimonial1Props {
  className?: string;
}

const Testimonial1 = ({ className }: Testimonial1Props) => {
  const getColumns = (count: number) => {
    return Array.from({ length: count }, (_, colIdx) =>
      testimonials.filter((_, i) => i % count === colIdx),
    );
  };

  const mobileColumns = getColumns(2);
  const tabletColumns = getColumns(3);
  const desktopColumns = getColumns(4);

  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn("overflow-hidden border-b pt-32", className)}
    >
      <div className="container">
        <div className="flex flex-col items-center gap-6">
          <Badge variant="outline">نظرات مشتریان</Badge>
          <h2 className="text-center text-3xl tracking-tight lg:text-2xll">
            فروش شفاف‌تر، از زبان تیم‌های واقعی
          </h2>
          <p className="text-center text-muted-foreground lg:text-lg">
            ببینید تیم‌های فروش و بازاریابی چگونه با CRM ما پایپ‌لاین،
            نرخ تبدیل و پیگیری لید را بهبود داده‌اند.
          </p>
        </div>
      </div>

      <div className="container mt-10 h-[450px] md:h-[500px] lg:h-[522px]">
        {/* Mobile: 2 columns */}
        <div className="flex gap-4 md:hidden">
          {mobileColumns.map((column, colIdx) => (
            <div
              key={colIdx}
              className={cn(
                "flex w-1/2 flex-col gap-4",
                colIdx === 1 && "mt-8",
              )}
            >
              {column.map((testimonial, idx) => (
                <Card key={idx}>
                  <CardContent className="px-4 text-sm leading-6 text-muted-foreground">
                    <q>{testimonial.content}</q>
                  </CardContent>
                  <CardFooter className="px-4">
                    <div className="flex gap-3 leading-5">
                      <Avatar className="size-8 rounded-full ring-1 ring-input">
                        <AvatarImage
                          src={testimonial.avatar}
                          alt={testimonial.name}
                        />
                      </Avatar>
                      <div className="text-xs">
                        <p className="font-medium">{testimonial.name}</p>
                        <p className="text-muted-foreground">
                          {testimonial.role}
                        </p>
                      </div>
                    </div>
                  </CardFooter>
                </Card>
              ))}
            </div>
          ))}
        </div>

        {/* Tablet: 3 columns */}
        <div className="hidden gap-4 md:flex lg:hidden">
          {tabletColumns.map((column, colIdx) => (
            <div
              key={colIdx}
              className={cn(
                "flex w-1/3 flex-col gap-4",
                colIdx === 1 && "mt-10",
                colIdx === 2 && "mt-20",
              )}
            >
              {column.map((testimonial, idx) => (
                <Card key={idx}>
                  <CardContent className="px-6 leading-7 text-muted-foreground">
                    <q>{testimonial.content}</q>
                  </CardContent>
                  <CardFooter>
                    <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>
                  </CardFooter>
                </Card>
              ))}
            </div>
          ))}
        </div>

        {/* Desktop: 4 columns */}
        <div className="hidden gap-4 lg:flex">
          {desktopColumns.map((column, colIdx) => (
            <div
              key={colIdx}
              className={cn(
                "flex w-1/4 flex-col gap-4",
                colIdx === 1 && "mt-10",
                colIdx === 2 && "mt-20",
              )}
            >
              {column.map((testimonial, idx) => (
                <Card key={idx}>
                  <CardContent className="px-6 leading-7 text-muted-foreground">
                    <q>{testimonial.content}</q>
                  </CardContent>
                  <CardFooter>
                    <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>
                  </CardFooter>
                </Card>
              ))}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Testimonial1 };