"use client";

import React, { useState } from "react";

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

const tweets = [
  {
    id: 1,
    author: "امیر محمدی",
    tag: "amir_mohammadi",
    avatar:
      "/block-media/shadcnblocks/block/avatar-5.webp",
    content: (
      <p className="text-sm text-muted-foreground">
        تازه برای مدیریت لید و قیف فروش به
        <a href="#" className="mx-1 text-blue-600">
          @ری یو آی
        </a>
        مهاجرت کردیم. پیگیری فرصت‌ها شفاف و پاسخ به لیدها خیلی سریع‌تر شده!
      </p>
    ),
    excerpt: (
      <p className="line-clamp-1 font-medium md:text-xl">
        تازه برای مدیریت لید و قیف فروش به
        <a href="#" className="mx-1 text-blue-600">
          @ری یو آی
        </a>
        مهاجرت کردیم
      </p>
    ),
  },
  {
    id: 2,
    author: "نیلوفر حسینی",
    tag: "niloofar_h",
    avatar:
      "/block-media/shadcnblocks/block/avatar-7.webp",
    content: (
      <p className="text-sm text-muted-foreground">
        باورنکردنی است
        <a href="#" className="mx-1 text-blue-600">
          @ری یو آی
        </a>
        چقدر هماهنگی فروش و بازاریابی را ساده کرده. کمپین به لید، لید به
        فرصت — بدون داده‌های پراکنده!
      </p>
    ),
    excerpt: (
      <p className="line-clamp-1 font-medium md:text-xl">
        باورنکردنی است
        <a href="#" className="mx-1 text-blue-600">
          @ری یو آی
        </a>
        چقدر هماهنگی فروش و بازاریابی
      </p>
    ),
  },
  {
    id: 3,
    author: "پارسا موسوی",
    tag: "parsa_mousavi",
    avatar:
      "/block-media/shadcnblocks/block/avatar-6.webp",
    content: (
      <p className="text-sm text-muted-foreground">
        طرفدار
        <a href="#" className="mx-1 text-blue-600">
          @ری یو آی
        </a>
        هستم. هر هفته ساعت‌ها از ورود دستی داده و پیگیری ایمیل کم شده. اگر هنوز
        سامانه مدیریت ارتباط با مشتری ندارید، دیر کرده‌اید!
      </p>
    ),
    excerpt: (
      <p className="line-clamp-1 font-medium md:text-xl">
        طرفدار
        <a href="#" className="mx-1 text-blue-600">
          @ری یو آی
        </a>
         هر هفته ساعت‌ها
      </p>
    ),
  },
  {
    id: 4,
    author: "مهسا نوری",
    tag: "mahsa_nouri",
    avatar:
      "/block-media/shadcnblocks/block/avatar-1.webp",
    content: (
      <p className="text-sm text-muted-foreground">
        تشکر از
        <a href="#" className="mx-1 text-blue-600">
          @ری یو آی
        </a>
        برای داشبورد قیف و نرخ تبدیل بلادرنگ. پیش‌بینی درآمد تیم فروش ما دقیق‌تر
        شده!
      </p>
    ),
    excerpt: (
      <p className="line-clamp-1 font-medium md:text-xl">
        تشکر از
        <a href="#" className="mx-1 text-blue-600">
          @ری یو آی
        </a>
        برای داشبورد قیف
      </p>
    ),
  },
  {
    id: 5,
    author: "علی رحمانی",
    tag: "ali_rahmani",
    avatar:
      "/block-media/shadcnblocks/block/avatar-5.webp",
    content: (
      <p className="text-sm text-muted-foreground">
        یک ماه است از
        <a href="#" className="mx-1 text-blue-600">
          @ری یو آی
        </a>
        استفاده می‌کنم و نحوه مدیریت حساب‌های کلیدی و تمدید قرارداد تیم فروش از
        راه دور را متحول کرده!
      </p>
    ),
    excerpt: (
      <p className="line-clamp-1 font-medium md:text-xl">
        یک ماه است از
        <a href="#" className="mx-1 text-blue-600">
          @ری یو آی
        </a>
        استفاده می‌کنم
      </p>
    ),
  },
  {
    id: 6,
    author: "سارا احمدی",
    tag: "sara_ahmadi",
    avatar:
      "/block-media/shadcnblocks/block/avatar-3.webp",
    content: (
      <p className="text-sm text-muted-foreground">
        تجربه فوق‌العاده با
        <a href="#" className="mx-1 text-blue-600">
          @ری یو آی
        </a>
        برای اتوماسیون کمپین‌های ورودی. آخرین لانچ ما با نمره‌دهی لید، نرخ
        واجد شرایط بودن خیلی بالاتر رفت.
      </p>
    ),
    excerpt: (
      <p className="line-clamp-1 font-medium md:text-xl">
        تجربه فوق‌العاده با
        <a href="#" className="mx-1 text-blue-600">
          @ری یو آی
        </a>
        برای اتوماسیون کمپین
      </p>
    ),
  },
  {
    id: 7,
    author: "رؤیا کاظمی",
    tag: "roya_kazemi",
    avatar:
      "/block-media/shadcnblocks/block/avatar-7.webp",
    content: (
      <p className="text-sm text-muted-foreground">
        ممنون از
        <a href="#" className="mx-1 text-blue-600">
          @ری یو آی
        </a>
        برای قالب‌های پیگیری فروش. تیم ما در چند هفته نرخ پاسخ‌دهی را ۳۰٪ افزایش
        داد!
      </p>
    ),
    excerpt: (
      <p className="line-clamp-1 font-medium md:text-xl">
        ممنون از
        <a href="#" className="mx-1 text-blue-600">
          @ری یو آی
        </a>
        برای قالب‌های پیگیری
      </p>
    ),
  },
  {
    id: 8,
    author: "سمیرا جعفری",
    tag: "samira_jafari",
    avatar:
      "/block-media/shadcnblocks/block/avatar-7.webp",
    content: (
      <p className="text-sm text-muted-foreground">
        چند ماه است از
        <a href="#" className="mx-1 text-blue-600">
          @ری یو آی
        </a>
        استفاده می‌کنم. این سامانه مدیریت ارتباط با مشتری برای هماهنگی تیم‌های فروش توزیع‌شده تحول‌آفرین
        است. شدیداً توصیه می‌کنم!
      </p>
    ),
    excerpt: (
      <p className="line-clamp-1 font-medium md:text-xl">
        چند ماه است از
        <a href="#" className="mx-1 text-blue-600">
          @ری یو آی
        </a>
        استفاده می‌کنم
      </p>
    ),
  },
];

