import { motion } from 'framer-motion';
import { Star, Heart } from 'lucide-react';
import InlineCTA from './InlineCTA';

export default function Results() {
  const textTestimonials = [
    { name: "Juliana Mendes", role: "Mãe do Pedro (4 anos)", initials: "JM", content: "Gente, eu não acreditei quando vi! O Pedro pirou quando viu ele vestido de astronauta no convite. Todo mundo da escola elogiou, foi muito incrível e super barato." },
    { name: "Camila V.", role: "Mãe da Alice (6 anos)", initials: "CV", content: "Eu tava desesperada porque deixei tudo pra última hora. Criei o kit, imprimi na gráfica da esquina e a festa ficou parecendo de decoradora cara. Salvaram a vida!" },
    { name: "Fernanda Costa", role: "Decoradora", initials: "FC", content: "Trabalho com festas e agora ofereço essa opção VIP para minhas clientes. A IA gera imagens perfeitas e de altíssima resolução. É o futuro da papelaria." },
    { name: "Amanda K.", role: "Mãe do Leo (2 anos)", initials: "AK", content: "A festinha foi na creche, fiz tudo na minha impressora de casa mesmo. Recortei e colei os rótulos de guaraná e as marmitinhas. Ficou um luxo, muito maravilhoso." },
  ];

  return (
    <section className="py-24 relative overflow-hidden bg-white" id="results">
      <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 tracking-tight text-indigo-950">
            Mamães <span className="text-pink-500">encantadas.</span>
          </h2>
          <p className="text-lg text-indigo-900/70 font-medium max-w-2xl mx-auto">
            Veja quem já transformou a festa dos filhos em um verdadeiro universo mágico Pixar!
          </p>
        </div>

        {/* Text Testimonials */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8">
          {textTestimonials.map((t, i) => (
            <motion.div 
              key={i}
              initial={{ opacity: 0, scale: 0.95 }}
              whileInView={{ opacity: 1, scale: 1 }}
              viewport={{ once: true }}
              transition={{ delay: i * 0.1 }}
              className="relative rounded-3xl p-8 border-2 border-pink-100 bg-pink-50/50 hover:bg-pink-100/50 transition-colors group shadow-sm hover:shadow-md"
            >
              <div className="absolute -top-4 -right-4 w-12 h-12 bg-white rounded-full flex items-center justify-center shadow-md rotate-12">
                <Heart className="w-6 h-6 text-pink-500 fill-pink-500" />
              </div>
              <div className="flex items-center gap-1 mb-6">
                {[...Array(5)].map((_, idx) => (
                  <Star key={idx} className="w-5 h-5 text-amber-400 fill-amber-400" />
                ))}
              </div>
              <p className="text-indigo-900 font-medium leading-relaxed mb-8 italic">
                "{t.content}"
              </p>
              <div className="flex items-center gap-4 mt-auto">
                <div className="w-14 h-14 rounded-full border-2 border-white shadow-sm bg-gradient-to-br from-pink-400 to-violet-500 flex items-center justify-center text-white font-display font-bold text-lg shrink-0">
                  {t.initials}
                </div>
                <div>
                    <h4 className="text-indigo-950 font-bold text-base">{t.name}</h4>
                    <span className="text-sm text-pink-600 font-medium">{t.role}</span>
                </div>
              </div>
            </motion.div>
          ))}
        </div>

        <InlineCTA
          text="Eu Também Quero Viver Essa Mágica!"
          subtext="Clica aqui e seja a próxima mãe encantada"
        />
      </div>
    </section>
  );
}