import React from 'react';
import { motion } from 'framer-motion';

const images = [
  {
    src: 'https://horizons-cdn.hostinger.com/1edbac22-ab36-41d9-aff9-44eb1506363e/05485a6602c92213d17f6b69f0f71c10.jpg',
    alt: 'Black and white dog playing with green tire toy',
    title: 'Playtime Fun'
  },
  {
    src: 'https://horizons-cdn.hostinger.com/1edbac22-ab36-41d9-aff9-44eb1506363e/95ed79c076c5d409d3f94dbb6239cc1a.jpg',
    alt: 'Chihuahua in purple and blue sweater',
    title: 'Cozy & Cute'
  },
  {
    src: 'https://horizons-cdn.hostinger.com/1edbac22-ab36-41d9-aff9-44eb1506363e/ed25cc9ec1febedad8a061beaf64bcc4.jpg',
    alt: 'Two black and white dogs indoors',
    title: 'Best Friends'
  },
  {
    src: 'https://horizons-cdn.hostinger.com/1edbac22-ab36-41d9-aff9-44eb1506363e/f76d2140ccab435fb133f9a5365192ab.jpg',
    alt: 'Black dog with white chest and tan Labrador on dirt path',
    title: 'Adventure Time'
  },
  {
    src: 'https://horizons-cdn.hostinger.com/1edbac22-ab36-41d9-aff9-44eb1506363e/b01e33957207904c84325bed7d8400fd.jpg',
    alt: 'Group of four dogs on brick patio',
    title: 'The Whole Pack'
  }
];

const GallerySection = () => {
  return (
    <section className="py-20 bg-white relative overflow-hidden">
      {/* Decorative background elements */}
      <div className="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none opacity-30">
        <div className="absolute -top-20 -right-20 w-64 h-64 bg-turquoise/20 rounded-full blur-3xl"></div>
        <div className="absolute top-40 -left-20 w-72 h-72 bg-coral/10 rounded-full blur-3xl"></div>
      </div>

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6 }}
          className="text-center mb-16"
        >
          <h2 className="text-4xl md:text-5xl font-bold text-navy mb-4">Our Happy Clients</h2>
          <p className="text-lg text-navy/70 max-w-2xl mx-auto">
            Take a look at some of the furry friends we've had the pleasure of caring for!
          </p>
        </motion.div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {images.map((image, index) => (
            <motion.div
              key={index}
              initial={{ opacity: 0, scale: 0.9 }}
              whileInView={{ opacity: 1, scale: 1 }}
              viewport={{ once: true }}
              transition={{ duration: 0.5, delay: index * 0.1 }}
              whileHover={{ scale: 1.03 }}
              className="group relative aspect-[4/3] rounded-xl overflow-hidden shadow-lg bg-gray-100"
            >
              <img
                src={image.src}
                alt={image.alt}
                className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
                loading="lazy"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-navy/70 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-6">
                <p className="text-white font-semibold text-lg translate-y-4 group-hover:translate-y-0 transition-transform duration-300">
                  {image.title}
                </p>
              </div>
            </motion.div>
          ))}
          
          {/* Optional placeholder for grid balance if needed, or simply let it flow */}
          <motion.div
            initial={{ opacity: 0, scale: 0.9 }}
            whileInView={{ opacity: 1, scale: 1 }}
            viewport={{ once: true }}
            transition={{ duration: 0.5, delay: 0.5 }}
            className="flex flex-col items-center justify-center p-8 text-center bg-turquoise/5 rounded-xl border-2 border-dashed border-turquoise/30 aspect-[4/3]"
          >
            <p className="text-navy font-medium text-lg mb-2">Your Pet Could Be Here!</p>
            <p className="text-navy/60 text-sm">Join our happy family today.</p>
          </motion.div>
        </div>
      </div>
    </section>
  );
};

export default GallerySection;