import { Tv, Globe, MapPin } from "lucide-react";
import Header from "@/components/header";
import Footer from "@/components/footer";
import { usePageMeta } from "@/hooks/use-page-meta";
import { PageSideAds } 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 – Ihren Volksmusik & Schlager Sender in Deutschland, Österreich und der Schweiz.");
  return (
    <div className="min-h-screen bg-background">
      <Header />
      <PageSideAds contentHalfWidth={448} />
      <main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <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="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"
                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>
  );
}