import { motion } from 'framer-motion';
import { ArrowRight, Sparkles } from 'lucide-react';
import InlineCTA from './InlineCTA';

export default function BeforeAfter() {
  const pairs = [
    {
      name: 'Miguel',
      real: '/images/antes-depois/miguel-real.webp',
      avatar: '/images/antes-depois/miguel-avatar.webp',
    },
    {
      name: 'Duda',
      real: '/images/antes-depois/duda-real.webp',
      avatar: '/images/antes-depois/duda-avatar.webp',
    },
    {
      name: 'Valentina',
      real: '/images/antes-depois/valentina-real.webp',
      avatar: '/images/antes-depois/valentina-avatar.webp',
    },
    {
      name: 'Miguel e Valentina',
      real: '/images/antes-depois/irmaos-real.webp',
      avatar: '/images/antes-depois/irmaos-avatar.webp',
    },
  ];

  return (
    <section className="py-24 bg-white relative overflow-hidden" id="antes-e-depois">
      <div className="absolute top-0 left-0 w-96 h-96 bg-violet-300 blur-[120px] rounded-full mix-blend-multiply opacity-20 -z-10 -translate-x-1/2 -translate-y-1/2" />
      <div className="absolute bottom-0 right-0 w-96 h-96 bg-pink-300 blur-[120px] rounded-full mix-blend-multiply opacity-20 -z-10 translate-x-1/2 translate-y-1/2" />

      <div className="container mx-auto px-6 max-w-6xl relative z-10">
        <div className="text-center mb-16">
          <div className="inline-flex items-center gap-2 px-5 py-2.5 rounded-full border border-pink-200 bg-pink-50 mb-6 text-pink-600">
            <Sparkles className="w-4 h-4 text-amber-500" />
            <span className="text-sm font-bold uppercase tracking-wider">Resultado real, sem mockup</span>
          </div>
          <h2 className="text-3xl md:text-5xl font-display font-bold mb-6 text-indigo-950">
            De uma foto qualquer para um <span className="text-gradient">personagem 3D mágico.</span>
          </h2>
          <p className="text-lg text-indigo-900/70 max-w-2xl mx-auto font-medium">
            Estes são exemplos reais gerados na nossa plataforma — com fotos de verdade, sem edição manual. Veja a transformação acontecer.
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 lg:gap-10">
          {pairs.map((pair, i) => (
            <motion.div
              key={i}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.5, delay: i * 0.1 }}
              className="rounded-[2.5rem] border-2 border-pink-100 bg-pink-50/40 p-6 md:p-8 shadow-lg shadow-indigo-100/50"
            >
              <div className="flex items-center gap-3 sm:gap-5">
                <div className="flex-1 relative">
                  <span className="absolute top-3 left-3 z-10 bg-white/90 backdrop-blur-sm text-indigo-900 text-xs font-bold uppercase tracking-wider px-3 py-1.5 rounded-full shadow-sm">
                    Foto real
                  </span>
                  <div className="rounded-3xl overflow-hidden border-4 border-white shadow-xl aspect-[4/5]">
                    <img
                      src={pair.real}
                      alt={`Foto real de ${pair.name} antes da transformação`}
                      className="w-full h-full object-cover"
                      loading="lazy"
                    />
                  </div>
                </div>

                <div className="shrink-0 w-9 h-9 sm:w-12 sm:h-12 rounded-full bg-gradient-to-r from-pink-500 to-violet-500 flex items-center justify-center text-white shadow-lg">
                  <ArrowRight className="w-4 h-4 sm:w-6 sm:h-6" />
                </div>

                <div className="flex-1 relative">
                  <span className="absolute top-3 left-3 z-10 bg-gradient-to-r from-pink-500 to-violet-500 text-white text-xs font-bold uppercase tracking-wider px-3 py-1.5 rounded-full shadow-sm flex items-center gap-1">
                    <Sparkles className="w-3 h-3" /> Gerado por IA
                  </span>
                  <div className="rounded-3xl overflow-hidden border-4 border-white shadow-xl aspect-[4/5] bg-white">
                    <img
                      src={pair.avatar}
                      alt={`Personagem 3D de ${pair.name} gerado pela IA`}
                      className="w-full h-full object-cover"
                      loading="lazy"
                    />
                  </div>
                </div>
              </div>
              <p className="text-center mt-6 text-indigo-950 font-bold text-lg">{pair.name}</p>
            </motion.div>
          ))}
        </div>

        <InlineCTA
          text="Quero Criar o Meu Agora!"
          subtext="Clica aqui e veja a transformação do seu filho em minutos"
        />
      </div>
    </section>
  );
}
