const Footer = () => {
    return (
        <footer className="bg-atu-blue-deep text-white pt-24 pb-12 relative overflow-hidden">
            {/* Background pattern */}
            <div className="absolute inset-0 opacity-10 pointer-events-none">
                <div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(#2440CF_1px,transparent_1px)] [background-size:40px_40px]"></div>
            </div>

            <div className="container mx-auto px-6 relative z-10">
                <div className="grid lg:grid-cols-4 md:grid-cols-2 gap-16 mb-20">
                    <div className="space-y-8 lg:col-span-1">
                        <div className="flex transition-all hover:scale-105">
                            <img src="../../assets/ATU_JOBS_Logotipo_Blanco_negativo 1 (1).svg" alt="ATU JOBS" className="h-12 md:h-14 opacity-100" />
                        </div>
                        <p className="text-gray-400 text-sm leading-relaxed font-medium">
                            Comprometidos con la formación y la integración laboral en España. Ayudamos a personas a encontrar su camino en sectores con alta demanda.
                        </p>
                        <div className="flex gap-4">
                            {[
                                { name: 'facebook', icon: <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg> },
                                { name: 'instagram', icon: <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" viewBox="0 0 24 24"><rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" x2="17.51" y1="6.5" y2="6.5"></line></svg> },
                                { name: 'linkedin', icon: <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.238 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg> }
                            ].map((social) => (
                                <a key={social.name} href="#" className="w-12 h-12 bg-white/5 border border-white/10 rounded-xl flex items-center justify-center text-white hover:bg-atu-blue-vibrant hover:border-atu-blue-vibrant transition-all shadow-sm group">
                                    <div className="group-hover:scale-110 transition-transform">{social.icon}</div>
                                </a>
                            ))}
                        </div>
                    </div>

                    <div>
                        <h4 className="text-[10px] font-black text-atu-blue-bright uppercase tracking-[0.3em] mb-10">Contacto</h4>
                        <ul className="space-y-6">
                            <li className="flex items-center gap-4 text-gray-400 group">
                                <div className="w-10 h-10 bg-white/5 rounded-xl flex items-center justify-center group-hover:bg-atu-blue-vibrant transition-colors">
                                    <Icon name="mail" className="w-5 h-5 text-white" />
                                </div>
                                <a href="mailto:migrantes@grupoatu.com" className="hover:text-white transition-colors font-medium">migrantes@grupoatu.com</a>
                            </li>
                            <li className="flex items-center gap-4 text-gray-400 group">
                                <div className="w-10 h-10 bg-white/5 rounded-xl flex items-center justify-center group-hover:bg-atu-blue-vibrant transition-colors">
                                    <Icon name="phone" className="w-5 h-5 text-white" />
                                </div>
                                <span className="font-medium">+34 910 101 101</span>
                            </li>
                            <li className="flex items-center gap-4 text-gray-400 group">
                                <div className="w-10 h-10 bg-white/5 rounded-xl flex items-center justify-center group-hover:bg-atu-blue-vibrant transition-colors">
                                    <Icon name="map-pin" className="w-5 h-5 text-white" />
                                </div>
                                <span className="font-medium">Presencia en toda España</span>
                            </li>
                        </ul>
                    </div>

                    <div>
                        <h4 className="text-[10px] font-black text-atu-blue-bright uppercase tracking-[0.3em] mb-10">Explora</h4>
                        <ul className="space-y-5 text-gray-400 font-medium">
                            <li><a href="#form-section" className="hover:text-white transition-colors">Orientación Laboral</a></li>
                            <li><a href="#form-section" className="hover:text-white transition-colors">Sector Residencias</a></li>
                            <li><a href="#form-section" className="hover:text-white transition-colors">Cursos Gratuitos</a></li>
                            <li><a href="#form-section" className="hover:text-white transition-colors">Sobre Grupo ATU</a></li>
                        </ul>
                    </div>

                    <div>
                        <h4 className="text-[10px] font-black text-atu-blue-bright uppercase tracking-[0.3em] mb-10">Legal</h4>
                        <ul className="space-y-5 text-gray-400 font-medium text-sm">
                            <li><a href="#" className="hover:text-white transition-colors">Aviso Legal</a></li>
                            <li><a href="#" className="hover:text-white transition-colors">Política de Privacidad</a></li>
                            <li><a href="#" className="hover:text-white transition-colors">Política de Cookies</a></li>
                        </ul>
                    </div>
                </div>

                <div className="border-t border-white/10 pt-12 flex flex-col md:flex-row justify-between items-center gap-8">
                    <div className="flex items-center gap-4">
                        <p className="text-[10px] font-black text-gray-500 uppercase tracking-widest">
                            &copy; {new Date().getFullYear()} Grupo ATU · Todos los derechos reservados
                        </p>
                    </div>
                    <p className="text-xs text-gray-500 max-w-lg text-center md:text-right italic font-medium leading-relaxed opacity-60">
                        La información de esta página es meramente orientativa. Cada situación debe evaluarse individualmente y la solicitud no implica aceptación automática ni un resultado legal o laboral.
                    </p>
                </div>
            </div>
        </footer>
    );
};