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 {
  Card,
  CardContent,
  CardDescription,
  CardTitle,
} from "@/components/ui/card";
import { cn } from "@/lib/utils";

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

const CARDS: GridCardItem[] = [
  {
    id: "design-system",
    video: "/block-media/shadcnblocks/block/video-1.mp4",
    poster: "/block-media/shadcnblocks/block/placeholder-1.svg",
    Icon: Eye,
    title: "ردیابی UTM",
    link: "#",
    summary: "عنوان، تصویر یا فراخوان را تست کنید و برنده را سریع پیدا کنید.",
  },
  {
    id: "framework-agnostic",
    video: "/block-media/shadcnblocks/block/video-2.mp4",
    poster: "/block-media/shadcnblocks/block/placeholder-2.svg",
    Icon: Languages,
    title: "گزارش ROI",
    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: "ببینید کدام کانال بیشترین سرنخ با کیفیت را می‌آورد.",
  },
];

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

  return (
    <a
      href={link}
      className="group block min-w-0"
      onMouseEnter={() => {
        void videoRef.current?.play();
      }}
      onMouseLeave={() => {
        if (videoRef.current) {
          videoRef.current.pause();
          videoRef.current.currentTime = 0;
        }
      }}
    >
      <Card className="h-full min-w-0 gap-0 overflow-hidden border-0 bg-muted py-0! shadow-none ring-0 transition-all duration-200 hover:shadow-lg">
        <CardContent className="min-w-0 p-4 sm:p-6">
          <div className="relative mb-4 min-w-0">
            <div className="aspect-video w-full overflow-hidden rounded-md bg-background">
              <video
                ref={videoRef}
                src={video}
                poster={poster}
                className="block size-full max-w-full object-cover object-center"
                controls={false}
                muted
                loop
                playsInline
                preload="metadata"
                aria-label={title}
              />
            </div>
          </div>
          <div className="flex min-w-0 flex-col gap-2 text-start">
            <CardTitle className="flex items-center gap-2 text-lg font-medium text-pretty 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(
        "w-full max-w-full overflow-x-hidden py-24",
        className,
      )}
    >
      <div className="container min-w-0 px-4 sm:px-6">
        <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 min-w-0 gap-6 md:grid-cols-2 lg:grid-cols-3">
          {CARDS.map((item) => (
            <GridCard key={item.id} {...item} />
          ))}
        </div>
      </div>
    </section>
  );
};

export { Feature215a };