'use client'

import { motion, AnimatePresence } from 'framer-motion'
import Image from 'next/image'
import { useState } from 'react'

const experienceImages = [
  "https://res.cloudinary.com/du7xohbct/image/upload/v1776642503/ayrisapart/experiences/akbuk_cjfyan.jpg",
  "https://res.cloudinary.com/du7xohbct/image/upload/v1776642502/ayrisapart/experiences/oren_d2pxcy.jpg",
  "https://res.cloudinary.com/du7xohbct/image/upload/v1776642501/ayrisapart/experiences/alatepe_oawu3z.jpg",
  "https://res.cloudinary.com/du7xohbct/image/upload/v1776642492/ayrisapart/experiences/cokertme_d5qfiw.jpg",
]

export default function Experiences({ dict }: { dict: any }) {
  const [hoveredIdx, setHoveredIdx] = useState<number | null>(null)

  const experiences = [
    { title: dict.experiences.e1.title, description: dict.experiences.e1.desc, image: experienceImages[0] },
    { title: dict.experiences.e2.title, description: dict.experiences.e2.desc, image: experienceImages[1] },
    { title: dict.experiences.e3.title, description: dict.experiences.e3.desc, image: experienceImages[2] },
    { title: dict.experiences.e4.title, description: dict.experiences.e4.desc, image: experienceImages[3] },
  ]

  return (
    <section className="relative z-60 bg-[#FAF7F0] ">
      <div className="max-w-[1400px] mx-auto space-y-20">
        <div className="text-center space-y-4">
          <motion.h2
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 1.2, ease: [0.33, 1, 0.68, 1] }}
            className="text-4xl md:text-[64px] font-medium text-[#1A1A1A] leading-tight"
          >
            {dict.experiences.title}
          </motion.h2>
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-12">
          {experiences.map((exp, idx) => (
            <motion.div
              key={idx}
              initial={{ opacity: 0, y: 40 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 1, delay: idx * 0.1, ease: [0.33, 1, 0.68, 1] }}
              onMouseEnter={() => setHoveredIdx(idx)}
              onMouseLeave={() => setHoveredIdx(null)}
              animate={{
                filter: hoveredIdx !== null && hoveredIdx !== idx ? 'blur(4px)' : 'blur(0px)',
                opacity: hoveredIdx !== null && hoveredIdx !== idx ? 0.5 : 1,
                scale: hoveredIdx === idx ? 1.02 : 1
              }}
              className="group cursor-pointer flex flex-col relative"
            >
              <div className="relative aspect-[3/4] w-full overflow-hidden rounded-[2px] mb-6">
                <Image
                  src={exp.image}
                  alt={exp.title}
                  fill
                  sizes="(max-width: 768px) 100vw, 33vw"
                  className="object-cover transition-transform duration-1000 group-hover:scale-110"
                />

                {/* Overlay Description */}
                <AnimatePresence>
                  {hoveredIdx === idx && (
                    <motion.div
                      initial={{ opacity: 0 }}
                      animate={{ opacity: 1 }}
                      exit={{ opacity: 0 }}
                      className="absolute inset-0 bg-black/40 backdrop-blur-[2px] flex flex-col justify-end p-8"
                    >
                      <motion.p
                        initial={{ opacity: 0, y: 20 }}
                        animate={{ opacity: 1, y: 0 }}
                        transition={{ delay: 0.1 }}
                        className="text-white text-base md:text-lg leading-relaxed font-medium"
                      >
                        {exp.description}
                      </motion.p>
                    </motion.div>
                  )}
                </AnimatePresence>
              </div>

              <h3 className="text-2xl font-medium text-[#1A1A1A] group-hover:text-[#C88C4B] transition-colors">
                {exp.title}
              </h3>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  )
}