import { MapPin, Mail, Phone, ExternalLink } from 'lucide-react';

export default function Footer() {
    return (
        <footer className="bg-slate-50 dark:bg-slate-900 text-slate-700 dark:text-white border-t border-slate-200 dark:border-slate-700">
            {/* Main Footer Content */}
            <div className="container mx-auto px-6 py-12">
                <div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
                    {/* Logo y Descripción */}
                    <div className="lg:col-span-2">
                        <div className="flex items-center gap-4 mb-6">
                            {/* Logo Universidad de Córdoba */}
                            <img
                                src="/assets/img/logo_unicordoba.png"
                                alt="Universidad de Córdoba"
                                className="h-16 w-auto"
                                onError={(e) => {
                                    const target = e.target as HTMLImageElement;
                                    target.style.display = 'none';
                                }}
                            />
                            <div>
                                <h3 className="text-xl font-bold text-emerald-600 dark:text-emerald-400">
                                    Universidad de Córdoba
                                </h3>
                                <p className="text-sm text-slate-600 dark:text-slate-400">
                                    Plataforma MíRATE - Mapa de Innovación Educativa
                                </p>
                            </div>
                        </div>

                        <p className="text-slate-600 dark:text-slate-300 leading-relaxed mb-4">
                            Reconociendo y visibilizando la innovación educativa a través de un mapa digital
                            interactivo que facilita la transferencia de metodologías y la escalabilidad de
                            resultados educativos.
                        </p>

                        {/* Logos de socios */}
                        <div className="flex items-center gap-4">
                            <img
                                src="/assets/img/logo_mirate.png"
                                alt="MíRATE"
                                className="h-12 w-auto dark:hidden"
                                onError={(e) => {
                                    const target = e.target as HTMLImageElement;
                                    target.style.display = 'none';
                                }}
                            />

                            <img
                                src="/assets/img/logo_mirate_claro.png"
                                alt="MíRATE"
                                className="hidden h-12 w-auto dark:block"
                                onError={(e) => {
                                    const target = e.target as HTMLImageElement;
                                    target.style.display = 'none';
                                }}
                            />

                            <img
                                src="/assets/img/logo_cymted.png"
                                alt="CYMTED"
                                className="h-12 w-auto dark:hidden"
                                onError={(e) => {
                                    const target = e.target as HTMLImageElement;
                                    target.style.display = 'none';
                                }}
                            />

                            <img
                                src="/assets/img/logo_cymted_fondos_oscuros.png"
                                alt="CYMTED Fondos Oscuros"
                                className="hidden h-12 w-auto dark:block"
                                onError={(e) => {
                                    const target = e.target as HTMLImageElement;
                                    target.style.display = 'none';
                                }}
                            />

                            <img
                                src="/assets/img/UNIVERSIDAD_DE_CORDOBA_COLOMBIA.png"
                                alt="ASCUN"
                                className="h-12 w-auto"
                                onError={(e) => {
                                    const target = e.target as HTMLImageElement;
                                    target.style.display = 'none';
                                }}
                            />
                        </div>
                    </div>

                    {/* Enlaces Rápidos */}
                    <div>
                        <h4 className="text-lg font-semibold text-emerald-600 dark:text-emerald-400 mb-4">
                            Enlaces Rápidos
                        </h4>
                        <ul className="space-y-3">
                            <li>
                                <a
                                    href="#inicio"
                                    className="text-slate-600 dark:text-slate-300 hover:text-emerald-600 dark:hover:text-emerald-400 transition-colors flex items-center gap-2"
                                >
                                    Inicio
                                </a>
                            </li>
                            <li>
                                <a
                                    href="/map"
                                    className="text-slate-600 dark:text-slate-300 hover:text-emerald-600 dark:hover:text-emerald-400 transition-colors flex items-center gap-2"
                                >
                                    Explorar Mapa
                                    <ExternalLink className="w-3 h-3" />
                                </a>
                            </li>
                            <li>
                                <a
                                    href="/register"
                                    className="text-slate-600 dark:text-slate-300 hover:text-emerald-600 dark:hover:text-emerald-400 transition-colors flex items-center gap-2"
                                >
                                    Registrar Proyecto
                                    <ExternalLink className="w-3 h-3" />
                                </a>
                            </li>
                            <li>
                                <a
                                    href="#mission-vision"
                                    className="text-slate-600 dark:text-slate-300 hover:text-emerald-600 dark:hover:text-emerald-400 transition-colors"
                                >
                                    ¿Quiénes somos?
                                </a>
                            </li>
                            <li>
                                <a
                                    href="/login"
                                    className="text-slate-600 dark:text-slate-300 hover:text-emerald-600 dark:hover:text-emerald-400 transition-colors flex items-center gap-2"
                                >
                                    Acceso Investigadores
                                    <ExternalLink className="w-3 h-3" />
                                </a>
                            </li>
                        </ul>
                    </div>

                    {/* Contacto */}
                    <div>
                        <h4 className="text-lg font-semibold text-emerald-600 dark:text-emerald-400 mb-4">
                            Contacto
                        </h4>
                        <ul className="space-y-3">
                            <li className="flex items-start gap-3">
                                <MapPin className="w-5 h-5 text-emerald-600 dark:text-emerald-400 mt-0.5 flex-shrink-0" />
                                <div className="text-slate-600 dark:text-slate-300">
                                    <p className="font-medium">Universidad de Córdoba</p>
                                    <p className="text-sm">Montería, Córdoba - Colombia</p>
                                </div>
                            </li>
                            <li className="flex items-center gap-3">
                                <Mail className="w-5 h-5 text-emerald-600 dark:text-emerald-400 flex-shrink-0" />
                                <a
                                    href="mailto:mirate@unicordoba.edu.co"
                                    className="text-slate-600 dark:text-slate-300 hover:text-emerald-600 dark:hover:text-emerald-400 transition-colors"
                                >
                                    cymtedl@correo.unicordoba.edu.co
                                </a>
                            </li>
                            <li className="flex items-center gap-3">
                                <Phone className="w-5 h-5 text-emerald-600 dark:text-emerald-400 flex-shrink-0" />
                                <span
                                    className="text-slate-600 dark:text-slate-300 hover:text-emerald-600 dark:hover:text-emerald-400 transition-colors"
                                >
                                    +57 3015114024
                                </span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            {/* Bottom Copyright Bar */}
            <div className="border-t border-slate-200 dark:border-slate-800">
                <div className="container mx-auto px-6 py-4">
                    <div className="flex flex-col md:flex-row justify-between items-center gap-4">
                        <p className="text-slate-500 dark:text-slate-400 text-sm">
                            © 2026 Universidad de Córdoba - Plataforma MíRATE. Todos los derechos reservados.
                        </p>
                        <div className="flex items-center gap-6">
                            <a
                                href="/privacy"
                                className="text-slate-500 dark:text-slate-400 hover:text-emerald-600 dark:hover:text-emerald-400 transition-colors text-sm"
                            >
                                Política de Privacidad
                            </a>
                            <a
                                href="/terms"
                                className="text-slate-500 dark:text-slate-400 hover:text-emerald-600 dark:hover:text-emerald-400 transition-colors text-sm"
                            >
                                Términos de Uso
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
    );
}