const Hero = () => {
    return (
        <section className="relative min-h-[95vh] flex items-center pt-12 pb-24 md:pt-20 md:pb-32 overflow-hidden mesh-gradient">
            {/* Animated decorative shapes */}
            <div className="floating-blob w-96 h-96 bg-atu-blue-vibrant/10 top-0 -right-20"></div>
            <div className="floating-blob w-80 h-80 bg-atu-blue-bright/10 bottom-0 -left-20" style={{ animationDelay: '-5s' }}></div>

            <div className="container mx-auto px-6 relative z-10 grid lg:grid-cols-12 gap-16 items-center">
                <div className="lg:col-span-7 space-y-12 reveal-on-scroll">
                    <div className="inline-flex items-center gap-3 px-5 py-2.5 bg-white/70 backdrop-blur-xl rounded-full border border-atu-blue-vibrant/20 shadow-xl shadow-atu-blue-vibrant/5">
                        <span className="flex h-3 w-3 relative">
                            <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-atu-blue-vibrant opacity-75"></span>
                            <span className="relative inline-flex rounded-full h-3 w-3 bg-atu-blue-vibrant"></span>
                        </span>
                        <span className="text-[10px] font-black text-atu-blue-vibrant uppercase tracking-[0.3em]">Conexión Directa con Residencias</span>
                    </div>
                    
                    <div className="relative">
                        <h1 className="text-7xl md:text-[7rem] font-black text-atu-blue-deep leading-[0.9] tracking-tighter">
                            Trabaja en <br />
                            <span className="text-gradient italic relative">
                                residencias
                                <svg className="absolute -bottom-2 left-0 w-full h-4 text-atu-blue-bright/30" viewBox="0 0 200 20" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M0 15 Q 50 5 100 15 T 200 15" stroke="currentColor" strokeWidth="8" fill="none" strokeLinecap="round" />
                                </svg>
                            </span> <br />
                            <span className="text-atu-blue-vibrant">en España</span>
                        </h1>
                    </div>
                    
                    <p className="text-xl md:text-2xl text-gray-600 leading-relaxed max-w-xl border-l-8 border-atu-blue-vibrant/10 pl-8 font-medium">
                        Un sector con alta demanda que te ofrece estabilidad y un propósito real. 
                        Te orientamos paso a paso para que empieces tu carrera en cuidados.
                    </p>
                    
                    <div className="flex flex-col sm:flex-row gap-6 pt-6">
                        <a href="#form-section" className="px-12 py-6 button-shimmer text-white rounded-[2.5rem] font-black shadow-2xl shadow-atu-blue-vibrant/40 hover:scale-105 active:scale-95 transition-all text-center text-xl flex items-center justify-center gap-3 group">
                            Quiero trabajar ahora
                            <Icon name="arrow-right" className="w-6 h-6 group-hover:translate-x-2 transition-transform" />
                        </a>
                        <a href="#form-section" className="px-12 py-6 bg-white/80 backdrop-blur-md text-atu-blue-vibrant border-2 border-atu-blue-vibrant/20 rounded-[2.5rem] font-black hover:bg-white hover:border-atu-blue-vibrant transition-all text-center text-xl shadow-xl shadow-gray-200/50">
                            Evaluar mi situación
                        </a>
                    </div>
                </div>
                
                <div className="lg:col-span-5 relative reveal-on-scroll" style={{ transitionDelay: '300ms' }}>
                    <div className="relative p-4 premium-card rounded-[4.5rem]">
                        <div className="aspect-[4/5] relative overflow-hidden rounded-[3.5rem] shimmer">
                            <img 
                                src="https://images.unsplash.com/photo-1576091160550-2173dba999ef?auto=format&fit=crop&q=80&w=1000" 
                                alt="Cuidado de personas mayores premium" 
                                className="w-full h-full object-cover scale-105 hover:scale-110 transition-transform duration-1000"
                            />
                            <div className="absolute inset-0 bg-gradient-to-t from-atu-blue-deep/60 via-transparent to-transparent"></div>
                            
                            {/* Glass overlay badge */}
                            <div className="absolute bottom-10 left-10 right-10 glass-card p-8 rounded-[2.5rem] border-white/30 backdrop-blur-2xl">
                                <p className="text-atu-blue-deep font-black italic text-2xl leading-tight">"Un sector que necesita personas como tú."</p>
                            </div>
                        </div>
                    </div>
                    
                    {/* Floating creative elements */}
                    <div className="absolute -top-12 -right-12 w-32 h-32 bg-atu-blue-bright rounded-[2.5rem] rotate-12 flex items-center justify-center text-white shadow-[0_20px_50px_rgba(36,64,207,0.3)] floating-element">
                        <Icon name="heart" className="w-16 h-16" />
                    </div>
                    
                    <div className="absolute -bottom-16 -left-12 glass-card p-6 rounded-[2.5rem] flex items-center gap-6 shadow-2xl border-white/50 floating-element" style={{ animationDelay: '-3s' }}>
                        <div className="w-16 h-16 bg-gradient-to-br from-atu-blue-vibrant to-atu-blue-deep text-white rounded-3xl flex items-center justify-center shadow-lg">
                            <Icon name="users" className="w-8 h-8" />
                        </div>
                        <div>
                            <p className="text-[10px] text-gray-500 font-black uppercase tracking-[0.2em] mb-1">Demanda Actual</p>
                            <p className="text-2xl font-black text-atu-blue-deep">+5.000 vacantes</p>
                        </div>
                    </div>

                    {/* Additional accent circle */}
                    <div className="absolute top-1/2 -right-16 w-24 h-24 border-4 border-atu-blue-bright/20 rounded-full animate-spin-slow"></div>
                </div>
            </div>
        </section>
    );
};