reui-blocks/blocks/feature214.tsx

"use client";

import type { LucideIcon } from "lucide-react";
import {
  AudioLines,
  Captions,
  Eye,
  Languages,
  ListMinus,
  ScanFace,
  TextQuote,
} from "lucide-react";
import { useRef } from "react";

import {
  Card,
  CardContent,
  CardDescription,
  CardTitle,
} from "@/components/ui/card";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel";
import { cn } from "@/lib/utils";

interface CarouselCardItem {
  id: string;
  video: string;
  Icon: LucideIcon;
  title: string;
  link: string;
  summary: string;
}

const CARDS: CarouselCardItem[] = [
  {
    id: "code-analysis",
    video: "/block-media/shadcnblocks/block/video-1.mp4",
    Icon: Eye,
    title: "پروفایل ۳۶۰ درجه مشتری",
    link: "#",
    summary:
      "تمام تعاملات، سرنخ‌ها و قراردادها در یک فضای کاری متمرکز جمع می‌شود. تیم فروش بدون جابجایی بین ابزارها، سریع‌تر پیش‌بینی می‌کند و معاملات بیشتری می‌بندد.",
  },
  {
    id: "multi-language",
    video: "/block-media/shadcnblocks/block/video-6.mp4",
    Icon: Languages,
    title: "اتوماسیون مراحل فروش",
    link: "#",
    summary:
      "تاریخچه تماس، قرارداد و تیکت هر مشتری را در یک صفحه ببینید و بدون جستجو تصمیم بگیرید.",
  },
  {
    id: "refactoring",
    video: "/block-media/shadcnblocks/block/video-7-640_360_30fps.mp4",
    Icon: AudioLines,
    title: "پیش‌بینی درآمد",
    link: "#",
    summary:
      "از اولین تماس تا تمدید قرارداد، هر مرحله فروش قابل ردیابی است. گزارش‌های لحظه‌ای به مدیران کمک می‌کند گلوگاه‌ها را قبل از از دست دادن درآمد شناسایی کنند.",
  },
  {
    id: "code-cleanup",
    video: "/block-media/shadcnblocks/block/video-5.mp4",
    Icon: ListMinus,
    title: "یادآور پیگیری هوشمند",
    link: "#",
    summary:
      "پروفایل یکپارچه مشتری، تاریخچه تماس و وضعیت معامله را همزمان نشان می‌دهد. تیم‌ها با دید مشترک، هماهنگ‌تر پیش می‌روند و نرخ تبدیل بالاتر می‌رود.",
  },
  {
    id: "security-scanner",
    video: "/block-media/shadcnblocks/block/video-1.mp4",
    Icon: ScanFace,
    title: "تقسیم خودکار سرنخ",
    link: "#",
    summary:
      "تمام تعاملات، سرنخ‌ها و قراردادها در یک فضای کاری متمرکز جمع می‌شود. تیم فروش بدون جابجایی بین ابزارها، سریع‌تر پیش‌بینی می‌کند و معاملات بیشتری می‌بندد.",
  },
  {
    id: "documentation",
    video: "/block-media/shadcnblocks/block/video-6.mp4",
    Icon: TextQuote,
    title: "گزارش عملکرد فروش",
    link: "#",
    summary:
      "وظایف تکراری فروش را خودکار کنید و تمرکز تیم را روی بستن معامله بگذارید.",
  },
  {
    id: "code-suggestions",
    video: "/block-media/shadcnblocks/block/video-7-640_360_30fps.mp4",
    Icon: Captions,
    title: "مدیریت قرارداد",
    link: "#",
    summary:
      "از اولین تماس تا تمدید قرارداد، هر مرحله فروش قابل ردیابی است. گزارش‌های لحظه‌ای به مدیران کمک می‌کند گلوگاه‌ها را قبل از از دست دادن درآمد شناسایی کنند.",
  },
];

const CarouselCard = ({ video, Icon, title, link, summary }: CarouselCardItem) => {
  const videoRef = useRef<HTMLVideoElement | null>(null);

  return (
    <a
      href={link}
      className="group block h-full"
      onMouseEnter={() => {
        if (videoRef.current) {
          videoRef.current.play();
        }
      }}
      onMouseLeave={() => {
        if (videoRef.current) {
          videoRef.current.pause();
          videoRef.current.currentTime = 0;
        }
      }}
    >
      <Card className="min-h-[39.75rem] bg-muted p-8 shadow-none transition-all group-hover:shadow-md">
        <CardContent className="p-0">
          <div className="relative">
            <div className="h-[20rem] w-full overflow-hidden rounded-[0.5rem]">
              <video
                src={video}
                className="block size-full object-cover object-center"
                ref={videoRef}
                controls={false}
                muted
                aria-label={title}
              />
            </div>
            <div className="absolute -start-2 -top-3 flex size-9 rounded-[0.5rem] bg-primary">
              <Icon className="m-auto size-4 stroke-primary-foreground" />
            </div>
          </div>
          <div className="mt-8 flex flex-col gap-2 text-start">
            <CardTitle className="text-xl leading-[130%] font-normal tracking-[-0.48px] text-foreground">
              {title}
            </CardTitle>
            <CardDescription className="text-lg leading-[150%] tracking-[-0.36px] text-pretty">
              {summary}
            </CardDescription>
          </div>
        </CardContent>
      </Card>
    </a>
  );
};

interface Feature214Props {
  className?: string;
}

const Feature214 = ({ className }: Feature214Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="mx-auto mb-16 flex max-w-[47.5rem] flex-col gap-6">
          <h2 className="text-center font-serif text-xl text-balance md:text-2xll xl:text-2xll">
            هر سرنخ را تا قرارداد دنبال کنید
          </h2>
          <p className="text-center text-xl text-pretty">
            پروفایل یکپارچه مشتری، تاریخچه تماس و وضعیت معامله را همزمان نشان می‌دهد. تیم‌ها با دید مشترک، هماهنگ‌تر پیش می‌روند و نرخ تبدیل بالاتر می‌رود.
          </p>
        </div>
        <Carousel
          opts={{
            align: "start",
            direction: "rtl",
          }}
          className="w-full"
        >
          <CarouselContent className="py-4">
            {CARDS.map((item) => (
              <CarouselItem
                key={item.id}
                className="basis-full sm:basis-1/2 lg:basis-1/3 xl:basis-1/4"
              >
                <CarouselCard {...item} />
              </CarouselItem>
            ))}
          </CarouselContent>
          <div className="mt-8 flex w-full justify-end gap-4">
            <CarouselPrevious className="static size-12" />
            <CarouselNext className="static size-12" />
          </div>
        </Carousel>
      </div>
    </section>
  );
};

export { Feature214 };