const ForWho = () => {
    const items = [
        {
            icon: 'map-pin',
            title: 'En España',
            desc: 'Estás en España y quieres trabajar en un sector con futuro.',
        },
        {
            icon: 'file-text',
            title: 'Regularización',
            desc: 'Buscas un camino laboral concreto mientras regularizas tu situación.',
        },
        {
            icon: 'globe',
            title: 'Desde el exterior',
            desc: 'Quieres conocer las opciones reales para trabajar en España.',
        },
        {
            icon: 'graduation-cap',
            title: 'Sin experiencia',
            desc: 'No necesitas titulación previa para empezar tu camino con nosotros.',
        },
        {
            icon: 'briefcase',
            title: 'Vocación real',
            desc: 'Tienes experiencia en cuidados o simplemente ganas de ayudar.',
        }
    ];

    return (
        <section className="py-40 relative overflow-hidden bg-white/50">
            {/* Decorative background mesh */}
            <div className="absolute top-0 inset-x-0 h-px bg-gradient-to-r from-transparent via-atu-blue-vibrant/20 to-transparent"></div>
            
            <div className="container mx-auto px-6 relative z-10">
                <div className="max-w-5xl mb-24 text-center mx-auto">
                    <div className="inline-block px-4 py-1.5 bg-atu-blue-bright/10 rounded-full mb-6">
                        <p className="text-[10px] font-black text-atu-blue-bright uppercase tracking-[0.3em]">Perfiles más comunes</p>
                    </div>
                    <h2 className="text-5xl md:text-7xl font-black text-atu-blue-deep mb-8 leading-[0.95] tracking-tighter">
                        Este es tu momento <br />
                        <span className="text-gradient italic">si te identificas con esto</span>
                    </h2>
                    <p className="text-xl text-gray-500 max-w-2xl mx-auto font-medium">
                        Buscamos personas comprometidas, sin importar de dónde vengan o cuál sea su formación previa.
                    </p>
                </div>
                
                <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-10">
                    {items.map((item, idx) => (
                        <div key={idx} className="group p-12 premium-card rounded-[3.5rem] relative overflow-hidden">
                            <div className="w-20 h-20 bg-gradient-to-br from-atu-blue-bright/5 to-white rounded-3xl border border-atu-blue-bright/10 flex items-center justify-center mb-10 group-hover:bg-atu-blue-vibrant group-hover:text-white transition-all duration-700 group-hover:rotate-[15deg] group-hover:scale-110 shadow-sm">
                                <Icon name={item.icon} className="w-10 h-10" />
                            </div>
                            <h3 className="text-3xl font-black text-atu-blue-deep mb-6 group-hover:text-atu-blue-vibrant transition-colors tracking-tight">{item.title}</h3>
                            <p className="text-gray-600 text-lg leading-relaxed font-medium">{item.desc}</p>
                            
                            {/* Decorative element */}
                            <div className="absolute -bottom-6 -right-6 w-24 h-24 bg-atu-blue-bright/5 rounded-full blur-2xl group-hover:bg-atu-blue-vibrant/10 transition-colors"></div>
                        </div>
                    ))}
                    
                    {/* Creative CTA Card */}
                    <div className="p-12 bg-atu-blue-deep rounded-[3.5rem] flex flex-col justify-center items-center text-center text-white relative overflow-hidden group shadow-2xl shadow-atu-blue-deep/30 hover:scale-[1.02] transition-transform duration-500">
                        <div className="absolute inset-0 bg-gradient-to-br from-atu-blue-vibrant to-atu-blue-deep opacity-80"></div>
                        <div className="relative z-10 flex flex-col items-center">
                            <div className="w-24 h-24 bg-white/10 backdrop-blur-md rounded-full flex items-center justify-center mb-8 border border-white/20 animate-pulse">
                                <Icon name="sparkles" className="w-12 h-12 text-white" />
                            </div>
                            <h3 className="text-3xl font-black mb-6 tracking-tight">¿Es tu caso?</h3>
                            <a href="#form-section" className="px-10 py-4 bg-white text-atu-blue-deep rounded-[2rem] font-black hover:bg-atu-blue-bright hover:text-white transition-all shadow-xl text-lg">
                                Cuéntanos más
                            </a>
                        </div>
                        
                        {/* Shimmer on card */}
                        <div className="absolute inset-0 shimmer opacity-20 pointer-events-none"></div>
                    </div>
                </div>
            </div>
            
            <div className="absolute bottom-0 inset-x-0 h-px bg-gradient-to-r from-transparent via-atu-blue-vibrant/20 to-transparent"></div>
        </section>
    );
};