interface Testimonial16Props {
  className?: string;
}

const Testimonial16 = ({ className }: Testimonial16Props) => {
  const [expandedTweetId, setExpandedTweetId] = useState<number | null>(null);

  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="grid gap-8 lg:grid-cols-2">
          <h2 className="max-w-md text-3xl font-medium lg:text-[42px] lg:leading-tight">
            ببینید سامانه مدیریت ارتباط با مشتری ما چطور فروش را متحول می‌کند
          </h2>
          <div>
            <p className="mb-4 text-xl font-medium text-muted-foreground">
              ببینید تیم‌های فروش چه می‌گویند
            </p>
            <Separator />
            {tweets.map((tweet) => (
              <React.Fragment key={tweet.id}>
                <div className="select-none">
                  <div
                    onClick={() =>
                      setExpandedTweetId((prevId) =>
                        prevId === tweet.id ? null : tweet.id,
                      )
                    }
                    className="cursor-pointer"
                  >
                    <div
                      className={cn(
                        "overflow-hidden transition-all duration-500",
                        expandedTweetId === tweet.id
                          ? "max-h-[500px]"
                          : "max-h-20",
                      )}
                    >
                      {expandedTweetId === tweet.id ? (
                        <div className="py-4">
                          <div className="mb-3 flex gap-4 leading-5">
                            <Avatar className="size-9 rounded-full ring-1 ring-input">
                              <AvatarImage
                                src={tweet.avatar}
                                alt={tweet.author}
                              />
                            </Avatar>
                            <div className="text-sm">
                              <p className="font-medium">{tweet.author}</p>
                              <p className="text-muted-foreground">
                                {tweet.tag}
                              </p>
                            </div>
                          </div>
                          {tweet.content}
                        </div>
                      ) : (
                        <div className="py-4 transition-colors hover:bg-muted">
                          <div className="flex gap-3 px-2">
                            <Avatar className="h-full w-8">
                              <AvatarImage
                                src={tweet.avatar}
                                alt={tweet.author}
                              />
                            </Avatar>
                            <div>{tweet.excerpt}</div>
                          </div>
                        </div>
                      )}
                    </div>
                  </div>
                </div>
                <Separator />
              </React.Fragment>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};
export { Testimonial16 };