reui-blocks/blocks/projects15b.tsx

"use client";

import { AudioLines } from "lucide-react";
import type React from "react";
import { useEffect, useRef, useState } from "react";

import { cn } from "@/lib/utils";

interface Projects15bProps {
  className?: string;
}

interface VideoSectionProps {
  videoSrc: string;
  thumbnailSrc: string;
  studioName: string;
  projectTitle: string;
}

const VideoSection: React.FC<VideoSectionProps> = ({
  videoSrc,
  thumbnailSrc,
  studioName,
  projectTitle,
}) => {
  const videoRef = useRef<HTMLVideoElement>(null);
  const [isHovered, setIsHovered] = useState(false);

  useEffect(() => {
    if (videoRef.current) {
      videoRef.current.pause();
      videoRef.current.currentTime = 0;
    }
  }, []);

  useEffect(() => {
    if (videoRef.current) {
      if (isHovered) {
        videoRef.current.play();
      } else {
        videoRef.current.pause();
        videoRef.current.currentTime = 0;
      }
    }
  }, [isHovered]);

  const handleMouseEnter = () => {
    setIsHovered(true);
  };

  const handleMouseLeave = () => {
    setIsHovered(false);
  };

  return (
    <div
      className="group relative h-[50vh] w-full cursor-pointer overflow-hidden md:h-[60vh]"
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
    >
      {/* Thumbnail Image */}
      <img
        src={thumbnailSrc}
        alt={projectTitle}
        className={`absolute inset-0 h-full w-full object-cover transition-opacity duration-700 ease-in-out ${isHovered ? "opacity-0" : "opacity-100"
          }`}
      />

      {/* Video */}
      <video
        ref={videoRef}
        className={`absolute inset-0 h-full w-full object-cover transition-opacity duration-700 ease-in-out ${isHovered ? "opacity-100" : "opacity-0"
          }`}
        muted
        loop
        playsInline
        preload="metadata"
      >
        <source src={videoSrc} type="video/mp4" />
        مرورگر شما از پخش ویدیو پشتیبانی نمی‌کند.
      </video>

      <div className="absolute inset-0 bg-black/30 transition-all duration-500 group-hover:bg-black/20" />

      <div className="absolute inset-0 bottom-12 flex items-end">
        <div className="px-6 text-start text-white sm:px-8 md:px-12 lg:px-16 xl:px-20">
          <p className="mb-2 text-xs font-medium tracking-wider opacity-80 sm:mb-3 sm:text-sm md:mb-4 md:text-base">
            {studioName}
          </p>
          <h2 className="max-w-md text-2xl font-light tracking-tight sm:text-3xl md:text-4xl lg:max-w-lg">
            {projectTitle}
          </h2>
        </div>
      </div>
    </div>
  );
};

const Projects15b: React.FC<Projects15bProps> = ({ className }) => {
  const videoSections = [
    {
      thumbnailSrc:
        "/block-media/shadcnblocks/block/photos/jeremy-bishop-iEjCQtcsVPY-unsplash.jpg",
      videoSrc:
        "/block-media/shadcnblocks/block/3571264-hd_1280_720_30fps.mp4",
      studioName: "مریدیان لبز",
      projectTitle: "تعامل‌های اثیری",
    },

    {
      thumbnailSrc:
        "/block-media/shadcnblocks/block/photos/carles-rabada-f7UprkNqi08-unsplash.jpg",
      videoSrc:
        "/block-media/shadcnblocks/block/1448735-hd_1366_720_24fps.mp4",
      studioName: "زنیث دیجیتال",
      projectTitle: "نکسوس استودیو",
    },
    {
      thumbnailSrc:
        "/block-media/shadcnblocks/block/photos/sam-wermut-FiUuNWxnb3k-unsplash.jpg",
      videoSrc:
        "/block-media/shadcnblocks/block/19348567-hd_1280_720_25fps.mp4",
      studioName: "پریزم لبز",
      projectTitle: "مرزهای نو",
    },
    {
      thumbnailSrc:
        "/block-media/shadcnblocks/block/photos/ines-alvarez-fdez-VjRc6HDXJ5s-unsplash.jpg",
      videoSrc:
        "/block-media/shadcnblocks/block/9882072-hd_1280_720_30fps.mp4",
      studioName: "سمفونی تعامل",
      projectTitle: "تعامل‌های روان",
    },
  ];

  return (
    <section dir="rtl" lang="fa" className={cn("min-h-screen bg-background", className)}>
      {/* All Sections in 2 Column Grid */}
      <div className="grid w-full grid-cols-1 md:grid-cols-2">
        {/* Header Section */}
        <div className="relative h-[50vh] bg-background md:h-[60vh]">
          <div className="absolute inset-0 bottom-12 flex items-end">
            <div className="px-6 text-start text-foreground sm:px-8 md:px-12 lg:px-16 xl:px-20">
              <h1 className="mb-4 max-w-1/2 text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl lg:mb-8 lg:text-8xl">
                کاوش در پروژه‌های ما
              </h1>

              <div className="flex items-center">
                <p className="me-4 text-sm font-medium tracking-wider opacity-80">
                  کارهای ما
                </p>
                <div className="opacity-60">
                  <AudioLines className="h-6 w-6" />
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Video Sections */}
        {videoSections.map((section, index) => (
          <VideoSection
            key={index}
            videoSrc={section.videoSrc}
            thumbnailSrc={section.thumbnailSrc}
            studioName={section.studioName}
            projectTitle={section.projectTitle}
          />
        ))}
      </div>
    </section>
  );
};

export { Projects15b };