reui-blocks/blocks/feature215b.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 { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

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

const CARDS: HorizontalCardItem[] = [
  {
    id: "design-system",
    video: "/block-media/shadcnblocks/block/video-1.mp4",
    Icon: Eye,
    title: "لاگ اجرا",
    link: "#",
    summary:
      "با هر رویداد مثل ثبت فرم یا تغییر وضعیت، اقدام بعدی را خودکار اجرا کنید.",
  },
  {
    id: "framework-agnostic",
    video: "/block-media/shadcnblocks/block/video-2.mp4",
    Icon: Languages,
    title: "قالب آماده",
    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 HorizontalCard = ({
  video,
  Icon,
  title,
  link,
  summary,
}: HorizontalCardItem) => {
  const videoRef = useRef<HTMLVideoElement | null>(null);

  return (
    <div
      className="group flex flex-col gap-6 border-b border-border py-8 last:border-b-0 md:flex-row md:items-center"
      onMouseEnter={() => {
        if (videoRef.current) {
          videoRef.current.play();
        }
      }}
      onMouseLeave={() => {
        if (videoRef.current) {
          videoRef.current.pause();
          videoRef.current.currentTime = 0;
        }
      }}
    >
      <div className="md:w-1/3">
        <AspectRatio ratio={16 / 9} className="overflow-hidden rounded-lg">
          <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-1 flex-col gap-4 text-start md:ps-6">
        <div className="flex items-center gap-3">
          <div className="flex size-8 shrink-0 rounded-md bg-primary">
            <Icon className="m-auto size-4 text-primary-foreground" />
          </div>
          <h3 className="text-xl font-semibold">{title}</h3>
        </div>

        <p className="leading-relaxed text-pretty text-muted-foreground">
          {summary}
        </p>

        <div>
          <Button variant="outline" size="sm" asChild>
            <a href={link}>بیشتر بدانید</a>
          </Button>
        </div>
      </div>
    </div>
  );
};

interface Feature215bProps {
  className?: string;
}

const Feature215b = ({ className }: Feature215bProps) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-20", className)}>
      <div className="container">
        <div className="mx-auto mb-12 max-w-3xl text-center">
          <h2 className="mb-4 text-3xl font-bold text-balance xl:text-2xll">
            فرایندها را استاندارد و سریع کنید
          </h2>
          <p className="text-lg text-pretty text-muted-foreground">
            اتوماسیون را در کل سازمان یکپارچه کنید
          </p>
        </div>

        <div className="mx-auto max-w-4xl">
          {CARDS.map((item) => (
            <HorizontalCard key={item.id} {...item} />
          ))}
        </div>
      </div>
    </section>
  );
};

export { Feature215b };