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

const testimonials = [
  {
    name: "Juliana Martins",
    time: "09:47",
    avatar: "JM",
    color: "bg-emerald-500",
    stars: 5,
    message: "Ficou simplesmente lindo! Eu não esperava que as fotos fossem ficar tão perfeitas. Meu filho adorou se ver como um verdadeiro herói da festa. Recomendo demais! 🥰",
  },
  {
    name: "Camila Souza",
    time: "14:22",
    avatar: "CS",
    color: "bg-violet-500",
    stars: 5,
    message: "Amei o resultado! Foi super fácil de fazer e as imagens ficaram incríveis. Todo mundo da família comentou e pediu para eu fazer também 😍✨",
  },
  {
    name: "Fernanda Oliveira",
    time: "11:08",
    avatar: "FO",
    color: "bg-pink-500",
    stars: 5,
    message: "Que trabalho maravilhoso! As artes ficaram muito bonitas e deram um toque especial na comemoração. Minha filha ficou encantada quando viu 🎉",
  },
  {
    name: "Patrícia Almeida",
    time: "16:55",
    avatar: "PA",
    color: "bg-amber-500",
    stars: 5,
    message: "Valeu cada centavo! Recebi tudo rapidinho e a qualidade das imagens me surpreendeu. Ficou melhor do que eu imaginava 👏👏",
  },
  {
    name: "Renata Costa",
    time: "10:33",
    avatar: "RC",
    color: "bg-cyan-500",
    stars: 5,
    message: "Foi um sucesso aqui em casa! As fotos ficaram super realistas e deixaram a festa ainda mais especial. Meu filho amou o resultado 🎂🎈",
  },
  {
    name: "Larissa Ferreira",
    time: "19:14",
    avatar: "LF",
    color: "bg-rose-500",
    stars: 5,
    message: "Estou apaixonada! Ficou tudo perfeito, muito caprichado e divertido. Com certeza vou fazer novamente para as próximas festas 💕",
  },
];

function WhatsAppBubble({ t, index }: { t: typeof testimonials[0]; index: number }) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true }}
      transition={{ delay: index * 0.08 }}
      className="bg-white rounded-2xl overflow-hidden shadow-lg border border-gray-100 hover:shadow-xl transition-shadow"
    >
      {/* WhatsApp header */}
      <div className="bg-[#075e54] px-4 py-2.5 flex items-center gap-3">
        <div className={`w-8 h-8 rounded-full ${t.color} flex items-center justify-center text-white text-xs font-bold shrink-0`}>
          {t.avatar}
        </div>
        <div className="flex-1 min-w-0">
          <p className="text-white font-semibold text-sm truncate">{t.name}</p>
          <p className="text-emerald-300 text-[10px]">online</p>
        </div>
        <div className="flex gap-0.5">
          {[...Array(t.stars)].map((_, i) => (
            <span key={i} className="text-amber-400 text-xs">★</span>
          ))}
        </div>
      </div>

      {/* Chat area */}
      <div
        className="p-3 min-h-[80px]"
        style={{
          backgroundImage: "url('https://web.whatsapp.com/img/bg-chat-tile-light_04fcacde539c58cca6745483d4858c52.png')",
          backgroundSize: 'contain',
          backgroundRepeat: 'repeat',
        }}
      >
        {/* Message bubble */}
        <div className="bg-[#dcf8c6] rounded-lg rounded-tr-sm p-3 shadow-sm max-w-[90%] ml-auto relative">
          <p className="text-[#111] text-sm leading-relaxed font-medium">{t.message}</p>
          <div className="flex items-center justify-end gap-1 mt-1.5">
            <span className="text-[10px] text-gray-400">{t.time}</span>
            {/* Double blue checkmarks */}
            <svg viewBox="0 0 16 15" width="16" height="15" className="text-[#4fc3f7]">
              <path fill="currentColor" d="M15.01 3.316l-.478-.372a.365.365 0 0 0-.51.063L8.666 9.879a.32.32 0 0 1-.484.033l-.358-.325a.319.319 0 0 0-.484.032l-.378.483a.418.418 0 0 0 .036.541l1.32 1.266c.143.14.361.125.484-.033l6.272-8.048a.366.366 0 0 0-.064-.512zm-4.1 0l-.478-.372a.365.365 0 0 0-.51.063L4.566 9.879a.32.32 0 0 1-.484.033L1.891 7.769a.366.366 0 0 0-.515.006l-.423.433a.364.364 0 0 0 .006.514l3.258 3.185c.143.14.361.125.484-.033l6.272-8.048a.365.365 0 0 0-.063-.51z" />
            </svg>
          </div>
        </div>
      </div>
    </motion.div>
  );
}

export default function WhatsAppTestimonials() {
  return (
    <section className="py-24 bg-white border-y border-pink-100 relative overflow-hidden" id="depoimentos">
      <div className="absolute top-0 right-0 w-96 h-96 bg-emerald-100/40 blur-[120px] rounded-full pointer-events-none" />

      <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-emerald-200 bg-emerald-50 mb-6 text-emerald-700">
            <span className="text-sm font-bold uppercase tracking-wider">💬 O que as mães estão dizendo</span>
          </div>
          <h2 className="text-3xl md:text-5xl font-display font-bold mb-4 text-indigo-950">
            Famílias <span className="text-pink-500">encantadas.</span>
          </h2>
          <p className="text-indigo-500 font-medium text-lg">
            Mais de 10.000 festas criadas. Veja o que elas estão falando.
          </p>
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
          {testimonials.map((t, i) => (
            <WhatsAppBubble key={i} t={t} index={i} />
          ))}
        </div>

        <InlineCTA
          text="Eu Também Quero Fazer a Festa do Meu Filho!"
          subtext="Clica aqui e seja a próxima mãe encantada"
        />
      </div>
    </section>
  );
}
