"use client";

import type { Variants } from "framer-motion";
import { motion } from "framer-motion";
import { ArrowUpRight } from "lucide-react";

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

const projects6Props = [
  {
    id: 1,
    category: "محصول",
    title: "پوما",
    image: "/block-media/shadcnblocks/block/lummi/bw1.jpeg",
    description: "رابط‌های جسورانه و الگوهای ماندگار.",
  },
  {
    id: 2,
    category: "فرهنگ",
    title: "پس از انتشار",
    image: "/block-media/shadcnblocks/block/lummi/bw5.jpeg",
    description: "چه انتشاری!",
  },
  {
    id: 3,
    category: "فرهنگ",
    title: "نمایش پروژه",
    image: "/block-media/shadcnblocks/block/lummi/bw2.jpeg",
    description: "ثبت تعامل‌های واقعی کاربر در محیط محصول.",
  },
  {
    id: 4,
    category: "وب",
    title: "ظرافت",
    image: "/block-media/shadcnblocks/block/lummi/bw3.jpeg",
    description: "الگوهای رابطی که محصولات نسل ما را تعریف می‌کنند.",
  },
];

const containerVariants: Variants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.2,
    },
  },
};

const itemVariants: Variants = {
  hidden: { opacity: 0, y: 20 },
  visible: {
    opacity: 1,
    y: 0,
    transition: {
      duration: 0.6,
      ease: "easeOut",
    },
  },
};

const ProjectCard = ({
  project,
}: {
  project: (typeof projects6Props)[0];
  index: number;
}) => {
  return (
    <motion.div
      variants={itemVariants}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      className="group relative cursor-pointer overflow-hidden rounded-3xl bg-black shadow-2xl"
    >
      <div className="relative aspect-[5/5] overflow-hidden">
        <img
          src={project.image}
          alt={project.title}
          className="h-full w-full object-cover transition-transform duration-700 group-hover:scale-110"
        />

        <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent" />

        <div className="absolute top-4 start-4">
          <span className="inline-block rounded-full border border-white/20 bg-black/50 px-3 py-1.5 text-xs font-semibold text-white backdrop-blur-sm">
            {project.category}
          </span>
        </div>

        <div className="absolute top-4 end-4 -translate-x-2 transform opacity-0 transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100">
          <div className="flex h-8 w-8 items-center justify-center rounded-full border border-white/30 bg-white/20 backdrop-blur-sm">
            <ArrowUpRight className="h-4 w-4 text-white rtl:rotate-180" />
          </div>
        </div>

        <div className="absolute inset-x-4 bottom-4 text-start">
          <h3 className="mb-1 text-2xl font-bold tracking-tight text-white md:text-3xl">
            {project.title}
          </h3>
          <p className="text-sm text-white/70 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
            {project.description}
          </p>
        </div>
      </div>
    </motion.div>
  );
};

interface Projects6Props {
  className?: string;
}

const Projects6 = ({ className }: Projects6Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <motion.div
          initial={{ opacity: 0, y: -20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, ease: "easeOut" }}
          className="mb-20 text-center"
        >
          <div className="mb-6">
            <span className="inline-flex items-center gap-2 text-sm font-medium tracking-wide text-muted-foreground">
              <div className="h-2 w-2 rounded-full bg-foreground"></div>کاربر در حال تعامل</span>
          </div>
          <h1 className="text-6xl leading-none font-black tracking-tight md:text-8xl lg:text-9xl">
            <span className="block">ثبت</span>
            <span className="block">لحظات</span>
          </h1>
        </motion.div>

        <motion.div
          variants={containerVariants}
          initial="hidden"
          animate="visible"
          className="mx-auto grid max-w-7xl grid-cols-1 gap-4 md:grid-cols-2"
        >
          {projects6Props.map((project, index) => (
            <ProjectCard key={project.id} project={project} index={index} />
          ))}
        </motion.div>
      </div>
    </section>
  );
};

export { Projects6 };