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

const GallerySection = () => {
  const { t } = useTranslation();

  return (
    <section
      id="gallery"
      className="section-padding bg-card relative z-20 -mt-[40px] pt-[120px]"
      style={{ borderRadius: "0 100% 0 0 / 0 100px 0 0" }}
    >
      <div className="container mx-auto">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: false, amount: 0.15 }}
          className="text-center mb-12"
        >
          <h2 className="font-display text-4xl md:text-5xl lg:text-7xl break-words font-bold pt-4 pb-10 leading-[1.8] text-gradient">
            {t("gallery.title")}
          </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: false, amount: 0.15 }}
              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;