import { Handshake } from "lucide-react";
import React from "react";

import { Badge } from "@/components/ui/badge";
import { Card } from "@/components/ui/card";
import { cn } from "@/lib/utils";

const testimonials = [
  {
    logo: {
      src: "/block-media/shadcnblocks/block/logos/astro-wordmark.svg",
      alt: "لوگوی Astro",
      width: 96.75,
      height: 36,
    },
    quote:
      "تیم فروش ما به اتوماسیون پیگیری وابسته است و این سامانه مدیریت ارتباط با مشتری آن را به سطح دیگری برد. هر لید گرم در مسیر درست و به‌موقع می‌رسد.",
    author: {
      name: "امیرحسین قاسمی",
      role: "مدیر فروش، Zerostatic",
      image:
        "/block-media/shadcnblocks/block/avatar-8.webp",
    },
  },
  {
    logo: {
      src: "/block-media/shadcnblocks/block/logos/figma-wordmark.svg",
      alt: "لوگوی طراحی رابط",
      width: 90.75,
      height: 36,
    },
    quote:
      "یکپارچه‌سازی تقویم فروش و نمره‌دهی لید، نمایندگان را روی فرصت‌های با اولویت بالا نگه می‌دارد.",
    author: {
      name: "نیلوفر حسینی",
      role: "مدیر بازاریابی، یادداشت‌برداری",
      image:
        "/block-media/shadcnblocks/block/avatar-3.webp",
    },
  },
  {
    logo: {
      src: "/block-media/shadcnblocks/block/logos/sketch-wordmark.svg",
      alt: "لوگوی طراحی برداری",
      width: 100.75,
      height: 36,
    },
    quote:
      "به سامانه‌ای برای مدیریت ارتباط با مشتری نیاز داشتیم که با رشد تیم فروش مقیاس شود؛ اتوماسیون کمپین و مسیریابی لید ساعت‌ها کار دستی را حذف کرد.",
    author: {
      name: "امیر محمدی",
      role: "مدیر عملیات درآمد، پیام‌رسان تیمی",
      image:
        "/block-media/shadcnblocks/block/avatar-2.webp",
    },
  },
  {
    logo: {
      src: "/block-media/shadcnblocks/block/logos/tailwind-wordmark.svg",
      alt: "لوگوی استایل‌دهی مدرن",
      width: 110.75,
      height: 36,
    },
    quote:
      "برای مدیریت قیف در تیم‌های فروش توزیع‌شده بی‌نهایت ارزشمند بود. یکپارچه‌سازی با ابزارهای موجود، راه‌اندازی را آسان کرد.",
    author: {
      name: "علی رحمانی",
      role: "سرپرست فروش سازمانی، مخزن کد",
      image:
        "/block-media/shadcnblocks/block/avatar-4.webp",
    },
  },
  {
    logo: {
      src: "/block-media/shadcnblocks/block/logos/vercel-wordmark.svg",
      alt: "لوگوی میزبانی ابری",
      width: 96.75,
      height: 36,
    },
    quote:
      "داشبورد قیف و نرخ تبدیل، بدون پیچیدگی اضافه، دید کاملی از سلامت فروش می‌دهد. گزارش‌گیری هفته‌ای ما نصف شده.",
    author: {
      name: "رؤیا کاظمی",
      role: "تحلیل‌گر عملیات فروش، طراحی رابط",
      image:
        "/block-media/shadcnblocks/block/avatar-7.webp",
    },
  },
  {
    logo: {
      src: "/block-media/shadcnblocks/block/logos/supabase-wordmark.svg",
      alt: "لوگوی پایگاه داده ابری",
      width: 96.75,
      height: 36,
    },
    quote:
      "یادآورهای پیگیری و زمان‌بندی تماس خودکار تیم را روی فرصت‌های فعال نگه می‌دارد. هماهنگی بازاریابی و فروش هم شفاف‌تر شده.",
    author: {
      name: "پارسا موسوی",
      role: "مدیر کمپین، Loom",
      image:
        "/block-media/shadcnblocks/block/avatar-6.webp",
    },
  },
];

interface Testimonial21Props {
  className?: string;
}

const Testimonial21 = ({ className }: Testimonial21Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="border-y">
        <div className="container flex flex-col gap-6 border-x py-4 max-lg:border-x lg:py-8">
          <Badge
            variant="outline"
            className="w-fit gap-1 bg-card px-3 text-sm font-normal tracking-tight shadow-sm"
          >
            <Handshake className="size-4" />
            <span>اعتماد تیم‌های فروش</span>
          </Badge>
          <h2 className="text-3xl leading-tight tracking-tight md:text-xl lg:text-2xll">
            رهبران فروش و بازاریابی چه می‌گویند
          </h2>
          <p className="max-w-[600px] tracking-[-0.32px] text-muted-foreground">
            مورد اعتماد تیم‌های سامانه مدیریت ارتباط با مشتری و عملیات درآمد شرکت‌های پیشرو
          </p>
        </div>
      </div>

      <div className="container mt-10 grid gap-8 sm:grid-cols-2 md:mt-14 lg:grid-cols-3">
        {testimonials.map((testimonial, index) => (
          <Card
            key={index}
            className="flex flex-col gap-6 rounded-md bg-background p-6 shadow-sm"
          >
            <img
              src={testimonial.logo.src}
              alt={testimonial.logo.alt}
              width={testimonial.logo.width}
              height={testimonial.logo.height}
              className="object-contain dark:invert"
            />

            <blockquote className="text-muted-foreground-subtle text-lg font-normal italic">{`«${testimonial.quote}»`}</blockquote>

            <div className="mt-auto flex items-center gap-4">
              <img
                src={testimonial.author.image}
                alt={`تصویر ${testimonial.author.name}`}
                width={48}
                height={48}
                className="rounded-full object-cover"
              />
              <div>
                <p className="text-lg tracking-[-0.36px]">
                  {testimonial.author.name}
                </p>
                <p className="text-muted-foreground">
                  {testimonial.author.role}
                </p>
              </div>
            </div>
          </Card>
        ))}
      </div>

      <div className="mt-12 h-8 w-full border-y md:h-12 lg:h-[112px]">
        <div className="container h-full w-full border-x"></div>
      </div>
    </section>
  );
};

export { Testimonial21 };