reui-blocks/blocks/testimonial30.tsx

"use client";

import { useCallback, useEffect, useRef, useState } from "react";

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { Button } from "@/components/ui/button";
import { Progress } from "@/components/ui/progress";
import { cn } from "@/lib/utils";

const testimonials = [
  {
    company: "Descript",
    logo: "/block-media/shadcnblocks/block/logos/company/icons/descript.svg",
    wordmark:
      "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-2.svg",
    author: "سمیه اکبری",
    role: "مدیر فروش، Descript",
    avatar:
      "/block-media/shadcnblocks/block/photos/portraits/Elegant%20Woman%20Portrait.png",
    quote:
      "«این سامانه مدیریت ارتباط با مشتری روز فروش تیم را متحول کرد. پیگیری لید شفاف است و یادآورهای فرصت‌ها نمایندگان را روی معاملات گرم نگه می‌دارد.»",
    outcome: (
      <p className="text-muted-foreground">
        بستن{" "}
        <span className="font-medium text-foreground">
          ۱۲ معامله بزرگ در ۲ ماه
        </span>
      </p>
    ),
  },
  {
    company: "Ramp",
    logo: "/block-media/shadcnblocks/block/logos/company/icons/ramp.svg",
    wordmark:
      "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-4.svg",
    author: "امیرحسین قاسمی",
    role: "مدیر بازاریابی، Ramp",
    avatar:
      "/block-media/shadcnblocks/block/photos/portraits/joseph-gonzalez-iFgRcqHznqg-unsplash.jpg",
    quote:
      "«بالاخره دید واضحی از قیف و نرخ تبدیل داریم. نمره‌دهی لید برای انتقال به فروش تحول‌آفرین بود.»",
    outcome: (
      <p className="text-muted-foreground">
        افزایش نرخ تبدیل{" "}
        <span className="font-medium text-foreground">۴۰٪ در یک فصل</span>
      </p>
    ),
  },
  {
    company: "Watershed",
    logo: "/block-media/shadcnblocks/block/logos/company/icons/watershed.svg",
    wordmark:
      "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-6.svg",
    author: "مهتاب شریفی",
    role: "مدیر عملیات درآمد، Watershed",
    avatar:
      "/block-media/shadcnblocks/block/photos/portraits/good-faces-xmSWVeGEnJw-unsplash.jpg",
    quote:
      "«اتوماسیون پیگیری و گزارش قیف هر هفته ساعت‌ها ذخیره می‌کند. به‌جای ورود دستی داده، روی بستن معامله تمرکز می‌کنیم.»",
    outcome: (
      <p className="text-muted-foreground">
        بیش از ۳۰ ساعت صرفه‌جویی،{" "}
        <span className="font-medium text-foreground">
          کاهش ۶۰٪ کار دستی فروش
        </span>
      </p>
    ),
  },
];

interface Testimonial30Props {
  className?: string;
}

const Testimonial30 = ({ className }: Testimonial30Props) => {
  const [currentIndex, setCurrentIndex] = useState(0);
  const [progress, setProgress] = useState(0);
  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);

  const startTimer = useCallback(() => {
    if (timerRef.current) {
      clearInterval(timerRef.current);
    }

    timerRef.current = setInterval(() => {
      setCurrentIndex((prevIndex) => (prevIndex + 1) % testimonials.length);
      setProgress(0);
    }, 5000);
  }, []);

  useEffect(() => {
    startTimer();

    return () => {
      if (timerRef.current) {
        clearInterval(timerRef.current);
      }
    };
  }, [startTimer]);

  useEffect(() => {
    const progressInterval = setInterval(() => {
      setProgress((prevProgress) => {
        if (prevProgress >= 100) {
          return 0;
        }
        return prevProgress + 2;
      });
    }, 100);

    return () => clearInterval(progressInterval);
  }, [currentIndex]);

  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="mb-12 flex flex-col items-start justify-between gap-6 md:flex-row md:items-center">
          <h1 className="text-3xl font-semibold md:text-xl">
            مورد علاقه تیم‌های فروش و بازاریابی
          </h1>
          <Button variant="outline">گزارش‌های موفقیت را بخوانید</Button>
        </div>
        <Accordion
          type="single"
          collapsible
          value={currentIndex.toString()}
          onValueChange={(value) => {
            if (value) {
              const index = parseInt(value);
              setCurrentIndex(index);
              setProgress(0);
              startTimer();
            }
          }}
        >
          {testimonials.map((testimonial, index) => (
            <AccordionItem
              key={index}
              value={index.toString()}
              className="items-center"
            >
              <AccordionTrigger className="hover:no-underline">
                <div className="flex flex-1 items-center gap-4">
                  <div className="flex max-w-3xs flex-1 items-center gap-4">
                    <span className="flex size-8 items-center justify-center rounded-lg bg-primary">
                      <img
                        src={testimonial.logo}
                        alt={`لوگوی ${testimonial.company}`}
                        className="h-4 invert dark:invert-0"
                      />
                    </span>
                    <p className="text-lg font-medium tracking-tight">
                      {testimonial.company}
                    </p>
                  </div>
                  <div className="hidden text-base font-normal md:block">
                    {testimonial.outcome}
                  </div>
                </div>
              </AccordionTrigger>
              <AccordionContent className="flex flex-col gap-12 px-0 py-4 md:flex-row md:items-center md:py-9 lg:px-12">
                <img
                  src={testimonial.avatar}
                  alt={testimonial.author}
                  width={208}
                  height={208}
                  className="aspect-square max-w-52 rounded-lg object-cover"
                />
                <div className="flex flex-1 flex-col items-start">
                  <img
                    src={testimonial.wordmark}
                    alt={`لوگوی ${testimonial.company}`}
                    className="h-6 dark:invert"
                  />
                  <p className="font-hedvigLettersSerif mt-6 max-w-2xl text-xl text-foreground">
                    {testimonial.quote}
                  </p>
                  <div className="flex w-full justify-between">
                    <div>
                      <p className="mt-3 text-lg text-sm font-medium">
                        {testimonial.author}
                      </p>
                      <p className="text-xs text-muted-foreground">
                        {testimonial.role}
                      </p>
                    </div>
                    <Progress value={progress} className="h-1 w-16 self-end" />
                  </div>
                </div>
              </AccordionContent>
            </AccordionItem>
          ))}
        </Accordion>
      </div>
    </section>
  );
};

export { Testimonial30 };