import { motion } from 'framer-motion';
import InlineCTA from './InlineCTA';

export default function Gallery() {
  const images = [
    { src: "/images/galeria-real/topo-de-bolo.webp", title: "Topo de Bolo 3D", desc: "Destaque na mesa do bolo" },
    { src: "/images/galeria-real/painel-de-fundo.webp", title: "Painel de Fundo", desc: "Transforma o cenário da festa" },
    { src: "/images/galeria-real/caixa-de-pipoca.webp", title: "Caixa de Pipoca", desc: "A alegria garantida no lanche" },
    { src: "/images/galeria-real/convite-digital.webp", title: "Convite Digital", desc: "Para enviar no WhatsApp" },
    { src: "/images/galeria-real/saia-de-cupcake.webp", title: "Saia de Cupcake", desc: "Mais estilo para os docinhos" },
    { src: "/images/galeria-real/tag-de-agradecimento.webp", title: "Tag de Agradecimento", desc: "Pronto para as lembrancinhas" },
    { src: "/images/galeria-real/chapeu-de-festa.webp", title: "Chapéu de Festa", desc: "Divertido, personalizado e único" },
    { src: "/images/galeria-real/adesivos-redondos.webp", title: "Adesivos Redondos", desc: "Ideais para potinhos e lembrancinhas" },
  ];

  return (
    <section className="py-24 bg-pink-50 relative overflow-hidden pb-32">
      <div className="absolute -left-20 top-0 w-72 h-72 bg-violet-300 blur-[100px] rounded-full opacity-30" />
      
      <div className="container mx-auto px-6 max-w-6xl relative z-10">
        <div className="text-center mb-16">
          <h2 className="text-3xl md:text-5xl font-display font-bold mb-6 text-indigo-950">
            Veja a magia <span className="text-gradient">acontecer.</span>
          </h2>
          <p className="text-lg text-indigo-900/70 max-w-2xl mx-auto font-medium">
            Estes são alguns dos itens que você pode criar dentro da plataforma e baixar em alta resolução.
          </p>
          <p className="text-base text-indigo-900/60 max-w-2xl mx-auto font-medium mt-2">
            Você escolhe quais peças deseja gerar e monta o kit de acordo com a sua festa.
          </p>
        </div>

        <div className="columns-1 sm:columns-2 lg:columns-3 gap-6 space-y-6">
          {images.map((img, i) => (
            <motion.div
              key={i}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: i * 0.1 }}
              className="break-inside-avoid relative rounded-[2rem] overflow-hidden bg-white border border-indigo-100 group shadow-lg hover:shadow-xl transition-all duration-300"
            >
              <div className="relative w-full overflow-hidden flex items-center justify-center p-6 bg-indigo-50/50">
                <img 
                  src={img.src} 
                  alt={img.title}
                  className="w-full h-auto object-contain rounded-2xl drop-shadow-xl transition-transform duration-700 group-hover:scale-105 max-h-[400px]"
                />
              </div>
              <div className="p-6 bg-white border-t border-indigo-50">
                <h3 className="font-display font-bold text-xl text-indigo-950 mb-1">{img.title}</h3>
                <p className="text-sm font-medium text-indigo-900/60">{img.desc}</p>
              </div>
            </motion.div>
          ))}
        </div>

        <p className="text-center text-indigo-900/60 font-semibold mt-10 max-w-xl mx-auto">
          E mais 25 outros modelos no catálogo — 33 no total, pra montar o kit do jeito que você quiser.
        </p>

        <InlineCTA
          text="Quero o Meu Kit Personalizado!"
          subtext="Clica aqui e escolha os itens que combinam com o tema do seu filho"
        />
      </div>
    </section>
  );
}