import { Link } from "wouter";

export default function Footer() {
  return (
    <footer className="border-t border-border bg-card mt-16" 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">news.folx.tv</h3>
            <p className="text-muted-foreground text-sm leading-relaxed">
              Das Newsportal von Folx Music Television. Aktuelle Nachrichten, Interviews und
              Hintergrundberichte aus der Welt der Volksmusik und des Schlagers.
            </p>
          </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="/category/Star-News">
                  <span className="text-muted-foreground cursor-pointer hover:text-primary transition-colors" data-testid="link-footer-star-news">
                    Star-News
                  </span>
                </Link>
              </li>
            </ul>
          </div>
          <div>
            <h4 className="font-semibold text-card-foreground mb-3">Links</h4>
            <ul className="space-y-2 text-sm">
              <li>
                <a
                  href="https://folx.tv"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-muted-foreground hover:text-primary transition-colors"
                  data-testid="link-footer-folxtv"
                >
                  folx.tv
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div className="border-t border-border mt-8 pt-6 text-center">
          <p className="text-xs text-muted-foreground">
            &copy; {new Date().getFullYear()} Folx Music Television. Alle Rechte vorbehalten.
          </p>
        </div>
      </div>
    </footer>
  );
}
