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

export default function Benefits() {
  const cards = [
    {
      title: "100% Personalizado",
      description: "A Inteligência Artificial transforma a foto da criança em um personagem 3D ao estilo dos filmes mais amados do cinema, garantindo um tema exclusivo e mágico.",
      icon: <Wand2 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: "Arquivos em PDF",
      description: "Esqueça dor de cabeça com formatação. Você recebe os itens em PDF, prontos para a impressora.",
      icon: <Printer 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: "Pronto na Hora",
      description: "Sem espera interminável por encomenda. Seu kit completo é gerado quase instantaneamente.",
      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: "21 Itens Exclusivos",
      description: "Convites interativos, caixa de pipoca, totens, saia de cupcake, tag de agradecimento, painéis, topo de bolo e muito mais.",
      icon: <Sparkles className="w-8 h-8 text-pink-500" />,
      className: "md:col-span-2 bg-gradient-to-r from-violet-50 to-pink-50 hover:border-pink-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">
            A forma mais inovadora de <br className="hidden md:block"/><span className="text-transparent bg-clip-text bg-gradient-to-r from-pink-500 to-violet-500">decorar a festa infantil.</span>
          </h2>
          <p className="text-lg text-indigo-800/70 max-w-2xl mx-auto font-medium">
            Tudo que você precisa para uma festa inesquecível, com a qualidade de um estúdio de animação.
          </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>
  );
}