From ebd2591643fc6cb6616b0587e957e3dda3dbf715 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Thu, 5 Mar 2026 08:11:38 +0000
Subject: [PATCH] Organize TV reception information by country and streaming
 options

Restructure the `empfang.tsx` page to display TV reception providers categorized by country (Germany, Austria, Switzerland) and include an "Online" section for livestream information.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 41aa54be-8093-4573-98cd-d8a5afad4e24
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/517dfa7b-26ac-463d-a6e1-a58c6df97188/EtK2Sno
Replit-Helium-Checkpoint-Created: true
---
 client/src/pages/empfang.tsx | 127 +++++++++++++++++++++++------------
 1 file changed, 83 insertions(+), 44 deletions(-)

diff --git a/client/src/pages/empfang.tsx b/client/src/pages/empfang.tsx
index 96c48ed..9e36b07 100644
--- a/client/src/pages/empfang.tsx
+++ b/client/src/pages/empfang.tsx
@@ -1,12 +1,34 @@
-import { Tv, Radio } from "lucide-react";
+import { Tv, Globe, MapPin } from "lucide-react";
 import Header from "@/components/header";
 import Footer from "@/components/footer";
 
-const PROVIDERS = [
-  { name: "O2", url: "https://www.o2online.de/tv/" },
-  { name: "Magenta", url: "https://www.telekom.de/magenta-tv" },
-  { name: "Zattoo", url: "https://zattoo.com/" },
-  { name: "Swisscom", url: "https://www.swisscom.ch/tv" },
+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() {
@@ -14,50 +36,67 @@ export default function EmpfangPage() {
     <div className="min-h-screen bg-background">
       <Header />
       <main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        <h1 className="text-3xl font-bold text-foreground mb-2" data-testid="text-empfang-title">
-          Empfang Folx TV
-        </h1>
+        <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
+          So empfangen Sie Folx Music Television in Ihrem Land
         </p>
 
-        <section className="mb-10" data-testid="section-iptv">
-          <div className="flex items-center gap-3 mb-4">
-            <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center">
-              <Tv className="w-5 h-5 text-primary" />
-            </div>
-            <h2 className="text-xl font-bold text-foreground">IPTV & Streaming</h2>
-          </div>
-          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-            {PROVIDERS.map((provider) => (
-              <a
-                key={provider.name}
-                href={provider.url}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="bg-card rounded-lg border border-card-border p-5 hover:border-primary/50 transition-colors group"
-                data-testid={`link-provider-${provider.name.toLowerCase()}`}
-              >
-                <h3 className="font-semibold text-card-foreground group-hover:text-primary transition-colors">
-                  {provider.name}
-                </h3>
-              </a>
-            ))}
-          </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 data-testid="section-info">
-          <div className="flex items-center gap-3 mb-4">
-            <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center">
-              <Radio className="w-5 h-5 text-primary" />
-            </div>
-            <h2 className="text-xl font-bold text-foreground">Weitere Informationen</h2>
+        <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="bg-card rounded-lg border border-card-border p-6">
+          <div className="px-5 py-4">
             <p className="text-muted-foreground text-sm leading-relaxed">
-              Folx Music Television ist über verschiedene IPTV- und Streaming-Anbieter
-              verfügbar. Bei Fragen zum Empfang wenden Sie sich bitte an Ihren
-              jeweiligen TV-Anbieter.
+              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>