"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 galleryImages = [
  {
    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 Project13aProps {
  className?: string;
}

const Project13a = ({ className }: Project13aProps) => {
  const { scrollYProgress } = useScroll();

  const heroY = useTransform(scrollYProgress, [0, 1], [0, -200]);
  const textY = useTransform(scrollYProgress, [0, 0.5], [0, -100]);

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

  const itemVariants: Variants = {
    hidden: { opacity: 0, y: 60 },
    visible: {
      opacity: 1,
      y: 0,
      transition: {
        duration: 0.8,
        ease: [0.25, 0.46, 0.45, 0.94],
      },
    },
  };

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

  const titleVariants: Variants = {
    hidden: { opacity: 0, y: 150 },
    visible: {
      opacity: 1,
      y: 0,
      transition: {
        duration: 1.6,
        ease: [0.25, 0.46, 0.45, 0.94],
        delay: 0.3,
      },
    },
  };

  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-screen items-center justify-center"
          style={{ y: heroY }}
        >
          <motion.img
            src={images.hero}
            alt="تصویر شاخص «عمق‌های درخشان»"
            className="absolute inset-0 h-full w-full object-cover"
            variants={imageVariants}
          />
          <div className="absolute inset-0 bg-gradient-to-b from-black/20 via-black/40 to-black/60" />
          <motion.div
            className="relative z-10 px-4 text-center"
            style={{ y: textY }}
          >
            <motion.h1
              className="mb-6 text-5xl font-bold text-white md:text-7xl lg:text-8xl xl:text-9xl"
              variants={titleVariants}
            >
              عمق‌های
              <br />
              درخشان
            </motion.h1>
            <motion.p
              className="mx-auto max-w-2xl text-lg text-white/90 md:text-xl"
              variants={itemVariants}
            >سیستم طراحی یکپارچه برای داشبوردهای B2B</motion.p>
          </motion.div>
        </motion.div>
      </motion.section>

      <motion.section
        className="-mt-1 px-4 py-16 text-start md:px-8 md:py-24 lg:px-16 lg:py-32 xl:px-24"
        initial="hidden"
        whileInView="visible"
        viewport={{ once: true, margin: "-100px" }}
        variants={containerVariants}
      >
        <div className="mx-auto max-w-7xl">
          <motion.div
            className="mb-16 grid grid-cols-1 gap-12 md:grid-cols-2 lg:gap-20"
            variants={itemVariants}
          >
            <div>
              <h2 className="mb-8 text-3xl font-semibold md:text-4xl lg:text-5xl">
                مرور پروژه
              </h2>
              <p className="text-lg leading-relaxed md:text-xl">کاوشی ژرف در سیستم رنگ و توکن‌های طراحی، که از مسیر یک دیزاین سیستم منسجم و تم‌پذیر شکل گرفته است.</p>
            </div>
            <div className="space-y-8">
              <div>
                <h3 className="mb-2 text-sm tracking-wider text-muted-foreground">
                  استودیو
                </h3>
                <p className="text-lg md:text-xl">پریسم کالکتیو</p>
              </div>
              <div>
                <h3 className="mb-2 text-sm tracking-wider text-muted-foreground">
                  سال همکاری و نقش
                </h3>
                <p className="text-lg md:text-xl">۲۲۵  مدیر خلاق</p>
              </div>
              <div>
                <h3 className="mb-2 text-sm tracking-wider text-muted-foreground">
                  ابزارها
                </h3>
                <p className="text-lg md:text-xl">طراحی رابط، ویرایشگر کد، نمایش مؤلفه‌ها</p>
              </div>
            </div>
          </motion.div>
        </div>
      </motion.section>

      <motion.section
        initial="hidden"
        whileInView="visible"
        viewport={{ once: true, margin: "-100px" }}
        variants={containerVariants}
      >
        <div>
          {galleryImages.map((image, index) => (
            <motion.div
              key={index}
              className="relative overflow-hidden"
              variants={imageVariants}
              transition={{ duration: 0.6, ease: "easeInOut" }}
            >
              <div className="relative aspect-auto overflow-hidden lg:aspect-video">
                <img
                  src={image.src}
                  alt={image.alt}
                  className="h-full w-full object-cover"
                />
              </div>
            </motion.div>
          ))}
        </div>
      </motion.section>

      <motion.section
        className="px-4 py-5 text-start md:px-8 md:py-5 lg:px-16 xl:px-24"
        initial="hidden"
        whileInView="visible"
        viewport={{ once: true, margin: "-100px" }}
        variants={containerVariants}
      >
        <div className="mx-auto max-w-7xl py-24">
          <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های مهم، هشدارها و اقدامات موردنیاز در داشبوردهای CRM طراحی شده است.</p>
              </div>
            </motion.div>
          </div>
        </div>
      </motion.section>
    </section>
  );
};

export { Project13a };