reui-blocks/blocks/feature215.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;
  poster: string;
  Icon: LucideIcon;
  title: string;
  link: string;
  summary: string;
}

const CARDS: CarouselCardItem[] = [
  {
    id: "design-system",
    video: "/block-media/shadcnblocks/block/video-1.mp4",
    poster: "/block-media/shadcnblocks/block/placeholder-1.svg",
    Icon: Eye,
    title: "همکاری فروش و بازاریابی",
    link: "#",
    summary:
      "دلایل از دست دادن معامله را تحلیل کنید و استراتژی فروش را بهبود دهید.",
  },
  {
    id: "framework-agnostic",
    video: "/block-media/shadcnblocks/block/video-2.mp4",
    poster: "/block-media/shadcnblocks/block/placeholder-2.svg",
    Icon: Languages,
    title: "اولویت‌بندی سرنخ",
    link: "#",
    summary:
      "با یادآورهای هوشمند و اولویت‌بندی سرنخ، زمان تیم روی معاملات با احتمال بیشتر صرف می‌شود و چرخه فروش کوتاه‌تر می‌شود.",
  },
  {
    id: "interactive",
    video: "/block-media/shadcnblocks/block/landscape.mp4",
    poster: "/block-media/shadcnblocks/block/placeholder-3.svg",
    Icon: AudioLines,
    title: "قالب پیشنهاد فروش",
    link: "#",
    summary:
      "چرخه فروش را از سرنخ تا قرارداد در یک مسیر مشخص پیش ببرید. مدیران می‌توانند گلوگاه‌ها را ببینند و تیم‌ها با اولویت درست روی معاملات ارزشمند تمرکز کنند.",
  },
  {
    id: "minimal-setup",
    video: "/block-media/shadcnblocks/block/video-1.mp4",
    poster: "/block-media/shadcnblocks/block/placeholder-4.svg",
    Icon: ListMinus,
    title: "ردیابی کووت",
    link: "#",
    summary:
      "اهداف فردی و تیمی را شفاف تعریف کنید و پیشرفت را لحظه‌ای ببینید.",
  },
  {
    id: "accessibility",
    video: "/block-media/shadcnblocks/block/video-2.mp4",
    poster: "/block-media/shadcnblocks/block/placeholder-5.svg",
    Icon: ScanFace,
    title: "تحلیل باخت معامله",
    link: "#",
    summary:
      "سرنخ‌های با بالاترین احتمال تبدیل را در بالای صف کار روزانه قرار دهید.",
  },
  {
    id: "documentation",
    video: "/block-media/shadcnblocks/block/landscape.mp4",
    poster: "/block-media/shadcnblocks/block/placeholder-6.svg",
    Icon: TextQuote,
    title: "هدف‌گذاری تیمی",
    link: "#",
    summary:
      "پیشنهادهای حرفه‌ای را در چند دقیقه بسازید و زمان آماده‌سازی را کم کنید.",
  },
  {
    id: "typescript",
    video: "/block-media/shadcnblocks/block/video-1.mp4",
    poster: "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
    Icon: Captions,
    title: "اتوماسیون پیگیری",
    link: "#",
    summary:
      "وضعیت هر پیشنهاد را از ارسال تا امضا بدون پیگیری دستی دنبال کنید.",
  },
];

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

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

interface Feature215Props {
  className?: string;
}

const Feature215 = ({ className }: Feature215Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn(
        "w-full max-w-full overflow-x-hidden py-20 sm:py-32",
        className,
      )}
    >
      <div className="container min-w-0 px-4 sm:px-6">
        <div className="mx-auto mb-10 flex max-w-[47.5rem] flex-col gap-4 sm:mb-16 sm:gap-6">
          <h2 className="text-center text-xl font-semibold text-balance xl:text-2xll">
            پیش‌بینی درآمد را دقیق‌تر کنید
          </h2>
          <p className="text-center text-base text-pretty text-muted-foreground sm:text-lg md:text-xl">
            الگوهای موفق فروش را در کل سازمان تکرار کنید. داده لحظه‌ای نشان
            می‌دهد کدام مرحله بیشترین افت تبدیل را دارد.
          </p>
        </div>

        <Carousel
          opts={{
            align: "start",
            direction: "rtl",
          }}
          className="w-full min-w-0 max-w-full"
        >
          <CarouselContent className="py-2 sm:py-4">
            {CARDS.map((item) => (
              <CarouselItem
                key={item.id}
                className="min-w-0 basis-[85%] sm:basis-1/2 lg:basis-1/3"
              >
                <CarouselCard {...item} />
              </CarouselItem>
            ))}
          </CarouselContent>
          <div className="mt-6 flex w-full min-w-0 justify-center gap-3 sm:mt-8 sm:gap-4">
            <CarouselPrevious className="static size-10 translate-y-0 sm:size-12 rtl:rotate-180" />
            <CarouselNext className="static size-10 translate-y-0 sm:size-12 rtl:rotate-180" />
          </div>
        </Carousel>
      </div>
    </section>
  );
};

export { Feature215 };