const HowItWorks = () => {
    const steps = [
        {
            title: 'Completa el formulario',
            desc: 'Cuéntanos tu situación actual y tus objetivos para trabajar en España.'
        },
        {
            title: 'Análisis personalizado',
            desc: 'Un experto de Grupo ATU revisa tu caso y evalúa las opciones reales.'
        },
        {
            title: 'Orientación directa',
            desc: 'Te explicamos los pasos a seguir: desde formación hasta búsqueda de empleo.'
        },
        {
            title: 'Tu futuro empieza',
            desc: 'Empieza tu camino en un sector estable con nuestro acompañamiento.'
        }
    ];

    return (
        <section className="py-32 relative overflow-hidden bg-atu-n-50">
            <div className="container mx-auto px-6 relative z-10">
                <div className="text-center mb-24 reveal-on-scroll">
                    <h2 className="text-5xl md:text-7xl font-black text-atu-blue-deep mb-8 leading-tight tracking-tight">
                        Tu camino <br />
                        <span className="text-gradient">paso a paso</span>
                    </h2>
                    <p className="text-xl text-gray-600 max-w-2xl mx-auto">
                        Nuestro proceso está diseñado para darte claridad y seguridad en cada etapa.
                    </p>
                </div>
                
                <div className="relative">
                    {/* Connective Line (Desktop) */}
                    <div className="hidden lg:block absolute top-1/2 left-0 w-full h-1 bg-gradient-to-r from-atu-blue-vibrant/20 via-atu-blue-vibrant to-atu-blue-vibrant/20 -translate-y-1/2"></div>
                    
                    <div className="grid lg:grid-cols-4 gap-12 relative z-10">
                        {steps.map((step, idx) => (
                            <div key={idx} className="text-center group reveal-on-scroll" style={{ transitionDelay: `${idx * 150}ms` }}>
                                <div className="relative mb-10">
                                    <div className="w-24 h-24 bg-white text-atu-blue-vibrant rounded-[2rem] flex items-center justify-center text-4xl font-black mx-auto shadow-2xl group-hover:scale-110 transition-transform group-hover:bg-atu-blue-vibrant group-hover:text-white duration-500 ring-8 ring-atu-blue-vibrant/5">
                                        {idx + 1}
                                    </div>
                                    <div className="absolute -bottom-2 left-1/2 -translate-x-1/2 w-4 h-4 bg-atu-blue-bright rounded-full animate-ping opacity-20"></div>
                                </div>
                                <h3 className="text-2xl font-black text-atu-blue-deep mb-4 group-hover:text-atu-blue-vibrant transition-colors tracking-tight">{step.title}</h3>
                                <p className="text-gray-500 leading-relaxed text-lg">{step.desc}</p>
                            </div>
                        ))}
                    </div>
                </div>
                
                <div className="mt-24 text-center reveal-on-scroll">
                    <a href="#form-section" className="inline-flex items-center gap-4 px-12 py-6 bg-atu-blue-deep text-white rounded-full font-black hover:bg-atu-blue-vibrant transition-all hover:scale-105 shadow-2xl group">
                        Empezar mi proceso hoy
                        <Icon name="zap" className="w-6 h-6 text-atu-blue-bright fill-current" />
                    </a>
                </div>
            </div>
        </section>
    );
};