import { Sparkle } from "lucide-react";

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

interface Testimonial20Props {
  className?: string;
}

const Testimonial20 = ({ className }: Testimonial20Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="relative grid border border-dashed md:grid-cols-2">
          <div className="border-dashed px-6 py-12 md:border-r md:px-12 md:py-16">
            <p className="mb-6 text-center font-medium md:text-xl">
              «CRM از انتظارات ما فراتر رفت. راه‌اندازی سریع بود و{" "}
              <strong className="font-bold">نرخ تبدیل لید ۳۸٪ بالا رفت!</strong>»
            </p>
            <div className="flex flex-col items-center justify-center gap-4 md:flex-row">
              <Avatar className="size-14 rounded-full border">
                <AvatarImage
                  src="/block-media/shadcnblocks/block/avatar-1.webp"
                  alt="سارا احمدی"
                />
              </Avatar>
              <p className="text-center font-medium md:text-start">
                سارا احمدی، مدیر فروش
              </p>
            </div>
          </div>
          <div className="px-6 py-12 text-center md:px-12 md:py-16">
            <p className="mb-6 text-center font-medium md:text-xl">
              «تیم در پیاده‌سازی
              <strong className="mx-1 font-bold">اتوماسیون بازاریابی</strong>
              عالی عمل کرد. مسیریابی لید از روز اول دقیق بود.»
            </p>
            <div className="flex flex-col items-center justify-center gap-4 md:flex-row">
              <Avatar className="size-14 rounded-full border">
                <AvatarImage
                  src="/block-media/shadcnblocks/block/avatar-2.webp"
                  alt="مازیار رضایی"
                />
              </Avatar>
              <p className="text-center font-medium md:text-start">
                مازیار رضایی، مدیر عملیات درآمد
              </p>
            </div>
          </div>
          <Sparkle
            strokeWidth={1}
            className="absolute -top-[9px] -left-[9px] size-4 fill-primary"
          />
          <Sparkle
            strokeWidth={1}
            className="absolute -top-2 -right-2 size-4 fill-primary"
          />
          <Sparkle
            strokeWidth={1}
            className="absolute -right-2 -bottom-2 size-4 fill-primary"
          />
          <Sparkle
            strokeWidth={1}
            className="absolute -bottom-2 -left-2 size-4 fill-primary"
          />
        </div>
      </div>
    </section>
  );
};

export { Testimonial20 };