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

interface Testimonial4Props {
  className?: string;
}

const Testimonial4 = ({ className }: Testimonial4Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="flex flex-col gap-6">
          <div className="grid grid-cols-1 items-stretch gap-x-0 gap-y-4 lg:grid-cols-3 lg:gap-4">
            <img
              src="/block-media/shadcnblocks/block/placeholder-1.svg"
              alt="تصویر مشتری"
              className="h-72 w-full rounded-md object-cover lg:h-auto"
            />
            <Card className="col-span-2 flex items-center justify-center p-6">
              <div className="flex flex-col gap-4">
                <q className="text-xl font-medium lg:text-3xl">
                  این سامانه مدیریت ارتباط با مشتری نحوه مدیریت فروش ما را تغییر داد. تیم در زمان کوتاه‌تری
                  فرصت‌های بیشتری می‌بندد و پیش‌بینی درآمد دقیق‌تر شده است.
                </q>
                <div className="flex flex-col items-start">
                  <p>سارا احمدی</p>
                  <p className="text-muted-foreground">مدیرعامل، شرکت نوآوران</p>
                </div>
              </div>
            </Card>
          </div>
          <div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
            <Card>
              <CardContent className="px-6 pt-6 leading-7 text-foreground/70">
                <q>
                  گزارش‌های فروش و داشبورد تبدیل، تصمیم‌گیری هفتگی ما را از حدس به
                  داده واقعی تبدیل کرده‌اند.
                </q>
              </CardContent>
              <CardFooter>
                <div className="flex gap-4 leading-5">
                  <Avatar className="size-9 rounded-full ring-1 ring-input">
                    <AvatarImage
                      src="/block-media/shadcnblocks/block/avatar-2.webp"
                      alt="پارسا موسوی"
                    />
                  </Avatar>
                  <div className="text-sm">
                    <p className="font-medium">پارسا موسوی</p>
                    <p className="text-muted-foreground">تحلیل‌گر فروش</p>
                  </div>
                </div>
              </CardFooter>
            </Card>
            <Card>
              <CardContent className="px-6 pt-6 leading-7 text-foreground/70">
                <q>
                  اتوماسیون پیگیری لید باعث شد هیچ فرصت گرمی سرد نشود و نرخ پاسخ
                  تیم فروش دو برابر شود.
                </q>
              </CardContent>
              <CardFooter>
                <div className="flex gap-4 leading-5">
                  <Avatar className="size-9 rounded-full ring-1 ring-input">
                    <AvatarImage
                      src="/block-media/shadcnblocks/block/avatar-3.webp"
                      alt="رؤیا کاظمی"
                    />
                  </Avatar>
                  <div className="text-sm">
                    <p className="font-medium">رؤیا کاظمی</p>
                    <p className="text-muted-foreground">مدیر موفقیت مشتری</p>
                  </div>
                </div>
              </CardFooter>
            </Card>
            <Card>
              <CardContent className="px-6 pt-6 leading-7 text-foreground/70">
                <q>
                  بازاریابی و فروش روی یک منبع واحد کار می‌کنند؛ تخصیص لید شفاف
                  است و گزارش کمپین دیگر جدا از سامانه مدیریت ارتباط با مشتری نیست.
                </q>
              </CardContent>
              <CardFooter>
                <div className="flex gap-4 leading-5">
                  <Avatar className="size-9 rounded-full ring-1 ring-input">
                    <AvatarImage
                      src="/block-media/shadcnblocks/block/avatar-3.webp"
                      alt="مهسا نوری"
                    />
                  </Avatar>
                  <div className="text-sm">
                    <p className="font-medium">مهسا نوری</p>
                    <p className="text-muted-foreground">مدیر بازاریابی</p>
                  </div>
                </div>
              </CardFooter>
            </Card>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Testimonial4 };