import { motion } from 'framer-motion';
import { ImageIcon, Download, Clock, Headphones, Printer, Wand2 } from 'lucide-react';
import { cn } from '../lib/utils';

export default function Benefits() {
  const cards = [
    {
      title: "30 Artes em HD",
      description: "30 créditos para gerar as artes que você escolher do catálogo com mais de 21 modelos exclusivos — convites, topos, banners, tags, caixinhas e muito mais. Tudo com o rosto do seu filho.",
      icon: <ImageIcon className="w-8 h-8 text-pink-500" />,
      className: "md:col-span-2 bg-gradient-to-br from-pink-50 to-white hover:border-pink-300"
    },
    {
      title: "Download em Lote",
      description: "Baixe todas as suas artes de uma vez, em alta resolução, prontas para a gráfica ou impressora.",
      icon: <Download className="w-8 h-8 text-violet-500" />,
      className: "md:col-span-1 bg-gradient-to-br from-indigo-50 to-white hover:border-violet-300"
    },
    {
      title: "Válido por 60 Dias",
      description: "Sem pressão. Use seus créditos no seu ritmo — você tem 60 dias para gerar todas as artes.",
      icon: <Clock className="w-8 h-8 text-amber-500" />,
      className: "md:col-span-1 bg-gradient-to-br from-orange-50 to-white hover:border-amber-300"
    },
    {
      title: "100% Personalizado",
      description: "A IA transforma a foto do seu filho em um personagem 3D estilo Pixar aplicado em cada arte. Tema único, exclusivo, impossível de copiar.",
      icon: <Wand2 className="w-8 h-8 text-pink-500" />,
      className: "md:col-span-1 bg-gradient-to-br from-pink-50 to-white hover:border-pink-300"
    },
    {
      title: "Pronto para Imprimir",
      description: "Arquivos em PDF já formatados na medida certa. Leva pra gráfica ou imprime em casa — sem precisar de nenhum programa.",
      icon: <Printer className="w-8 h-8 text-emerald-500" />,
      className: "md:col-span-1 bg-gradient-to-br from-emerald-50 to-white hover:border-emerald-300"
    },
    {
      title: "Suporte Prioritário",
      description: "Atendimento dedicado via WhatsApp para clientes do Kit Festa. Nossa equipe te ajuda em qualquer etapa.",
      icon: <Headphones className="w-8 h-8 text-violet-500" />,
      className: "md:col-span-1 bg-gradient-to-br from-violet-50 to-white hover:border-violet-300"
    },
  ];

  return (
    <section className="py-24 relative overflow-hidden bg-white" id="benefits">
      <div className="absolute top-1/2 left-0 w-[500px] h-[500px] bg-pink-100/50 blur-[120px] rounded-full pointer-events-none -translate-y-1/2 opacity-60" />

      <div className="container mx-auto px-6 max-w-6xl relative z-10">
        <div className="mb-16 md:mb-20 text-center">
          <h2 className="text-3xl md:text-5xl font-display font-bold mb-6 tracking-tight text-indigo-950">
            Tudo para uma festa <br className="hidden md:block" /><span className="text-transparent bg-clip-text bg-gradient-to-r from-pink-500 to-violet-500">inesquecível.</span>
          </h2>
          <p className="text-lg text-indigo-800/70 max-w-2xl mx-auto font-medium">
            Kit completo com o que você precisa para decorar sem gastar uma fortuna e sem passar horas em lojas.
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 auto-rows-fr">
          {cards.map((card, i) => (
            <motion.div
              key={i}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true, margin: "-100px" }}
              transition={{ duration: 0.5, delay: i * 0.1 }}
              className={cn(
                "rounded-[2.5rem] border-2 border-indigo-50/50 p-10 flex flex-col transition-all duration-300 group shadow-xl shadow-indigo-100/50 hover:shadow-2xl relative bg-white",
                card.className
              )}
            >
              <div className="w-16 h-16 rounded-2xl bg-white shadow-sm border border-indigo-50 flex items-center justify-center mb-10 group-hover:scale-110 transition-transform relative z-20 shrink-0">
                {card.icon}
              </div>
              <div className="relative z-20 mt-auto">
                <h3 className="text-2xl font-display font-bold mb-4 text-indigo-950">{card.title}</h3>
                <p className="text-indigo-900/70 font-medium text-lg leading-relaxed">{card.description}</p>
              </div>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}
