import { Tv, Globe, MapPin, PlayCircle, Youtube } from "lucide-react";
import Header from "@/components/header";
import Footer from "@/components/footer";
import { usePageMeta } from "@/hooks/use-page-meta";
import { PageSideAds, TopBannerAd } from "@/components/adsense";

const COUNTRIES = [
  {
    country: "Deutschland",
    flag: "DE",
    providers: [
      { name: "MagentaTV", detail: "Telekom Deutschland" },
      { name: "Zattoo", detail: null },
      { name: "O2 TV", detail: null },
    ],
  },
  {
    country: "Österreich",
    flag: "AT",
    providers: [
      { name: "A1 Xplore TV", detail: null },
      { name: "Salzburg AG CableLink", detail: null },
      { name: "Zattoo", detail: null },
    ],
  },
  {
    country: "Schweiz",
    flag: "CH",
    providers: [
      { name: "Swisscom blue TV", detail: null },
      { name: "Zattoo", detail: null },
    ],
  },
];

export default function EmpfangPage() {
  usePageMeta("Empfang FOLX TV - Volksmusik & Schlager Sender empfangen", "So empfangen Sie FOLX TV – den Volksmusik & Schlager Sender in Deutschland, Österreich und der Schweiz. Kabel, Satellit und Streaming-Optionen.");
  return (
    <div className="min-h-screen bg-background">
      <Header />
      <PageSideAds />
      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
        <TopBannerAd />
        <div className="flex items-center gap-3 mb-2">
          <Tv className="w-7 h-7 text-primary" />
          <h1 className="text-3xl font-bold text-foreground" data-testid="text-empfang-title">
            Empfang von FOLX TV
          </h1>
        </div>
        <p className="text-muted-foreground mb-8" data-testid="text-empfang-subtitle">
          So empfangen Sie Folx Music Television in Ihrem Land
        </p>

        <div className="flex flex-wrap items-center gap-3 mb-8" data-testid="app-badges-top">
          <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-empfang-appstore"
          >
            <img src="/badges/app-store-de.svg" alt="Laden im App Store" width="180" height="60" className="h-12 sm:h-14 w-auto" />
          </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-empfang-googleplay"
          >
            <img src="/badges/google-play-de.png" alt="Jetzt bei Google Play" width="202" height="60" className="h-12 sm:h-14 w-auto" />
          </a>
        </div>

        <section
          className="bg-card rounded-lg border border-card-border overflow-hidden mb-8"
          data-testid="section-folx-empfangen"
        >
          <div className="flex items-center gap-3 px-5 py-4 border-b border-card-border bg-muted/20">
            <PlayCircle className="w-4 h-4 text-primary" />
            <h2 className="text-lg font-bold text-card-foreground">FOLX TV empfangen</h2>
          </div>
          <div className="px-5 py-5 space-y-4">
            <div className="flex flex-wrap gap-3">
              <a
                href="https://folx.live"
                target="_blank"
                rel="noopener"
                className="inline-flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground hover:opacity-90"
                data-testid="link-livestream-top"
              >
                <PlayCircle className="w-4 h-4" />
                Livestream ansehen
              </a>
              <a
                href="https://youtu.be/zqQwZ12CWIk"
                target="_blank"
                rel="noopener"
                className="inline-flex items-center gap-2 rounded-md border border-card-border px-4 py-2 text-sm font-semibold text-card-foreground hover:bg-muted/40"
                data-testid="link-app-spot"
              >
                <Youtube className="w-4 h-4 text-primary" />
                App-Spot ansehen
              </a>
            </div>

            <p className="text-card-foreground text-sm leading-relaxed">
              Die kostenlose FOLX TV App gibt es auf Apple TV, Android TV, Fire TV, am Handy
              und am Tablet &ndash; ohne Abo.
            </p>
            <p className="text-muted-foreground text-sm leading-relaxed">
              Au&szlig;erdem &uuml;ber Zattoo, MagentaTV und O2.
            </p>
          </div>
        </section>

        <div className="space-y-6 mb-10">
          {COUNTRIES.map((c) => (
            <section
              key={c.country}
              className="bg-card rounded-lg border border-card-border overflow-hidden"
              data-testid={`section-country-${c.flag.toLowerCase()}`}
            >
              <div className="flex items-center gap-3 px-5 py-4 border-b border-card-border bg-muted/20">
                <MapPin className="w-4 h-4 text-primary" />
                <h2 className="text-lg font-bold text-card-foreground">{c.country}</h2>
              </div>
              <div className="px-5 py-4">
                <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
                  {c.providers.map((p, i) => (
                    <span key={p.name} className="flex items-center gap-x-2">
                      <span className="text-card-foreground font-medium" data-testid={`text-provider-${p.name.toLowerCase().replace(/\s+/g, "-")}`}>
                        {p.name}
                        {p.detail && (
                          <span className="text-muted-foreground font-normal text-sm ml-1">
                            ({p.detail})
                          </span>
                        )}
                      </span>
                      {i < c.providers.length - 1 && (
                        <span className="text-muted-foreground/40 select-none" aria-hidden="true">·</span>
                      )}
                    </span>
                  ))}
                </div>
              </div>
            </section>
          ))}
        </div>

        <section className="bg-card rounded-lg border border-card-border overflow-hidden" data-testid="section-online">
          <div className="flex items-center gap-3 px-5 py-4 border-b border-card-border bg-muted/20">
            <Globe className="w-4 h-4 text-primary" />
            <h2 className="text-lg font-bold text-card-foreground">Online</h2>
          </div>
          <div className="px-5 py-4">
            <p className="text-muted-foreground text-sm leading-relaxed">
              FOLX TV kann auch über den offiziellen Livestream im Internet empfangen werden.
              Besuchen Sie{" "}
              <a
                href="https://www.folx.tv"
                target="_blank"
                rel="noopener"
                className="text-primary hover:underline font-medium"
                data-testid="link-livestream"
              >
                www.folx.tv
              </a>{" "}
              für den direkten Zugang.
            </p>
          </div>
        </section>
      </main>
      <Footer />
    </div>
  );
}