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

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

const CARDS: HorizontalCardItem[] = [
  {
    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:
      "مسیر کار را با کشیدن و رها کردن بسازید و بدون وابستگی به تیم فنی راه بیندازید.",
  },
];

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

  return (
    <div
      className="group flex min-w-0 flex-col gap-6 border-b border-border py-8 last:border-b-0 md:flex-row md:items-center"
      onMouseEnter={() => {
        void videoRef.current?.play();
      }}
      onMouseLeave={() => {
        if (videoRef.current) {
          videoRef.current.pause();
          videoRef.current.currentTime = 0;
        }
      }}
    >
      <div className="min-w-0 md:w-1/3">
        <div className="aspect-video w-full overflow-hidden rounded-lg bg-muted">
          <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-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 text-pretty">{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("w-full max-w-full overflow-x-hidden py-20", className)}
    >
      <div className="container min-w-0 px-4 sm:px-6">
        <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 min-w-0">
          {CARDS.map((item) => (
            <HorizontalCard key={item.id} {...item} />
          ))}
        </div>
      </div>
    </section>
  );
};

export { Feature215b };