reui-blocks/blocks/testimonial29.tsx

"use client";

import AutoPlay from "embla-carousel-autoplay";
import React from "react";
import { useState } from "react";

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Card, CardContent } from "@/components/ui/card";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
} from "@/components/ui/carousel";
import { cn } from "@/lib/utils";

interface Testimonial29Props {
  className?: string;
}

const Testimonial29 = ({ className }: Testimonial29Props) => {
  const testimonials = [
    {
      name: "امیر محمدی",
      role: "مدیر خلاقیت @amir_m @ری یو آی_blocks",
      quote:
        "«این پلتفرم گردش کار خلاقانه ما را متحول کرد. ابزارها شهودی‌اند و نتیجه‌ها از انتظارمان فراتر بود.»",
      avatar:
        "/block-media/shadcnblocks/block/avatar-4.webp",
    },
    {
      name: "سارا احمدی",
      role: "طراح محصول @sara_ahmadi @ری یو آی_design",
      quote:
        "«طراحی محصول با این ابزار لذت‌بخش شده. سرعت iterate و همکاری با تیم هرگز این‌قدر روان نبوده.»",
      avatar:
        "/block-media/shadcnblocks/block/avatar-1.webp",
    },
    {
      name: "مازیار رضایی",
      role: "سازنده محصول ارشد @maziar_rezaei @ری یو آی_dev",
      quote:
        "«کد تمیز، API واضح و مستندات عالی. تجربه توسعه‌ای که واقعاً لذت می‌بری.»",
      avatar:
        "/block-media/shadcnblocks/block/avatar-2.webp",
    },
    {
      name: "نیلوفر حسینی",
      role: "سرپرست رابط کاربری/تجربه کاربری @niloofar_h @ری یو آی_ui",
      quote:
        "«رابط کاربری یکدست و زیباست. کاربران فوراً تفاوت کیفیت را احساس کردند.»",
      avatar:
        "/block-media/shadcnblocks/block/avatar-3.webp",
    },
    {
      name: "کاوه مرادی",
      role: "مدیر بازاریابی @kaveh_m @ری یو آی_marketing",
      quote:
        "«کمپین‌های ما با بینش‌های دقیق‌تر و زمان‌بندی بهتر اجرا می‌شوند. ROI به‌طور محسوسی بهتر شده.»",
      avatar:
        "/block-media/shadcnblocks/block/avatar-5.webp",
    },
    {
      name: "مهسا نوری",
      role: "مدیر فناوری @mahsa_nouri @ری یو آی_tech",
      quote:
        "«زیرساخت پایدار و مقیاس‌پذیر است. تیم فنی با اطمینان روی رشد تمرکز می‌کند.»",
      avatar:
        "/block-media/shadcnblocks/block/avatar-1.webp",
    },
  ];

  const [activeIndex, setActiveIndex] = useState(0);

  return (
    <section dir="rtl" lang="fa" className={cn("bg-background py-32", className)}>
      <div className="container flex flex-col items-center justify-center">
        <h1 className="mb-10 text-center text-2xll font-bold tracking-tighter text-foreground">
          نظرات مشتریان
        </h1>

        <Carousel
          className="mx-auto my-20 w-full max-w-3xl"
          opts={{
            loop: true,
          }}
          plugins={[AutoPlay({ playOnInit: true, delay: 2000 })]}
          setApi={(api) => {
            if (api) {
              api.on("select", () => {
                setActiveIndex(api.selectedScrollSnap());
              });
            }
          }}
        >
          <CarouselContent>
            {testimonials.map((testimonial, index) => (
              <CarouselItem key={index} className="flex flex-col items-center">
                <div className="flex w-full flex-col items-center gap-12">
                  <div className="relative flex size-30 items-center justify-center rounded-3xl bg-foreground p-2.5 shadow-xl">
                    <div className="flex size-full items-center justify-center rounded-2xl bg-background p-4">
                      <Avatar className="size-full">
                        <AvatarImage
                          src={testimonial.avatar}
                          alt={testimonial.name}
                          className="object-cover"
                        />
                        <AvatarFallback>
                          {testimonial.name.charAt(0)}
                        </AvatarFallback>
                      </Avatar>
                    </div>
                  </div>

                  <div className="relative space-y-2 text-center">
                    <h2 className="text-xl font-medium tracking-tighter text-foreground">
                      {testimonial.name}
                    </h2>
                    <p className="text-lg tracking-tight text-muted-foreground/70">
                      {testimonial.role}
                    </p>
                  </div>

                  <Card className="border-none shadow-none">
                    <CardContent className="p-0">
                      <p className="text-center text-xl tracking-tight text-foreground md:text-3xl">
                        {testimonial.quote}
                      </p>
                    </CardContent>
                  </Card>
                </div>
              </CarouselItem>
            ))}
          </CarouselContent>

          <div className="mt-20 flex justify-center">
            <div className="flex items-center gap-1">
              {testimonials.map((_, index) => (
                <div
                  key={index}
                  className={`h-1 rounded-full ${
                    index === activeIndex
                      ? "w-10 bg-foreground"
                      : "w-4 bg-muted"
                  }`}
                  aria-label={`رفتن به اسلاید ${index + 1}`}
                />
              ))}
            </div>
          </div>
        </Carousel>
      </div>
    </section>
  );
};

export { Testimonial29 };