folx-tv/client/src/components/footer.tsx

import { Link } from "wouter";
import { SiFacebook, SiInstagram, SiYoutube, SiTiktok } from "react-icons/si";
import { useIsMobile } from "@/hooks/use-mobile";

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" },
];

const STICKY_AD_DISMISS_KEY = "folx-sticky-ad-dismissed";

export default function Footer({ narrow }: { narrow?: boolean }) {
  const isMobile = useIsMobile();
  const stickyAdDismissed = typeof window !== "undefined" && sessionStorage.getItem(STICKY_AD_DISMISS_KEY);
  const showStickyPadding = isMobile && !stickyAdDismissed;

  return (
    <footer className="border-t border-border mt-10" data-testid="footer">
      <div className={`${narrow ? "max-w-4xl" : "max-w-7xl"} mx-auto px-4 sm:px-6 lg:px-8 py-8 relative z-20`}>
        <div className="grid grid-cols-1 md:grid-cols-4 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 TV – Ihr Fernsehsender Nr. 1 für Volksmusik und Schlager. Aktuelle Nachrichten,
              Musikvideos, Künstlerporträts, Live-Shows und Interviews aus der Welt der volkstümlichen Musik.
            </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>
                <a href="https://folx.news/" target="_blank" rel="noopener">
                  <span className="hover:text-primary transition-colors cursor-pointer">FOLX NEWS</span>
                </a>
              </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="/kontakt">
                  <span className="text-muted-foreground cursor-pointer hover:text-primary transition-colors" data-testid="link-footer-kontakt-cat">Kontakt</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>
            <h4 className="font-semibold text-card-foreground mb-3">FOLX TV App</h4>
            <p className="text-sm text-muted-foreground mb-3">Live-TV kostenlos auf Smartphone, Tablet, Apple TV und Android TV.</p>
            <div className="flex flex-col items-start gap-3">
              <a
                href="https://apps.apple.com/de/app/folx-tv/id6782307034"
                target="_blank"
                rel="noopener noreferrer"
                aria-label="FOLX TV im App Store laden"
                data-testid="link-footer-appstore"
              >
                <img src="/badges/app-store-de.svg" alt="Laden im App Store" width="120" height="40" className="h-10 w-auto" loading="lazy" />
              </a>
              <a
                href="https://play.google.com/store/apps/details?id=tv.folx.app"
                target="_blank"
                rel="noopener noreferrer"
                aria-label="FOLX TV bei Google Play"
                data-testid="link-footer-googleplay"
              >
                <img src="/badges/google-play-de.png" alt="Jetzt bei Google Play" width="135" height="40" className="h-10 w-auto" loading="lazy" />
              </a>
            </div>
          </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>
      {showStickyPadding && <div className="h-20" aria-hidden="true" />}
    </footer>
  );
}