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

export default function Gallery() {
  const BASE = "https://s3.seureview.com.br/festamagica/6a591904-cf2a-4a51-8581-1891373eea29";

  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: `${BASE}/008417cf-b15a-4c4e-ac95-c75b69ec3525/convite-premium.webp`, title: "Convite Premium", desc: "Para impressão ou envio digital" },
    { src: "/images/galeria-real/caixa-de-pipoca.webp", title: "Caixa de Pipoca", desc: "A alegria garantida no lanche" },
    { src: `${BASE}/16ad6afb-4c6f-4b90-8769-cebff489bcb8/bandeirolas-com-nome.webp`, title: "Bandeirolas com Nome", desc: "Varal decorativo personalizado" },
    { src: "/images/galeria-real/convite-digital.webp", title: "Convite Digital", desc: "Para enviar no WhatsApp" },
    { src: `${BASE}/16ad6afb-4c6f-4b90-8769-cebff489bcb8/caixa-milk.webp`, title: "Caixa Milk", desc: "Lembrancinha charmosa" },
    { src: "/images/galeria-real/saia-de-cupcake.webp", title: "Saia de Cupcake", desc: "Mais estilo para os docinhos" },
    { src: `${BASE}/15547b19-daf7-46a0-922b-e6515a320534/centro-de-mesa.webp`, title: "Centro de Mesa", desc: "Arranjo decorativo exclusivo" },
    { src: "/images/galeria-real/tag-de-agradecimento.webp", title: "Tag de Agradecimento", desc: "Pronto para as lembrancinhas" },
    { src: `${BASE}/16ad6afb-4c6f-4b90-8769-cebff489bcb8/topper-de-cupcake-personagem.webp`, title: "Topper de Cupcake", desc: "O personagem em cada docinho" },
    { src: "/images/galeria-real/faixa-de-parede.webp", title: "Faixa de Parede", desc: "Decoração com a cara do tema" },
    { src: `${BASE}/16ad6afb-4c6f-4b90-8769-cebff489bcb8/sacolinha-surpresa.webp`, title: "Sacolinha Surpresa", desc: "Lembrancinha que toda criança ama" },
    { src: "/images/galeria-real/chapeu-de-festa.webp", title: "Chapéu de Festa", desc: "Divertido, personalizado e único" },
    { src: `${BASE}/16ad6afb-4c6f-4b90-8769-cebff489bcb8/porta-bis-duplo.webp`, title: "Porta Bis Duplo", desc: "Lembrancinha deliciosa e bonita" },
    { src: "/images/galeria-real/adesivos-redondos.webp", title: "Adesivos Redondos", desc: "Ideais para potinhos e lembrancinhas" },
    { src: `${BASE}/16ad6afb-4c6f-4b90-8769-cebff489bcb8/caixa-cone.webp`, title: "Caixa Cone", desc: "Diferente e super divertida" },
    { src: `${BASE}/15547b19-daf7-46a0-922b-e6515a320534/display-de-mesa.webp`, title: "Display de Mesa", desc: "Identificação elegante para a mesa" },
  ];

  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">
            Itens reais gerados na nossa plataforma — sem mockup, sem edição manual. É exatamente isso que você recebe pronto para imprimir.
          </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>

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