import { motion } from 'framer-motion';
import { XCircle } from 'lucide-react';

export default function Problem() {
  const problems = [
    "Orçamentos de decoração que chegam a R$ 2.000,00.",
    "Aquela correria louca atrás de lojas e fornecedores.",
    "A frustração de ver todo ano 'os mesmos temas'.",
    "Não ter tempo ou habilidade para desenhar lembrancinhas do zero."
  ];

  return (
    <section className="py-24 border-y border-pink-100 bg-white">
      <div className="container mx-auto px-6 max-w-6xl">
        <div className="flex flex-col lg:flex-row items-center gap-12 lg:gap-16">
          
          {/* Left Text / Problems List */}
          <div className="flex-1">
            <h2 className="text-3xl md:text-5xl font-display font-bold mb-8 text-indigo-950">
              Sua vida de mãe já é corrida. <br className="hidden md:block"/><span className="text-pink-500">A festa não precisa ser um caos.</span>
            </h2>
            
            <div className="flex flex-col gap-4">
              {problems.map((problem, i) => (
                <motion.div
                  key={i}
                  initial={{ opacity: 0, x: -20 }}
                  whileInView={{ opacity: 1, x: 0 }}
                  viewport={{ once: true }}
                  transition={{ delay: i * 0.1 }}
                  className="p-5 rounded-2xl bg-pink-50 border border-pink-100 flex items-start gap-4 hover:shadow-lg transition-shadow"
                >
                  <div className="mt-1 bg-pink-200 rounded-full p-1 shrink-0">
                    <XCircle className="w-5 h-5 text-pink-600" />
                  </div>
                  <p className="text-lg text-indigo-900 font-medium">{problem}</p>
                </motion.div>
              ))}
            </div>
          </div>

          {/* Right Image/Illustration */}
          <motion.div 
            initial={{ opacity: 0, scale: 0.9 }}
            whileInView={{ opacity: 1, scale: 1 }}
            viewport={{ once: true }}
            transition={{ duration: 0.5 }}
            className="flex-1 w-full"
          >
            <div className="relative rounded-[2.5rem] overflow-hidden shadow-2xl border-4 border-white bg-slate-100">
              <img src="https://s3.seureview.com.br/festamagica/6a591904-cf2a-4a51-8581-1891373eea29/805441e0-925e-4674-b7b3-ba640431eeb1/topo-de-bolo.webp" alt="Solução mágica" className="w-full h-auto object-contain opacity-95 hover:scale-105 transition-transform duration-500" />
              <div className="absolute inset-0 bg-indigo-950/10 mix-blend-multiply pointer-events-none" />
            </div>
            {/* Small floating badge */}
            <div className="absolute top-[60%] sm:right-[10%] bg-white rounded-xl p-4 shadow-xl z-20 animate-bounce-slow">
              <p className="text-indigo-900 font-bold text-sm">Fim da correria 😍</p>
            </div>
          </motion.div>
        </div>
      </div>
    </section>
  );
}