'use client'

import { useRef } from 'react'
import { useTranslations } from 'next-intl'
import { motion, useInView } from 'framer-motion'
import Image from 'next/image'
import { MOCK_GALLERY } from '@/lib/mock'

export default function GallerySection() {
  const ref = useRef<HTMLDivElement>(null)
  const isInView = useInView(ref, { once: true, margin: '-80px' })

  return (
    <section id="galeri" className="bg-vesta-dark py-24 md:py-32">
      <div ref={ref} className="container mx-auto px-6">
        <motion.p
          initial={{ opacity: 0, y: 15 }}
          animate={isInView ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.5 }}
          className="text-vesta-earth text-xs tracking-[0.3em] uppercase mb-12 text-center"
        >
          Galeri
        </motion.p>

        {/* Masonry-like grid */}
        <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
          {MOCK_GALLERY.map((item, i) => (
            <motion.div
              key={item.id}
              initial={{ opacity: 0, scale: 0.97 }}
              animate={isInView ? { opacity: 1, scale: 1 } : {}}
              transition={{ duration: 0.5, delay: 0.07 * i }}
              className={`relative overflow-hidden rounded-xl group ${
                i === 0 ? 'col-span-2 md:col-span-2 row-span-2 aspect-[4/3]' : 'aspect-square'
              }`}
            >
              <Image
                src={item.imageUrl}
                alt={item.titleTr}
                fill
                className="object-cover transition-transform duration-700 group-hover:scale-108"
              />
              <div className="absolute inset-0 bg-black/0 group-hover:bg-black/30 transition-colors duration-300" />
              <div className="absolute bottom-3 left-3 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                <p className="text-white text-sm font-medium">{item.titleTr}</p>
              </div>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  )
}