import Image from "next/image";
import Link from "next/link";

const academicLinks = [
  { href: "/courses", label: "Formación Académica" },
  { href: "/case-studies", label: "Casos prácticos" },
  { href: "/practice", label: "Retos" },
  { href: "/eventos", label: "Eventos" },
  { href: "/noticias", label: "Noticias", id: "footer-news" },
  { href: "/comunidad", label: "Comunidad", id: "footer-community" },
];

const institutionalLinks = [
  { href: "/auth/login", label: "Ingresa" },
  { href: "/#footer-contact", label: "Contáctanos" },
  { href: "/sobre-acve", label: "Sobre ACVE", id: "footer-about" },
  { href: "mailto:academico@acve.mx", label: "Retroalimentación", external: true },
];

const legalLinks = [
  { href: "/#privacy", label: "Aviso de Privacidad" },
  { href: "/#terms", label: "Términos y Condiciones" },
];

export default function Footer() {
  return (
    <footer className="border-t border-border/80 bg-card/95">
      <div className="mx-auto w-full max-w-[1300px] px-4 py-12 md:px-6">
        <div className="grid gap-10 md:grid-cols-2 xl:grid-cols-[1.4fr_1fr_1fr_1fr]">
          <section className="space-y-6">
            <Link className="inline-flex items-center gap-3" href="/">
              <div className="rounded-xl bg-primary/10 p-2 ring-1 ring-primary/20">
                <Image alt="ACVE logo" className="h-10 w-10 rounded-lg object-cover" height={40} src="/images/logo.png" width={40} />
              </div>
              <div>
                <p className="text-xl font-bold tracking-tight text-primary">ACVE Centro de Estudios</p>
                <p className="text-sm text-muted-foreground">Empowering Lawyer one word at a time</p>
              </div>
            </Link>

            <div className="space-y-2 text-sm text-muted-foreground" id="footer-contact">
              <p className="font-semibold text-foreground">Contacto</p>
              <p>Av. José Vasconcelos 345, Torre Tanarah Piso 23, San Pedro, N.L., México.</p>
              <p>
                Teléfono:{" "}
                <a className="text-primary hover:underline" href="tel:+528117789777">
                  +52-81-17-78-97-77
                </a>
              </p>
              <p>
                Correo:{" "}
                <a className="text-primary hover:underline" href="mailto:academico@acve.mx">
                  academico@acve.mx
                </a>
              </p>
            </div>
          </section>

          <nav className="space-y-3 text-sm">
            <p className="font-semibold text-foreground">Navegación</p>
            {academicLinks.map((link) => (
              <Link key={link.label} className="block text-muted-foreground transition hover:text-primary" href={link.href} id={link.id}>
                {link.label}
              </Link>
            ))}
          </nav>

          <nav className="space-y-3 text-sm">
            <p className="font-semibold text-foreground">Institucional</p>
            {institutionalLinks.map((link) =>
              link.external ? (
                <a key={link.label} className="block text-muted-foreground transition hover:text-primary" href={link.href} id={link.id}>
                  {link.label}
                </a>
              ) : (
                <Link key={link.label} className="block text-muted-foreground transition hover:text-primary" href={link.href} id={link.id}>
                  {link.label}
                </Link>
              ),
            )}
          </nav>

          <nav className="space-y-3 text-sm">
            <p className="font-semibold text-foreground">Legal</p>
            {legalLinks.map((link) => (
              <Link key={link.label} className="block text-muted-foreground transition hover:text-primary" href={link.href} id={link.href.slice(2)}>
                {link.label}
              </Link>
            ))}
          </nav>
        </div>

        <div className="mt-10 border-t border-border/70 pt-5 text-xs text-muted-foreground">
          <p>© {new Date().getFullYear()} ACVE Centro de Estudios. Todos los derechos reservados.</p>
        </div>
      </div>
    </footer>
  );
}