"use client";
import type { Variants } from "framer-motion";
import { motion, useScroll, useTransform } from "framer-motion";

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

const images = {
  hero: "/block-media/shadcnblocks/block/photos/pat-whelen-gWfpmH0H2bM-unsplash.jpg",
};

const gridImages = [
  {
    src: "/block-media/shadcnblocks/block/photos/ivan-bandura-hqnUYXsN5oY-unsplash.jpg",
    alt: "اکتشاف تم ۱",
  },
  {
    src: "/block-media/shadcnblocks/block/photos/kevin-charit-1fL2Q1JcbNc-unsplash.jpg",
    alt: "اکتشاف تم ۲",
  },
  {
    src: "/block-media/shadcnblocks/block/photos/ines-alvarez-fdez-VjRc6HDXJ5s-unsplash.jpg",
    alt: "اکتشاف تم ۳",
  },
  {
    src: "/block-media/shadcnblocks/block/photos/ivan-bandura-Kj2tYAl4HZg-unsplash.jpg",
    alt: "اکتشاف تم ۴",
  },
];

interface Project13Props {
  className?: string;
}

const Project13 = ({ className }: Project13Props) => {
  const { scrollYProgress } = useScroll();

  const heroY = useTransform(scrollYProgress, [0, 1], [0, -300]);
  const heroScale = useTransform(scrollYProgress, [0, 0.5], [1, 1.2]);

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

  const itemVariants: Variants = {
    hidden: { opacity: 0, y: 80 },
    visible: {
      opacity: 1,
      y: 0,
      transition: {
        duration: 1,
        ease: "easeInOut",
      },
    },
  };

  const imageVariants: Variants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        duration: 1.2,
        ease: "easeInOut",
      },
    },
  };

  const titleVariants: Variants = {
    hidden: { opacity: 0, y: 100, scale: 0.9 },
    visible: {
      opacity: 1,
      y: 0,
      scale: 1,
      transition: {
        duration: 1.4,
        ease: "easeInOut",
        delay: 0.2,
      },
    },
  };

  return (
    <section dir="rtl" lang="fa" className={cn("min-h-screen", className)}>
      <motion.section
        className="relative overflow-hidden"
        initial="hidden"
        animate="visible"
        variants={containerVariants}
      >
        <motion.div
          className="relative flex h-[60vh] items-center justify-center md:h-[70vh] md:border-[50px] md:border-white lg:h-[100vh]"
          style={{ y: heroY, scale: heroScale }}
        >
          <motion.img
            src={images.hero}
            alt="تصویر شاخص «عمق‌های درخشان»"
            className="absolute inset-0 h-full w-full object-cover"
            variants={imageVariants}
          />
          <div className="absolute inset-0 bg-black/30" />
          <motion.h1
            className="relative z-10 px-4 text-center text-4xl font-semibold text-white md:text-6xl lg:text-7xl xl:text-8xl"
            variants={titleVariants}
          >
            عمق‌های درخشان
          </motion.h1>
        </motion.div>
      </motion.section>

      <motion.section
        className="px-4 py-12 text-start md:px-8 md:py-16 lg:px-16 lg:py-20 xl:px-24"
        initial="hidden"
        whileInView="visible"
        viewport={{ once: true, margin: "-150px" }}
        variants={containerVariants}
      >
        <div className="mx-auto max-w-7xl">
          <motion.p
            className="mb-12 max-w-7xl border-b pb-7 text-lg leading-relaxed md:mb-16 md:text-xl lg:mb-20 lg:text-2xl"
            variants={itemVariants}
          >این کاوش به رابطه ژرف میان رنگ، توکن طراحی و ادراک کاربر می‌پردازد و زبانی بصری می‌سازد که یک دیزاین سیستم منسجم را شکل می‌دهد.</motion.p>

          <div className="grid grid-cols-2 gap-8 md:grid-cols-3 md:gap-12 lg:grid-cols-3 lg:gap-16">
            <motion.div variants={itemVariants}>
              <h3 className="mb-2 text-sm tracking-wider text-muted-foreground">
                پروژه
              </h3>
              <p className="text-base md:text-lg">عمق‌های درخشان</p>
            </motion.div>

            <motion.div variants={itemVariants}>
              <h3 className="mb-2 text-sm tracking-wider text-muted-foreground">
                استودیو
              </h3>
              <p className="text-base md:text-lg">پریسم کالکتیو</p>
            </motion.div>

            <motion.div variants={itemVariants}>
              <h3 className="mb-2 text-sm tracking-wider text-muted-foreground">
                سال همکاری
              </h3>
              <p className="text-base md:text-lg">۲۲۵</p>
            </motion.div>

            <motion.div variants={itemVariants}>
              <h3 className="mb-2 text-sm tracking-wider text-muted-foreground">
                نقش
              </h3>
              <p className="mb-4 text-base md:text-lg">مدیر خلاق</p>
            </motion.div>
            <motion.div variants={itemVariants}>
              <h3 className="mb-2 text-sm tracking-wider text-muted-foreground">
                ابزارها
              </h3>
              <p className="text-base md:text-lg">طراحی رابط، ویرایشگر کد، نمایش مؤلفه‌ها</p>
            </motion.div>
          </div>
        </div>
      </motion.section>

      <motion.section
        className="pb-12 md:pb-16 lg:pb-20"
        initial="hidden"
        whileInView="visible"
        viewport={{ once: true, margin: "-100px" }}
        variants={containerVariants}
      >
        <div className="grid grid-cols-1 md:grid-cols-2">
          {gridImages.map((image, index) => (
            <motion.div
              key={index}
              className="md:col-span-1 lg:col-span-1"
              variants={imageVariants}
              transition={{ duration: 0.6, ease: "easeInOut" }}
            >
              <div className="relative aspect-square overflow-hidden">
                <img
                  src={image.src}
                  alt={image.alt}
                  className="h-full w-full object-cover transition-transform duration-700 hover:scale-110"
                />
              </div>
            </motion.div>
          ))}
        </div>
      </motion.section>

      <motion.section
        className="px-4 py-5 text-start md:px-8 md:py-5 md:pb-22 lg:px-16 xl:px-24"
        initial="hidden"
        whileInView="visible"
        viewport={{ once: true, margin: "-100px" }}
        variants={containerVariants}
      >
        <div className="mx-auto max-w-7xl">
          <div className="grid grid-cols-1 items-start gap-8 md:gap-12 lg:grid-cols-2 lg:gap-16">
            <motion.div variants={itemVariants}>
              <h3 className="mb-4 text-sm tracking-wider text-muted-foreground">
                مفهوم
              </h3>
            </motion.div>

            <motion.div variants={itemVariants}>
              <h2 className="mb-6 text-2xl font-medium md:mb-8 md:text-3xl lg:text-4xl">زبان رنگ</h2>

              <div className="space-y-4 leading-relaxed font-medium text-muted-foreground md:space-y-6">
                <p>سیستم رنگ و توکن‌های طراحی برای داشبوردهای سامانه مدیریت ارتباط با مشتری و تحلیل، با تمرکز بر خوانایی داده‌ها و سلسله‌مراتب بصری واضح.</p>

                <p>هر توکن رنگ برای هدایت توجه کاربر به KPIهای مهم، هشدارها و اقدامات موردنیاز در رابط فروش طراحی شده است.</p>
              </div>
            </motion.div>
          </div>
        </div>
      </motion.section>
    </section>
  );
};

export { Project13 };