'use client'

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

const experiences = [
  {
    title: "Infinity Pool",
    description: "Swim towards the horizon in our stunning heated infinity pool, overlooking the turquoise expanse of the Aegean Sea.",
    image: "https://images.unsplash.com/photo-1576013551627-0cfde316be70?q=80&w=1974&auto=format&fit=crop"
  },
  {
    title: "Snorkeling",
    description: "Discover vibrant marine life, swim through crystal-clear waters, and experience the wonder of ocean.",
    image: "https://images.unsplash.com/photo-1544551763-46a013bb70d5?q=80&w=2070&auto=format&fit=crop"
  },
  {
    title: "Paddle boarding",
    description: "Balance your soul and body while gliding over calm morning waves on our premium paddle boards.",
    image: "https://images.unsplash.com/photo-1517176641128-052478950337?q=80&w=1974&auto=format&fit=crop"
  },
  {
    title: "Fishing trips",
    description: "Join our local experts for an authentic Mediterranean fishing experience at sunrise.",
    image: "https://images.unsplash.com/photo-1524704652723-21444983944d?q=80&w=1974&auto=format&fit=crop"
  }
]

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

  return (
    <section className="relative z-60 bg-[#FAF7F0] py-32 px-6 md:px-12">
      <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"
          >
            Discover experiences <br /> beyond the shore
          </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
                  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>
  )
}