import { Star } from "lucide-react";

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

const testimonials = [
  {
    id: "testimonial-1",
    text: "در یک هفته کل پایپ‌لاین فروش را منتقل کردیم. شفافیت مراحل فوق‌العاده است و ماه‌ها سردرگمی گزارش‌دهی تمام شد. به‌شدت توصیه می‌کنم.",
    name: "سارا احمدی",
    company: "Vercel",
    avatar:
      "/block-media/shadcnblocks/block/avatar/avatar4.webp",
  },
  {
    id: "testimonial-2",
    text: "بالاخره CRM که با تیم فروش نمی‌جنگد. فقط کار می‌کند.",
    name: "مازیار رضایی",
    company: "Stripe",
    avatar:
      "/block-media/shadcnblocks/block/avatar/avatar1.webp",
  },
  {
    id: "testimonial-3",
    text: "اتوماسیون پیگیری فوق‌العاده است. پس از مهاجرت، زمان پاسخ به لید به کمتر از پانزده دقیقه رسید؛ چنین سرعتی تا به حال نداشتیم.",
    name: "مهسا نوری",
    company: "Shopify",
    avatar:
      "/block-media/shadcnblocks/block/avatar/avatar4.jpg",
  },
  {
    id: "testimonial-4",
    text: "زمان صرف‌شده برای ورود داده فروش را ۴۰٪ کاهش دادیم. داشبورد قیف فوق‌العاده شفاف است.",
    name: "امیرحسین قاسمی",
    company: "Linear",
    avatar:
      "/block-media/shadcnblocks/block/avatar/avatar1.jpg",
  },
  {
    id: "testimonial-5",
    text: "کمپین جذب لید را در دو روز به‌جای دو هفته هماهنگ کردیم. اتوماسیون بازاریابی از پیش برای تولید آماده است.",
    name: "نیلوفر حسینی",
    company: "Supabase",
    avatar:
      "/block-media/shadcnblocks/block/avatar/avatar6.webp",
  },
  {
    id: "testimonial-6",
    text: "به‌عنوان بنیان‌گذار تنها، این نزدیک‌ترین چیز به داشتن یک تیم عملیات فروش کامل است. هر مرحله هدفمند و قابل اندازه‌گیری است. ده‌ها CRM امتحان کردم و هیچ‌کدام به این نزدیک نیست.",
    name: "کاوه مرادی",
    company: "Resend",
    avatar:
      "/block-media/shadcnblocks/block/avatar/avatar3.webp",
  },
  {
    id: "testimonial-7",
    text: "بازاریابی ما به‌خاطر شفافیت تبدیل دوستش دارد. فروش ما به‌خاطر سرعت پیگیری. کم پیش می‌آید هر دو را در یک پلتفرم ببینید.",
    name: "مهتاب شریفی",
    company: "Clerk",
    avatar:
      "/block-media/shadcnblocks/block/avatar/avatar6.jpg",
  },
  {
    id: "testimonial-8",
    text: "کل فرآیند فروش سازمانی را با این CRM در کمتر از یک ماه بازسازی کردیم. فقط هم‌تراز کردن بازاریابی و فروش هفته‌ها از ما وقت می‌گرفت. مدیران فوراً بهبود پیش‌بینی را متوجه شدند.",
    name: "علی رحمانی",
    company: "Planetscale",
    avatar:
      "/block-media/shadcnblocks/block/avatar/avatar3.jpg",
  },
  {
    id: "testimonial-9",
    text: "بهترین سرمایه‌گذاری سال ما. در اولین ماه، افزایش تبدیل خودش را جبران کرد.",
    name: "سمیرا جعفری",
    company: "Railway",
    avatar:
      "/block-media/shadcnblocks/block/avatar/avatar9.jpg",
  },
];

interface Testimonial11Props {
  className?: string;
}

