import { Facebook, Instagram, Twitter, Youtube, Volleyball } from "lucide-react";
import { Button } from "@/components/ui/button";

const Footer = () => {
  const currentYear = new Date().getFullYear();
  
  return (
    <footer className="bg-gray-900 text-white">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-12 pb-8">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
          <div className="space-y-4">
            <div className="flex items-center">
              <Volleyball className="h-8 w-8 text-frog-400 mr-2" />
              <span className="font-bold text-xl">TG Laudenbach</span>
            </div>
            <p className="text-gray-400">
              Volleyball seit 1974.
            </p>
            <div className="flex space-x-4">
              <a
                href="https://www.facebook.com/TGLaudenbachVolleyball" 
                target="_blank"
                rel="noopener noreferrer"
              >
                <Button variant="ghost" size="icon" className="text-gray-400 hover:text-white">
                  <Facebook className="h-5 w-5" />
                </Button>
              </a>

              <a
                href="https://www.instagram.com/tgl_volleyball" 
                target="_blank"
                rel="noopener noreferrer"
              >
                <Button variant="ghost" size="icon" className="text-gray-400 hover:text-white">
                  <Instagram className="h-5 w-5" />
                </Button>
              </a>
            </div>

          </div>

          <div>
            <h3 className="font-bold text-lg mb-4">Schnelllinks</h3>
            <ul className="space-y-2">
              <li><a href="#" className="text-gray-400 hover:text-white">Startseite</a></li>
              <li><a href="#news" className="text-gray-400 hover:text-white">Aktuelles</a></li>
              <li><a href="#team" className="text-gray-400 hover:text-white">Teams</a></li>
              <li><a href="#gallery" className="text-gray-400 hover:text-white">Galerie</a></li>
              <li><a href="#about" className="text-gray-400 hover:text-white">Über uns</a></li>
              <li><a href="#contact" className="text-gray-400 hover:text-white">Kontakt</a></li>
            </ul>
          </div>

          <div>
            <h3 className="font-bold text-lg mb-4">Infos</h3>
            <ul className="space-y-2">
              <li><a href="#" className="text-gray-400 hover:text-white">Datenschutz</a></li>
              <li><a href="#" className="text-gray-400 hover:text-white">Impressum</a></li>
              <li><a href="#" className="text-gray-400 hover:text-white">Satzung</a></li>
              <li><a href="#" className="text-gray-400 hover:text-white">Beiträge</a></li>
              <li><a href="#" className="text-gray-400 hover:text-white">Sponsoren</a></li>
            </ul>
          </div>

          <div>
            <h3 className="font-bold text-lg mb-4">Newsletter</h3>
            <p className="text-gray-400 mb-4">Bleib auf dem Laufenden mit unseren neuesten Nachrichten und Events.</p>
            <div className="flex">
              <input
                type="email"
                placeholder="Deine E-Mail"
                className="py-2 px-4 bg-gray-800 text-white rounded-l-md focus:outline-none focus:ring-2 focus:ring-frog-500 w-full"
              />
              <Button className="bg-frog-500 hover:bg-frog-600 rounded-l-none">
                Abonnieren
              </Button>
            </div>
          </div>
        </div>

        <div className="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
          <p>© {currentYear} TG Laudenbach Volleyball. Alle Rechte vorbehalten.</p>
        </div>
      </div>
    </footer>
  );
};

export default Footer;
