import { motion } from "framer-motion";
import { GALLERY_IMAGES } from "@/data/event-data";
import { ImageIcon } from "lucide-react";

const GallerySection = () => (
  <section id="gallery" className="section-padding bg-card">
    <div className="container mx-auto">
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true }}
        className="text-center mb-12"
      >
        <h2 className="font-display text-4xl md:text-5xl font-bold text-gradient mb-4">
          Galería
        </h2>
      </motion.div>

      <div className="grid grid-cols-2 md:grid-cols-3 gap-4 max-w-5xl mx-auto">
        {GALLERY_IMAGES.map((img, i) => (
          <motion.div
            key={i}
            initial={{ opacity: 0, scale: 0.9 }}
            whileInView={{ opacity: 1, scale: 1 }}
            viewport={{ once: true }}
            transition={{ delay: i * 0.08 }}
            className="aspect-square rounded-xl overflow-hidden bg-muted flex items-center justify-center"
          >
            {img.src ? (
              <img
                src={img.src}
                alt={img.alt}
                className="w-full h-full object-cover hover:scale-105 transition-transform duration-500"
                loading="lazy"
              />
            ) : (
              <div className="text-center text-muted-foreground/40">
                <ImageIcon className="w-10 h-10 mx-auto mb-2" />
                <p className="text-xs">{img.alt}</p>
              </div>
            )}
          </motion.div>
        ))}
      </div>
    </div>
  </section>
);

export default GallerySection;