reui-blocks/blocks/feature215a.tsx

"use client";

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

import { AspectRatio } from "@/components/ui/aspect-ratio";
import {
  Card,
  CardContent,
  CardDescription,
  CardTitle,
} from "@/components/ui/card";
import { cn } from "@/lib/utils";

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

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

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

  return (
    <a
      href={link}
      className="group block"
      onMouseEnter={() => {
        if (videoRef.current) {
          videoRef.current.play();
        }
      }}
      onMouseLeave={() => {
        if (videoRef.current) {
          videoRef.current.pause();
          videoRef.current.currentTime = 0;
        }
      }}
    >
      <Card className="h-full bg-muted transition-all duration-200 hover:shadow-lg">
        <CardContent>
          <div className="relative mb-4">
            <AspectRatio ratio={16 / 9} className="overflow-hidden rounded-md">
              <video
                src={video}
                className="block size-full object-cover object-center"
                ref={videoRef}
                controls={false}
                muted
                aria-label={title}
              />
            </AspectRatio>
          </div>
          <div className="flex flex-col gap-2 text-start">
            <CardTitle className="flex items-center gap-2 text-lg font-medium text-foreground">
              <Icon className="size-6 shrink-0 rounded-sm bg-primary stroke-primary-foreground p-1" />
              {title}
            </CardTitle>
            <CardDescription className="text-sm leading-relaxed text-pretty">
              {summary}
            </CardDescription>
          </div>
        </CardContent>
      </Card>
    </a>
  );
};

interface Feature215aProps {
  className?: string;
}

const Feature215a = ({ className }: Feature215aProps) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-24", className)}>
      <div className="container">
        <div className="mx-auto mb-16 flex max-w-[47.5rem] flex-col gap-4 text-center">
          <h2 className="text-3xl font-bold text-balance xl:text-2xll">
            کمپین‌هایی بسازید که واقعاً تبدیل می‌شوند
          </h2>
          <p className="text-lg text-pretty text-muted-foreground">
            کمپین‌ها، محتوا و عملکرد کانال‌ها در یک پنل واحد دیده می‌شود. تیم بازاریابی سریع‌تر تست می‌کند، بهینه می‌کند و ROI هر فعالیت را شفاف گزارش می‌دهد.
          </p>
        </div>
        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
          {CARDS.map((item) => (
            <GridCard key={item.id} {...item} />
          ))}
        </div>
      </div>
    </section>
  );
};

export { Feature215a };