const Testimonial11 = ({ className }: Testimonial11Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn(
        "relative bg-muted bg-[linear-gradient(var(--muted)_0%,var(--background)_100%)] py-32",
        className,
      )}
    >
      <div className="container pb-16">
        <div className="flex flex-col items-start gap-12 sm:flex-row sm:items-center sm:justify-between sm:gap-32">
          <div className="flex flex-1 flex-col items-start text-start">
            <h2 className="my-6 text-xl font-semibold text-pretty lg:text-xl">
              مورد اعتماد تیم‌های فروش در سراسر جهان
            </h2>
            <p className="max-w-3xl text-muted-foreground lg:text-xl">
              هزاران تیم با CRM ما سریع‌تر می‌فروشند. این‌ها حرف آن‌هاست.
            </p>
          </div>
          <div className="block shrink-0 flex-row gap-12 sm:flex sm:flex-col lg:flex-row lg:gap-24">
            <div className="mr-8 mb-8 inline-block sm:mr-0 sm:mb-0">
              <img
                src="/block-media/shadcnblocks/block/logos/astro-wordmark.svg"
                alt="لوگوی Astro"
                className="mb-4 h-6 dark:invert"
              />
              <div className="flex items-center">
                <div className="mr-4 shrink-0 text-sm font-semibold">
                  ۴٫۸ / ۵
                </div>
                <div className="flex items-center gap-0.5">
                  <Star className="size-5 fill-primary stroke-none" />
                  <Star className="size-5 fill-primary stroke-none" />
                  <Star className="size-5 fill-primary stroke-none" />
                  <Star className="size-5 fill-primary stroke-none" />
                  <Star className="size-5 fill-primary stroke-none" />
                </div>
              </div>
            </div>
            <div className="mr-8 mb-8 inline-block sm:mr-0 sm:mb-0">
              <img
                src="/block-media/shadcnblocks/block/logos/vercel-wordmark.svg"
                alt="لوگوی میزبانی ابری"
                className="mb-6 h-4 dark:invert"
              />
              <div className="flex items-center">
                <div className="mr-4 shrink-0 text-sm font-semibold">
                  ۴٫۸ / ۵
                </div>
                <div className="flex items-center gap-0.5">
                  <Star className="size-5 fill-primary stroke-none" />
                  <Star className="size-5 fill-primary stroke-none" />
                  <Star className="size-5 fill-primary stroke-none" />
                  <Star className="size-5 fill-primary stroke-none" />
                  <Star className="size-5 fill-primary stroke-none" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="container mt-16 sm:mt-0">
        <div className="w-full columns-1 gap-4 sm:columns-2 lg:columns-3 lg:gap-6 [&>div:nth-child(n+5)]:hidden sm:[&>div:nth-child(n+5)]:inline-block sm:[&>div:nth-child(n+9)]:hidden lg:[&>div:nth-child(n+9)]:inline-block">
          {testimonials.map((testimonial) => (
            <div
              key={testimonial.id}
              className="mb-4 inline-block w-full rounded-lg border border-border bg-background p-6 lg:mb-6"
            >
              <div className="flex flex-col">
                <p className="mb-4 text-xs leading-relaxed text-muted-foreground">
                  &ldquo;{testimonial.text}&rdquo;
                </p>
                <div className="flex items-center gap-1 md:gap-2">
                  <Avatar className="size-8 md:size-10">
                    <AvatarImage src={testimonial.avatar} />
                    <AvatarFallback>{testimonial.name}</AvatarFallback>
                  </Avatar>
                  <div className="text-start">
                    <p className="text-xs font-medium">{testimonial.name}</p>
                    <p className="text-xs text-muted-foreground">
                      {testimonial.company}
                    </p>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
      <div className="pointer-events-none absolute bottom-0 left-0 hidden w-full sm:block sm:h-[16.875rem] sm:bg-[linear-gradient(transparent_0%,hsl(var(--accent))_100%)] lg:h-56"></div>
    </section>
  );
};

export { Testimonial11 };