reui-blocks/blocks/industries3.tsx

import { ArrowUpRight } from "lucide-react";

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

interface Project {
  year: string;
  name: string;
  description: string;
  imageSrc: string;
  imageAlt: string;
  url: string;
}

interface Industries3Props {
  labels: string[];
  projects: Project[];
  className?: string;
}

const Industries3 = ({
  className,
  labels = ["سال", "صنعت", "توضیحات"],
  projects = [
    {
      year: "/۲۲۴",
      name: "/فناوری مصرفی",
      description: "راه‌حل‌های نوآورانه در الکترونیک مصرفی و دستگاه‌های هوشمند",
      imageSrc:
        "/block-media/shadcnblocks/block/photos/artistic-portrait-glitch-yqp6z.png",
      imageAlt: "پلتفرم اتوماسیون",
      url: "https://ShadcnBlocks/blocks",
    },
    {
      year: "/۲۲۳",
      name: "/زیست‌فناوری",
      description:
        "تحقیقات پیشرفته زیست‌فناوری و توسعه داروسازی",
      imageSrc:
        "/block-media/shadcnblocks/block/photos/alvin-engler-bIhpiQA009k-unsplash.jpg",
      imageAlt: "داشبورد تحلیل داده",
      url: "https://ShadcnBlocks/blocks",
    },
    {
      year: "/۲۲۳",
      name: "/امنیت سایبری",
      description: "راه‌حل امنیتی در سطح سازمانی برای حفاظت از داده‌ها",
      imageSrc:
        "/block-media/shadcnblocks/block/photos/futuristic-device-design-qcufu.png",
      imageAlt: "پلتفرم امنیتی",
      url: "https://ShadcnBlocks/blocks",
    },
    {
      year: "/۲۲۲",
      name: "/فناوری سلامت",
      description: "سامانه یکپارچه مدیریت بهداشت با قابلیت پزشکی از راه دور",
      imageSrc:
        "/block-media/shadcnblocks/block/photos/israel-andrade-YI_9SivVt_s-unsplash.jpg",
      imageAlt: "پلتفرم پزشکی",
      url: "https://ShadcnBlocks/blocks",
    },
  ],
}: Industries3Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("min-h-screen bg-muted py-16", className)}>
      <div className="container mx-auto flex flex-col gap-8 px-8">
        {/* Header Row */}
        <div className="grid grid-cols-2 gap-8 text-start font-medium text-muted-foreground md:grid-cols-3">
          <div className="order-2 ps-10 text-sm md:order-1 lg:ps-10">
            {labels[0]}
          </div>
          <div className="order-1 ps-5 text-sm md:order-2 md:ps-0">
            {labels[1]}
          </div>
          <div className="hidden text-sm md:order-3 lg:block">{labels[2]}</div>
        </div>

        {/* Project Rows */}
        <div className="space-y-0">
          {projects.map((project, index) => (
            <a href={project.url} key={index}>
              <div className="group relative mb-2 flex min-h-[100px] flex-col justify-center md:min-h-0 lg:mb-0">
                <div className="relative z-3 grid grid-cols-2 gap-8 transition-all duration-300 md:grid-cols-3 lg:hover:rounded-lg lg:hover:font-medium lg:hover:text-secondary lg:hover:shadow-lg">
                  {/* Year Column */}
                  <div className="order-2 flex items-center md:order-1">
                    <span className="ps-10 text-xs font-medium text-secondary opacity-100 lg:opacity-0 lg:group-hover:opacity-100">
                      {project.year}
                    </span>
                  </div>

                  {/* نام صنعت و توضیحات */}
                  <div className="order-1 col-span-1 grid grid-cols-2 gap-8 border-b border-muted-foreground/20 p-5 transition-all duration-300 md:order-2 md:col-span-2 md:p-10 md:pe-0 md:ps-0 lg:group-hover:border-transparent">
                    {/* نام صنعت */}
                    <div className="flex items-center">
                      <span className="ms-0 ps-0 text-xl font-medium text-secondary transition-all duration-300 md:text-xl lg:text-foreground lg:group-hover:ps-2 lg:group-hover:text-secondary">
                        {project.name}
                      </span>
                    </div>

                    {/* Description and Button */}
                    <div className="hidden items-center justify-between gap-4 text-start lg:flex lg:pe-10">
                      <span className="text-sm text-secondary/80 opacity-100 lg:opacity-0 lg:group-hover:opacity-100">
                        {project.description}
                      </span>

                      {/* Action Button */}
                      <button
                        type="button"
                        aria-label="مشاهده جزئیات"
                        className="flex translate-x-full items-center justify-center rounded-full bg-primary p-1 text-secondary opacity-100 shadow-md transition-all duration-300 ease-out rtl:-translate-x-full lg:opacity-0 lg:group-hover:translate-x-0 lg:group-hover:opacity-100"
                      >
                        <ArrowUpRight className="rtl:rotate-180" />
                      </button>
                    </div>
                  </div>
                </div>

                {/* Background Image */}
                <img
                  src={project.imageSrc}
                  alt={project.imageAlt}
                  className="absolute inset-0 z-1 h-full w-full object-cover opacity-100 transition-all duration-300 lg:opacity-0 lg:group-hover:opacity-100"
                />

                {/* Overlay */}
                <div className="absolute inset-0 z-2 bg-black/20 opacity-100 transition-all duration-300 lg:opacity-0 lg:group-hover:opacity-100" />
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Industries3 };