
import Link from "next/link";
import { Facebook, Instagram, Twitter, Video } from "lucide-react";
import { Button } from "@/components/ui/button";

export default function Footer() {
  return (
    <footer className="bg-[#2C3E50] text-white">
      {/* Main Footer Content */}
      <div className="container-custom py-16">
        <div className="text-center">
          {/* CTA Section */}
          <div className="mb-12">
            <h2 className="heading-primary text-3xl md:text-4xl mb-4">
              ¿Quieres ser parte de Escuelas Deportivas de Chile?
            </h2>
            <p className="text-xl mb-8 max-w-3xl mx-auto leading-relaxed">
              <strong>Nuestra Misión</strong>
              <br />
              Somos una institución pionera dedicada a centralizar, validar y respaldar a las escuelas 
              deportivas de Chile, facilitando el desarrollo del talento deportivo nacional desde sus bases.
            </p>

            {/* CTA Buttons */}
            <div className="flex flex-col sm:flex-row gap-4 justify-center mb-12">
              <Button
                asChild
                size="lg"
                className="bg-[#00B8D4] hover:bg-[#0097A7] text-white px-8 py-3 rounded-full font-semibold transition-all duration-200 hover:scale-105"
              >
                <Link href="/registro-institucion">Registro Institución</Link>
              </Button>
              <Button
                asChild
                size="lg"
                className="bg-[#00B8D4] hover:bg-[#0097A7] text-white px-8 py-3 rounded-full font-semibold transition-all duration-200 hover:scale-105"
              >
                <Link href="/registro-instructor">Registro Instructor</Link>
              </Button>
            </div>

            {/* Social Media Icons */}
            <div className="flex justify-center space-x-6">
              <Link
                href="https://twitter.com"
                className="text-white hover:text-[#00B8D4] transition-colors duration-200"
                aria-label="Síguenos en Twitter"
                target="_blank"
                rel="noopener noreferrer"
              >
                <Twitter className="h-6 w-6" />
              </Link>
              <Link
                href="https://instagram.com"
                className="text-white hover:text-[#00B8D4] transition-colors duration-200"
                aria-label="Síguenos en Instagram"
                target="_blank"
                rel="noopener noreferrer"
              >
                <Instagram className="h-6 w-6" />
              </Link>
              <Link
                href="https://vimeo.com"
                className="text-white hover:text-[#00B8D4] transition-colors duration-200"
                aria-label="Nuestros videos en Vimeo"
                target="_blank"
                rel="noopener noreferrer"
              >
                <Video className="h-6 w-6" />
              </Link>
              <Link
                href="https://facebook.com"
                className="text-white hover:text-[#00B8D4] transition-colors duration-200"
                aria-label="Síguenos en Facebook"
                target="_blank"
                rel="noopener noreferrer"
              >
                <Facebook className="h-6 w-6" />
              </Link>
            </div>
          </div>
        </div>
      </div>

      {/* Bottom Bar */}
      <div className="bg-[#C4D600] text-[#2C3E50]">
        <div className="container-custom py-4">
          <div className="flex flex-col md:flex-row items-center justify-between text-sm">
            <div className="mb-2 md:mb-0">
              <span className="font-semibold">Copyright ©2024 Todos los derechos reservados</span>
              <span className="block md:inline md:ml-2">Escuelas Deportivas Chile</span>
            </div>
            <div className="flex space-x-4">
              <Link
                href="https://facebook.com"
                className="text-[#2C3E50] hover:text-[#0A2240] transition-colors duration-200"
                aria-label="Facebook"
                target="_blank"
                rel="noopener noreferrer"
              >
                <Facebook className="h-4 w-4" />
              </Link>
              <Link
                href="https://twitter.com"
                className="text-[#2C3E50] hover:text-[#0A2240] transition-colors duration-200"
                aria-label="Twitter"
                target="_blank"
                rel="noopener noreferrer"
              >
                <Twitter className="h-4 w-4" />
              </Link>
              <Link
                href="https://instagram.com"
                className="text-[#2C3E50] hover:text-[#0A2240] transition-colors duration-200"
                aria-label="Instagram"
                target="_blank"
                rel="noopener noreferrer"
              >
                <Instagram className="h-4 w-4" />
              </Link>
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
}
