From 79e466dc982511978f4375a403f88672010c16e4 Mon Sep 17 00:00:00 2001
From: folx bot <bot@folx.tv>
Date: Sat, 22 Aug 2026 17:35:44 +0200
Subject: [PATCH] empfang: blok FOLX TV empfangen na prvo mesto (livestream
 folx.live, App-Spot, App brez abo, Zattoo/MagentaTV/O2)

---
 client/src/pages/empfang.tsx     |  44 +++++++++++-
 client/src/pages/empfang.tsx.bak | 112 +++++++++++++++++++++++++++++++
 2 files changed, 155 insertions(+), 1 deletion(-)
 create mode 100644 client/src/pages/empfang.tsx.bak

diff --git a/client/src/pages/empfang.tsx b/client/src/pages/empfang.tsx
index 18833ad..5bd9e6d 100644
--- a/client/src/pages/empfang.tsx
+++ b/client/src/pages/empfang.tsx
@@ -1,4 +1,4 @@
-import { Tv, Globe, MapPin } from "lucide-react";
+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";
@@ -51,6 +51,48 @@ export default function EmpfangPage() {
           So empfangen Sie Folx Music Television in Ihrem Land
         </p>
 
+        <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
diff --git a/client/src/pages/empfang.tsx.bak b/client/src/pages/empfang.tsx.bak
new file mode 100644
index 0000000..18833ad
--- /dev/null
+++ b/client/src/pages/empfang.tsx.bak
@@ -0,0 +1,112 @@
+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, 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="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>
+  );
+}