const WhyCareHomes = () => {
    const reasons = [
        {
            title: 'Propósito Real',
            desc: 'Trabajarás ayudando a quienes más lo necesitan, haciendo una diferencia real cada día.',
            icon: 'heart'
        },
        {
            title: 'Estabilidad de Futuro',
            desc: 'Un sector en constante crecimiento con una demanda de personal que no deja de aumentar.',
            icon: 'trending-up'
        },
        {
            title: 'Crecimiento Profesional',
            desc: 'Oportunidades constantes de especialización y ascenso dentro del sector de cuidados.',
            icon: 'user-plus'
        },
        {
            title: 'Seguridad Laboral',
            desc: 'Contratos estables en empresas consolidadas que valoran tu compromiso.',
            icon: 'shield-check'
        }
    ];

    return (
        <section className="py-32 relative overflow-hidden bg-white">
            <div className="absolute inset-0 z-0 opacity-30">
                <div className="absolute top-0 right-0 w-[500px] h-[500px] bg-atu-blue-vibrant rounded-full blur-[120px]" />
                <div className="absolute bottom-0 left-0 w-[500px] h-[500px] bg-blue-300 rounded-full blur-[120px]" />
            </div>

            <div className="container mx-auto px-6 relative z-10">
                <div className="text-center max-w-3xl mx-auto mb-20 reveal-on-scroll">
                    <div className="inline-flex items-center gap-2 px-4 py-2 bg-atu-blue-vibrant/10 rounded-full text-atu-blue-vibrant font-bold mb-6">
                        <Icon name="check-circle" className="w-5 h-5" />
                        <span>Alta Demanda Laboral</span>
                    </div>
                    <h2 className="text-5xl md:text-6xl font-black text-atu-blue-deep mb-8 leading-tight tracking-tight">
                        ¿Por qué elegir el <br />
                        <span className="text-transparent bg-clip-text bg-gradient-to-r from-atu-blue-vibrant to-blue-500">sector de cuidados?</span>
                    </h2>
                    <p className="text-xl text-gray-600 leading-relaxed">
                        No es solo un trabajo, es una carrera con propósito, estabilidad y futuro real en España.
                    </p>
                </div>

                <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
                    {reasons.map((reason, idx) => (
                        <div key={idx} className="group p-10 bg-white/40 backdrop-blur-xl border border-white/50 rounded-[3rem] hover:bg-white/80 transition-all duration-500 reveal-on-scroll" style={{ transitionDelay: `${idx * 100}ms` }}>
                            <div className="w-16 h-16 bg-gradient-to-br from-atu-blue-vibrant to-atu-blue-bright text-white rounded-2xl flex items-center justify-center mb-8 shadow-lg group-hover:rotate-12 transition-transform">
                                <Icon name={reason.icon} className="w-8 h-8" />
                            </div>
                            <h3 className="text-2xl font-black text-atu-blue-deep mb-4 group-hover:text-atu-blue-vibrant transition-colors tracking-tight">{reason.title}</h3>
                            <p className="text-gray-500 leading-relaxed text-lg">{reason.desc}</p>
                        </div>
                    ))}
                </div>
            </div>
        </section>
    );
};