salmakisvilla/components/VillaGallery.tsx

'use client';

import { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { X, ChevronLeft, ChevronRight, Maximize2 } from 'lucide-react';
import Image from 'next/image';

interface VillaGalleryProps {
  images: string[];
  name: string;
}

export default function VillaGallery({ images, name }: VillaGalleryProps) {
  const [isOpen, setIsOpen] = useState(false);
  const [currentIndex, setCurrentIndex] = useState(0);

  const openLightbox = (index: number) => {
    setCurrentIndex(index);
    setIsOpen(true);
    document.body.style.overflow = 'hidden';
  };

  const closeLightbox = () => {
    setIsOpen(false);
    document.body.style.overflow = 'auto';
  };

  const nextImage = () => {
    setCurrentIndex((prev) => (prev + 1) % images.length);
  };

  const prevImage = () => {
    setCurrentIndex((prev) => (prev - 1 + images.length) % images.length);
  };

  return (
    <>
      <div className="grid grid-cols-1 md:grid-cols-4 grid-rows-2 h-[400px] md:h-[600px] gap-4 rounded-3xl overflow-hidden shadow-2xl">
        {/* Main large image */}
        <div 
          className="md:col-span-2 md:row-span-2 relative group overflow-hidden cursor-zoom-in"
          onClick={() => openLightbox(0)}
        >
          <Image 
            src={images[0]} 
            fill 
            className="object-cover transition-transform duration-700 group-hover:scale-105" 
            alt={`${name} 1`}
            priority
          />
          <div className="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
            <Maximize2 className="text-white w-8 h-8" />
          </div>
        </div>

        {/* Second image */}
        <div 
          className="md:col-span-1 relative group overflow-hidden cursor-zoom-in"
          onClick={() => openLightbox(1)}
        >
          {images[1] ? (
            <Image src={images[1]} fill className="object-cover transition-transform duration-700 group-hover:scale-105" alt={`${name} 2`} />
          ) : (
            <div className="w-full h-full bg-aegean-dark/5" />
          )}
          <div className="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
            <Maximize2 className="text-white w-6 h-6" />
          </div>
        </div>

        {/* Third image */}
        <div 
          className="md:col-span-1 relative group overflow-hidden cursor-zoom-in"
          onClick={() => openLightbox(2)}
        >
          {images[2] ? (
            <Image src={images[2]} fill className="object-cover transition-transform duration-700 group-hover:scale-105" alt={`${name} 3`} />
          ) : (
            <div className="w-full h-full bg-aegean-dark/5" />
          )}
          <div className="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
            <Maximize2 className="text-white w-6 h-6" />
          </div>
        </div>

        {/* Fourth image with overlay if more exists */}
        <div 
          className="md:col-span-2 relative group overflow-hidden cursor-zoom-in"
          onClick={() => openLightbox(3)}
        >
          {images[3] ? (
            <Image src={images[3]} fill className="object-cover transition-transform duration-700 group-hover:scale-105" alt={`${name} 4`} />
          ) : (
            <div className="w-full h-full bg-aegean-dark/5" />
          )}
          
          {images.length > 4 && (
            <div className="absolute inset-0 bg-black/50 flex flex-col items-center justify-center text-white backdrop-blur-[2px] group-hover:bg-black/40 transition-all">
              <span className="text-3xl font-serif">+{images.length - 4}</span>
              <span className="text-[10px] font-bold uppercase tracking-widest mt-2">Daha Fazla Fotoğraf</span>
            </div>
          )}
          
          <div className="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
             {! (images.length > 4) && <Maximize2 className="text-white w-8 h-8" />}
          </div>
        </div>
      </div>

      {/* Lightbox Overlay */}
      <AnimatePresence>
        {isOpen && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="fixed inset-0 z-[100] bg-black/95 flex items-center justify-center p-4 md:p-8"
          >
            <button 
              onClick={closeLightbox}
              className="absolute top-8 right-8 text-white/70 hover:text-white z-50 transition-colors"
            >
              <X className="w-8 h-8" />
            </button>

            <button 
              onClick={prevImage}
              className="absolute left-4 md:left-8 text-white/70 hover:text-white z-50 p-2 rounded-full hover:bg-white/10 transition-all"
            >
              <ChevronLeft className="w-10 h-10" />
            </button>

            <button 
              onClick={nextImage}
              className="absolute right-4 md:right-8 text-white/70 hover:text-white z-50 p-2 rounded-full hover:bg-white/10 transition-all"
            >
              <ChevronRight className="w-10 h-10" />
            </button>

            <motion.div 
              key={currentIndex}
              initial={{ opacity: 0, scale: 0.9 }}
              animate={{ opacity: 1, scale: 1 }}
              exit={{ opacity: 0, scale: 0.9 }}
              className="relative w-full h-full max-w-6xl max-h-[80vh]"
            >
              {images[currentIndex] ? (
                <Image 
                  src={images[currentIndex]} 
                  fill 
                  className="object-contain" 
                  alt={`${name} Full`}
                  quality={100}
                />
              ) : (
                <div className="flex items-center justify-center h-full text-white/50">Görsel Yüklenemedi</div>
              )}
            </motion.div>

            <div className="absolute bottom-8 left-1/2 -translate-x-1/2 text-white/60 text-sm font-medium tracking-widest uppercase">
              {currentIndex + 1} / {images.length} — {name}
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </>
  );
}