"use client";

import type { Easing } from "framer-motion";
import { motion } from "framer-motion";
import { Plus } from "lucide-react";

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

const easeTransition: Easing = [0.25, 0.1, 0.25, 1];

interface Industry {
  name: string;
  description: string;
  image: string;
  imageAlt: string;
  url: string;
}

interface Industries1Props {
  title: string;
  industryLabel: string;
  industries: Industry[];
  className?: string;
}

const Industries1 = ({
  className,
  title = "صنایع",
  industryLabel = "نگاه کلی",
  industries = [
    {
      name: "بهداشت و درمان",
      description:
        "راه‌حل‌های پزشکی نوآورانه و بسترهای سلامت دیجیتال برای بهبود نتایج درمان بیماران و ساده‌سازی ارائه خدمات بهداشتی.",
      image:
        "/block-media/shadcnblocks/block/placeholder-1.svg",
      imageAlt: "تصویر فناوری بهداشت و درمان",
      url: "https://ShadcnBlocks/blocks",
    },
    {
      name: "فین‌تک",
      description:
        "راه‌حل‌های پیشرفته فناوری مالی که بانکداری، پرداخت و مدیریت سرمایه‌گذاری را برای عصر دیجیتال متحول می‌کند.",
      image:
        "/block-media/shadcnblocks/block/placeholder-2.svg",
      imageAlt: "تصویر فناوری مالی",
      url: "https://ShadcnBlocks/blocks",
    },
    {
      name: "تجارت الکترونیک",
      description:
        "پلتفرم‌های جامع خرده‌فروشی آنلاین و بازارگاه‌ها برای افزایش فروش و ارتقای تجربه مشتری.",
      image:
        "/block-media/shadcnblocks/block/placeholder-3.svg",
      imageAlt: "تصویر پلتفرم تجارت الکترونیک",
      url: "https://ShadcnBlocks/blocks",
    },
    {
      name: "آموزش",
      description:
        "سامانه‌های نوین مدیریت یادگیری و فناوری آموزشی برای توانمندسازی دانش‌آموزان و مدرسان در سراسر جهان.",
      image:
        "/block-media/shadcnblocks/block/placeholder-4.svg",
      imageAlt: "تصویر فناوری آموزشی",
      url: "https://ShadcnBlocks/blocks",
    },
  ],
}: Industries1Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-16", className)}>
      <div className="container">
        <h2 className="mb-8 text-3xl font-medium text-foreground">{title}</h2>
        <div className="grid grid-cols-1 gap-1 lg:grid-cols-2 xl:grid-cols-4">
          {industries.map((industry, index) => (
            <a href={industry.url} key={index}>
              <motion.div
                key={index}
                className="group relative overflow-hidden bg-muted"
                whileHover="hover"
                initial="initial"
              >
                {/* Default state: Image and heading */}
                <motion.div
                  variants={{
                    initial: {
                      opacity: 1,
                      pointerEvents: "auto",
                      clipPath: "inset(0% 0% 0% 0%)",
                    },
                    hover: {
                      opacity: 0,
                      pointerEvents: "none",
                      clipPath: "inset(0% 0% 100% 0%)",
                    },
                  }}
                  transition={{ duration: 0.4, ease: easeTransition }}
                  className="relative z-0 flex h-full min-h-120 flex-col items-center justify-center lg:min-h-144 xl:min-h-112"
                >
                  <div className="flex h-full justify-center">
                    <img
                      src={industry.image}
                      alt={industry.imageAlt}
                      className="h-full w-full object-cover"
                    />
                  </div>
                  <h3 className="absolute bottom-10 text-lg font-medium text-foreground">
                    {industry.name}
                  </h3>
                </motion.div>

                {/* Black overlay - slides up from bottom */}
                <motion.div
                  className="absolute inset-0 z-10 bg-black"
                  variants={{
                    initial: { y: "100%" },
                    hover: { y: "0%" },
                  }}
                  transition={{ duration: 0.4, ease: easeTransition }}
                  style={{ willChange: "transform" }}
                />

                {/* Hover state: Description */}
                <motion.div
                  variants={{
                    initial: { opacity: 0, y: 20 },
                    hover: { opacity: 1, y: 0 },
                  }}
                  transition={{ duration: 0.4, ease: easeTransition }}
                  className="absolute inset-0 z-20 flex min-h-120 items-center justify-center p-8 text-start text-white lg:min-h-144 xl:min-h-112"
                >
                  <div className="space-y-3">
                    <p className="font-medium opacity-90">{industryLabel}:</p>
                    <p>{industry.description}</p>
                  </div>
                </motion.div>

                {/* Plus button */}
                <motion.div
                  className="absolute top-4 start-4 z-30"
                  variants={{
                    initial: { opacity: 0.7, rotate: 0 },
                    hover: { opacity: 1, rotate: 90 },
                  }}
                  transition={{ duration: 0.4, ease: easeTransition }}
                >
                  <div className="relative rounded-full p-2">
                    <div className="absolute inset-0 rounded-full bg-muted-foreground/20" />
                    <motion.div
                      className="absolute inset-0 rounded-full bg-muted-foreground"
                      variants={{
                        initial: { opacity: 0 },
                        hover: { opacity: 1 },
                      }}
                      transition={{ duration: 0.4, ease: easeTransition }}
                    />
                    <Plus className="relative z-10 size-4" />
                  </div>
                </motion.div>
              </motion.div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Industries1 };