import { Link } from "wouter";
import { SiFacebook, SiInstagram, SiYoutube, SiTiktok } from "react-icons/si";

const SOCIAL_LINKS = [
  { href: "https://www.facebook.com/folxtv/", icon: SiFacebook, label: "Facebook", testId: "link-social-facebook" },
  { href: "https://www.instagram.com/folxtv/", icon: SiInstagram, label: "Instagram", testId: "link-social-instagram" },
  { href: "https://www.youtube.com/@folxmtv", icon: SiYoutube, label: "YouTube", testId: "link-social-youtube" },
  { href: "https://www.tiktok.com/@folxtv", icon: SiTiktok, label: "TikTok", testId: "link-social-tiktok" },
];

export default function Footer() {
  return (
    <footer className="border-t border-border bg-card mt-16 relative z-20" data-testid="footer">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          <div>
            <h3 className="font-bold text-card-foreground text-lg mb-3">Folx Music Television</h3>
            <p className="text-muted-foreground text-sm leading-relaxed mb-4">
              Folx Music Television. Aktuelle Nachrichten, Interviews und
              Hintergrundberichte aus der Welt der Volksmusik und des Schlagers.
            </p>
            <div className="flex gap-3">
              {SOCIAL_LINKS.map((s) => (
                <a
                  key={s.label}
                  href={s.href}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-muted-foreground hover:text-primary transition-colors"
                  aria-label={s.label}
                  data-testid={s.testId}
                >
                  <s.icon className="w-5 h-5" />
                </a>
              ))}
            </div>
          </div>
          <div>
            <h4 className="font-semibold text-card-foreground mb-3">Kategorien</h4>
            <ul className="space-y-2 text-sm">
              <li>
                <Link href="/category/News">
                  <span className="text-muted-foreground cursor-pointer hover:text-primary transition-colors" data-testid="link-footer-news">News</span>
                </Link>
              </li>
              <li>
                <Link href="/videos">
                  <span className="text-muted-foreground cursor-pointer hover:text-primary transition-colors" data-testid="link-footer-video">Video</span>
                </Link>
              </li>
              <li>
                <Link href="/gallery">
                  <span className="text-muted-foreground cursor-pointer hover:text-primary transition-colors" data-testid="link-footer-gallery">Fotogalerie</span>
                </Link>
              </li>
              <li>
                <Link href="/horoskop">
                  <span className="text-muted-foreground cursor-pointer hover:text-primary transition-colors" data-testid="link-footer-horoskop">Horoskop</span>
                </Link>
              </li>
              <li>
                <Link href="/rezepte">
                  <span className="text-muted-foreground cursor-pointer hover:text-primary transition-colors" data-testid="link-footer-rezepte">Rezepte</span>
                </Link>
              </li>
            </ul>
          </div>
          <div>
            <h4 className="font-semibold text-card-foreground mb-3">Folgt uns</h4>
            <ul className="space-y-2 text-sm">
              {SOCIAL_LINKS.map((s) => (
                <li key={s.label}>
                  <a
                    href={s.href}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="text-muted-foreground hover:text-primary transition-colors inline-flex items-center gap-2"
                    data-testid={`link-footer-${s.label.toLowerCase()}`}
                  >
                    <s.icon className="w-4 h-4" />
                    {s.label}
                  </a>
                </li>
              ))}
            </ul>
          </div>
        </div>
        <div className="border-t border-border mt-8 pt-6 flex flex-col items-center gap-3">
          <div className="flex flex-wrap justify-center gap-x-4 gap-y-1 text-xs">
            <Link href="/empfang-folx-tv">
              <span className="text-muted-foreground cursor-pointer hover:text-primary transition-colors" data-testid="link-footer-empfang">Empfang</span>
            </Link>
            <Link href="/ueber-uns">
              <span className="text-muted-foreground cursor-pointer hover:text-primary transition-colors" data-testid="link-footer-ueber-uns">Über uns</span>
            </Link>
            <Link href="/kontakt">
              <span className="text-muted-foreground cursor-pointer hover:text-primary transition-colors" data-testid="link-footer-kontakt">Kontakt</span>
            </Link>
            <Link href="/impressum">
              <span className="text-muted-foreground cursor-pointer hover:text-primary transition-colors" data-testid="link-footer-impressum">Impressum</span>
            </Link>
            <Link href="/datenschutz">
              <span className="text-muted-foreground cursor-pointer hover:text-primary transition-colors" data-testid="link-footer-datenschutz">Datenschutz</span>
            </Link>
          </div>
          <p className="text-xs text-muted-foreground">
            &copy; {new Date().getFullYear()} Folx Music Television. Alle Rechte vorbehalten.
          </p>
        </div>
      </div>
    </footer>
  );
}