import { motion } from 'framer-motion';
import { ArrowRight, Play, Sparkles, Star } from 'lucide-react';

export default function Hero() {
  return (
    <section className="relative pt-32 pb-20 md:pt-40 md:pb-24 overflow-hidden bg-pink-50">
      {/* Decorative Blobs */}
      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[500px] opacity-40 pointer-events-none">
        <div className="absolute top-10 left-10 w-64 h-64 bg-pink-400 blur-[80px] rounded-full mix-blend-multiply opacity-50 animate-float" />
        <div className="absolute top-20 right-10 w-72 h-72 bg-violet-400 blur-[80px] rounded-full mix-blend-multiply opacity-50 animate-pulse-slow" />
        <div className="absolute -bottom-10 left-40 w-60 h-60 bg-yellow-300 blur-[80px] rounded-full mix-blend-multiply opacity-50 animate-float" style={{ animationDelay: '2s' }} />
      </div>

      {/* Floating Elements / Stars */}
      <div className="absolute inset-0 pointer-events-none overflow-hidden">
        <Star className="absolute top-32 left-10 text-yellow-400 w-6 h-6 animate-pulse-slow" />
        <Star className="absolute top-40 right-20 text-pink-400 w-8 h-8 animate-float" />
        <div className="absolute top-[40%] left-[15%] w-3 h-3 rounded-full bg-violet-400 animate-bounce-slow" />
        <div className="absolute top-[60%] right-[10%] w-4 h-4 rounded-full bg-pink-400 animate-float" />
      </div>

      <div className="container mx-auto px-6 max-w-7xl relative z-10">
        <div className="flex flex-col lg:flex-row items-center gap-12 lg:gap-20">
          {/* Text Content */}
          <div className="flex-1 flex flex-col items-center lg:items-start text-center lg:text-left pt-10">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5 }}
              className="inline-flex items-center gap-2 px-5 py-2.5 rounded-full border border-pink-200 bg-white/60 backdrop-blur-md mb-8 text-pink-600 shadow-sm"
            >
              <Sparkles className="w-4 h-4 text-amber-500 animate-pulse" />
              <span className="text-sm font-bold uppercase tracking-wider">A Festa do Ano Chegou</span>
            </motion.div>

            <motion.h1 
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: 0.1 }}
              className="text-4xl md:text-5xl lg:text-6xl xl:text-[4.5rem] tracking-tight leading-[1.1] font-display font-bold text-indigo-950 mb-6"
            >
              Transforme a foto do seu filho<br className="hidden md:block"/> em uma 
              <span className="text-gradient"> Festa Mágica!</span>
            </motion.h1>

            <motion.p 
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: 0.2 }}
              className="text-lg md:text-xl text-indigo-800/80 mb-10 max-w-xl font-medium leading-relaxed"
            >
              Pare de gastar horas procurando decoração. Envie uma foto e nossa IA cria um <strong>Kit Digital com 21 Itens Exclusivos</strong>, com o rostinho do seu filho no estilo de personagens de cinema! Prontinho para imprimir.
            </motion.p>

            <motion.div 
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: 0.4 }}
              className="flex flex-col sm:flex-row items-center gap-4 w-full justify-center lg:justify-start"
            >
              <a 
                href="#oferta" 
                onClick={() => {
                  if (typeof window !== 'undefined' && 'fbq' in window) {
                    (window as any).fbq('track', 'InitiateCheckout');
                  }
                }}
                className="w-full sm:w-auto h-16 px-10 rounded-full bg-gradient-to-r from-pink-500 to-violet-500 text-white font-bold text-xl flex items-center justify-center gap-3 hover:scale-105 hover:shadow-2xl transition-all shadow-xl shadow-pink-500/30"
              >
                Criar Minha Festa Agora <Wand2Icon className="w-6 h-6" />
              </a>
              <div className="flex flex-col items-center sm:items-start text-indigo-600/70 text-xs sm:text-sm mt-3 sm:mt-0 font-medium">
                <div className="flex items-center gap-1 mb-1">
                  {[...Array(5)].map((_, i) => <Star key={i} className="w-4 h-4 text-amber-500 fill-amber-500" />)}
                </div>
                <span>Mais de 10.000 mães<br/>já fizeram a festa!</span>
              </div>
            </motion.div>
          </div>

          {/* Right Image Content */}
          <motion.div 
            initial={{ opacity: 0, scale: 0.95, rotate: -2 }}
            animate={{ opacity: 1, scale: 1, rotate: 0 }}
            transition={{ duration: 0.8, delay: 0.3 }}
            className="flex-1 w-full max-w-2xl lg:max-w-none relative"
          >
            {/* The Image from the User */}
            <div className="relative rounded-[2rem] overflow-hidden border-8 border-white shadow-2xl rotate-2 hover:rotate-0 transition-transform duration-500">
              <img 
                src="https://s3.seureview.com.br/festamagica/6a591904-cf2a-4a51-8581-1891373eea29/805441e0-925e-4674-b7b3-ba640431eeb1/topo-de-bolo.webp" 
                className="w-full h-auto object-cover aspect-square md:aspect-[4/3] lg:aspect-square"
                alt="Resultado impressionante de antes e depois da transformação da criança para personagem 3D de festa"
                fetchPriority="high"
              />
              <div className="absolute inset-0 ring-1 ring-inset ring-black/10 rounded-[1.5rem]" />
              
              {/* Badge floating */}
              <div className="absolute top-6 right-6 bg-white rounded-2xl p-3 shadow-xl transform rotate-12 animate-float">
                <div className="bg-pink-100 text-pink-600 font-bold text-xs px-3 py-1.5 rounded-lg mb-1 flex items-center gap-1">
                  <Sparkles className="w-3 h-3" /> Fica Perfeito
                </div>
              </div>
            </div>

            {/* Decorative background for the image */}
            <div className="absolute -inset-6 bg-gradient-to-tr from-pink-400 to-violet-500 blur-2xl opacity-20 -z-10 rounded-full" />
          </motion.div>
        </div>
      </div>
    </section>
  );
}

function Wand2Icon({ className }: { className?: string }) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}>
      <path d="M15 4V2"/>
      <path d="M15 16v-2"/>
      <path d="M8 9h2"/>
      <path d="M20 9h2"/>
      <path d="M17.8 11.8 19 13"/>
      <path d="M15 9h0"/>
      <path d="M17.8 6.2 19 5"/>
      <path d="m3 21 9-9"/>
      <path d="M12.2 6.2 11 5"/>
    </svg>
  );
}