import Link from "next/link"
import { Facebook, Instagram, Twitter, Youtube, Mail } from "lucide-react"

export function Footer() {
  const currentYear = new Date().getFullYear()

  const navLinks = [
    { href: "/", label: "Inicio" },
    { href: "/cruce-de-los-andes", label: "Cruce de los Andes" },
    { href: "/actividades", label: "Actividades" },
    { href: "/contacto", label: "Contacto" },
  ]

  const socialLinks = [
    { href: "https://www.facebook.com/crucedelosandes", label: "Facebook", icon: Facebook, target: "_blank", rel: "noopener noreferrer" },
    { href: "https://www.instagram.com/crucedelosandesok", label: "Instagram", icon: Instagram, target: "_blank", rel: "noopener noreferrer" },
    { href: "https://www.youtube.com/@CrucedelosAndes-acscb", label: "YouTube", icon: Youtube, target: "_blank", rel: "noopener noreferrer" },
  ]

  const contactEmails = [
    { role: "Secretaría", email: "secretaria@crucedelosandes.com.ar" },
    { role: "Presidencia", email: "presidencia@crucedelosandes.com.ar" },
    { role: "Información", email: "info@crucedelosandes.com.ar" },
    
  ]

  return (
    <footer className="border-t border-border bg-muted/30">
      <div className="container mx-auto px-4 py-12">
        <div className="grid grid-cols-1 md:grid-cols-12 gap-8">
          {/* Información */}
          <div className="md:col-span-4">
            <h2 className="text-lg font-semibold text-foreground mb-3">
              Asociación Cultural Sanmartiniana &quot;Cuna de la Bandera&quot;
            </h2>
            <p className="text-sm text-muted-foreground leading-relaxed">
              Dedicados a preservar y difundir el legado del General José de San Martín y la gesta libertadora del Cruce
              de los Andes.
            </p>
          </div>

          <div className="md:col-span-3">
            <h3 className="text-sm font-semibold text-foreground mb-3">Contactos</h3>
            <ul className="flex flex-col gap-2">
              {contactEmails.map((contact) => (
                <li key={contact.email}>
                  <a
                    href={`mailto:${contact.email}`}
                    className="text-sm text-muted-foreground hover:text-primary focus:text-primary focus:outline-none transition-colors flex items-start gap-2"
                  >
                    <Mail className="h-4 w-4 mt-0.5 flex-shrink-0" />
                    <div>
                      <span className="font-medium block">{contact.role}</span>
                      <span className="block">{contact.email}</span>
                    </div>
                  </a>
                </li>
              ))}
            </ul>
          </div>

          {/* Enlaces */}
          <nav className="md:col-span-3" aria-label="Enlaces del pie de página">
            <h3 className="text-sm font-semibold text-foreground mb-3">Navegación</h3>
            <ul className="flex flex-col gap-2">
              {navLinks.map((link) => (
                <li key={link.href}>
                  <Link
                    href={link.href}
                    className="text-sm text-muted-foreground hover:text-primary focus:text-primary focus:outline-none focus:underline transition-colors"
                  >
                    {link.label}
                  </Link>
                </li>
              ))}
            </ul>
          </nav>

          {/* Redes sociales */}
          <div className="md:col-span-2">
            <h3 className="text-sm font-semibold text-foreground mb-3">Síguenos</h3>
            <div className="flex gap-3">
              {socialLinks.map((social) => {
                const Icon = social.icon
                return (
                  <a
                    key={social.label}
                    href={social.href}
                    className="flex items-center justify-center w-10 h-10 rounded-md bg-muted hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 transition-colors"
                    aria-label={social.label}
                  >
                    <Icon className="h-5 w-5" />
                  </a>
                )
              })}
            </div>
          </div>
        </div>

        <div className="mt-8 pt-8 border-t border-border flex flex-col md:flex-row items-center justify-between gap-4">
          <p className="text-sm text-muted-foreground text-center md:text-left">
            © {currentYear} Asociación Cultural Sanmartiniana &quot;Cuna de la Bandera&quot;. Todos los derechos
            reservados.
          </p>
          <Link
            href="#"
            className="text-sm text-muted-foreground hover:text-primary focus:text-primary focus:outline-none focus:underline transition-colors"
          >
            Política de Privacidad
          </Link>
        </div>
      </div>
    </footer>
  )
}