Empfang: tri poti (Livestream folx.live, App z navodili po napravah incl. Samsung 2022/2023, Kabel & IPTV s povezavami in navodili); blok Online z www.folx.tv odstranjen

client/src/pages/empfang.tsx

@@ -1,40 +1,116 @@
-import { Tv, Globe, MapPin, PlayCircle, Youtube } from "lucide-react";
+import { Tv, MapPin, PlayCircle, Youtube, Smartphone, Radio, ExternalLink } 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 = [
+type Provider = { name: string; detail: string | null; url: string; how: string };
+
+const COUNTRIES: { country: string; flag: string; providers: Provider[] }[] = [
   {
     country: "Deutschland",
     flag: "DE",
     providers: [
-      { name: "MagentaTV", detail: "Telekom Deutschland" },
-      { name: "Zattoo", detail: null },
-      { name: "O2 TV", detail: null },
+      {
+        name: "MagentaTV",
+        detail: "Telekom Deutschland",
+        url: "https://www.telekom.de/magenta-tv/sender",
+        how: "In der MagentaTV-Senderliste unter FOLX TV – am Receiver, in der MagentaTV-App und im Browser.",
+      },
+      {
+        name: "Zattoo",
+        detail: null,
+        url: "https://zattoo.com/de/sender",
+        how: "Kostenlos im Zattoo-Free-Paket. App öffnen oder zattoo.com aufrufen, anmelden, in der Senderliste FOLX TV wählen.",
+      },
+      {
+        name: "O2 TV",
+        detail: null,
+        url: "https://www.o2online.de/extras/o2-tv/",
+        how: "Im O2 TV-Paket M enthalten. In der O2 TV-App oder im Browser in der Senderliste FOLX TV wählen.",
+      },
     ],
   },
   {
     country: "Österreich",
     flag: "AT",
     providers: [
-      { name: "A1 Xplore TV", detail: null },
-      { name: "Salzburg AG CableLink", detail: null },
-      { name: "Zattoo", detail: null },
+      {
+        name: "A1 Xplore TV",
+        detail: null,
+        url: "https://www.a1.net/tv",
+        how: "Bei A1 Xplore TV in der Senderliste unter FOLX TV – an der Box, in der A1 Xplore TV-App und im Browser.",
+      },
+      {
+        name: "Salzburg AG CableLink",
+        detail: null,
+        url: "https://www.salzburg-ag.at/internet-tv-telefon/fuer-privat/tv/fernsehen-internet.html",
+        how: "Im CableLink-Kabelnetz der Salzburg AG. Sendersuchlauf am Fernseher starten, FOLX TV erscheint in der Senderliste.",
+      },
+      {
+        name: "Zattoo",
+        detail: null,
+        url: "https://zattoo.com/at/sender",
+        how: "Kostenlos im Zattoo-Free-Paket. App öffnen oder zattoo.com aufrufen, anmelden, in der Senderliste FOLX TV wählen.",
+      },
     ],
   },
   {
     country: "Schweiz",
     flag: "CH",
     providers: [
-      { name: "Swisscom blue TV", detail: null },
-      { name: "Zattoo", detail: null },
+      {
+        name: "Swisscom blue TV",
+        detail: null,
+        url: "https://www.swisscom.ch/de/privatkunden/tv-abo.html",
+        how: "Bei blue TV in der Senderliste unter FOLX TV – an der blue TV Box, in der blue TV-App und im Browser.",
+      },
+      {
+        name: "Zattoo",
+        detail: null,
+        url: "https://zattoo.com/ch/sender",
+        how: "Kostenlos im Zattoo-Free-Paket. App öffnen oder zattoo.com aufrufen, anmelden, in der Senderliste FOLX TV wählen.",
+      },
     ],
   },
 ];
 
+const APPS = [
+  {
+    name: "iPhone, iPad & Apple TV",
+    how: "App Store öffnen, nach „FOLX TV“ suchen und laden. Auf dem Apple TV die App aus dem App Store des Geräts installieren.",
+    url: "https://apps.apple.com/de/app/folx-tv/id6782307034",
+    linkLabel: "Im App Store öffnen",
+    badge: { src: "/badges/app-store-de.svg", alt: "Laden im App Store" },
+  },
+  {
+    name: "Android-Handy, Tablet & Android TV",
+    how: "Google Play öffnen, nach „FOLX TV“ suchen und installieren. Auf Android TV und Google TV direkt im Play Store des Fernsehers.",
+    url: "https://play.google.com/store/apps/details?id=tv.folx.app",
+    linkLabel: "Bei Google Play öffnen",
+    badge: { src: "/badges/google-play-de.png", alt: "Jetzt bei Google Play" },
+  },
+  {
+    name: "Samsung Smart TV",
+    how: "Auf Samsung-Fernsehern der Modelljahre 2022 und 2023 (Tizen 6.5 und 9.0): Apps öffnen, nach „FOLX TV“ suchen und installieren. Weitere Modelljahre folgen.",
+    url: null,
+    linkLabel: null,
+    badge: null,
+  },
+  {
+    name: "Amazon Fire TV",
+    how: "Auf dem Fire TV Stick oder Fire TV im Amazon Appstore nach „FOLX TV“ suchen und installieren.",
+    url: null,
+    linkLabel: null,
+    badge: 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.");
+  usePageMeta(
+    "Empfang FOLX TV - Volksmusik & Schlager Sender empfangen",
+    "So empfangen Sie FOLX TV – den Volksmusik & Schlager Sender: kostenloser Livestream auf folx.live, die FOLX TV App für Apple, Android, Samsung und Fire TV sowie Kabel und IPTV in Deutschland, Österreich und der Schweiz.",
+  );
   return (
     <div className="min-h-screen bg-background">
       <Header />
@@ -47,8 +123,8 @@ export default function EmpfangPage() {
             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 className="text-muted-foreground mb-6" data-testid="text-empfang-subtitle">
+          Drei Wege zu FOLX TV: kostenloser Livestream, die FOLX TV App und Ihr Kabel- oder IPTV-Anbieter.
         </p>
 
         <div className="flex flex-wrap items-center gap-3 mb-8" data-testid="app-badges-top">
@@ -72,15 +148,29 @@ export default function EmpfangPage() {
           </a>
         </div>
 
+        {/* 1. Livestream */}
         <section
           className="bg-card rounded-lg border border-card-border overflow-hidden mb-8"
-          data-testid="section-folx-empfangen"
+          data-testid="section-livestream"
         >
           <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>
+            <h2 className="text-lg font-bold text-card-foreground">1. Livestream – sofort und kostenlos</h2>
           </div>
           <div className="px-5 py-5 space-y-4">
+            <p className="text-card-foreground text-sm leading-relaxed">
+              FOLX TV läuft rund um die Uhr live im Internet. Einfach{" "}
+              <a
+                href="https://folx.live"
+                target="_blank"
+                rel="noopener"
+                className="text-primary hover:underline font-medium"
+                data-testid="link-livestream-inline"
+              >
+                folx.live
+              </a>{" "}
+              im Browser öffnen – am Computer, Handy, Tablet oder Smart-TV. Ohne Anmeldung, ohne Abo.
+            </p>
             <div className="flex flex-wrap gap-3">
               <a
                 href="https://folx.live"
@@ -90,8 +180,38 @@ export default function EmpfangPage() {
                 data-testid="link-livestream-top"
               >
                 <PlayCircle className="w-4 h-4" />
-                Livestream ansehen
+                Livestream auf folx.live ansehen
               </a>
+            </div>
+          </div>
+        </section>
+
+        {/* 2. App */}
+        <section
+          className="bg-card rounded-lg border border-card-border overflow-hidden mb-8"
+          data-testid="section-app"
+        >
+          <div className="flex items-center gap-3 px-5 py-4 border-b border-card-border bg-muted/20">
+            <Smartphone className="w-4 h-4 text-primary" />
+            <h2 className="text-lg font-bold text-card-foreground">2. FOLX TV App – kostenlos, ohne Abo</h2>
+          </div>
+          <div className="px-5 py-5 space-y-5">
+            <ul className="space-y-4">
+              {APPS.map((a) => (
+                <li key={a.name} className="flex flex-col sm:flex-row sm:items-start gap-3 sm:gap-6" data-testid={`app-${a.name.toLowerCase().replace(/[^a-z]+/g, "-")}`}>
+                  <div className="flex-1">
+                    <div className="text-card-foreground font-semibold">{a.name}</div>
+                    <p className="text-muted-foreground text-sm leading-relaxed mt-1">{a.how}</p>
+                  </div>
+                  {a.url && a.badge && (
+                    <a href={a.url} target="_blank" rel="noopener noreferrer" aria-label={a.linkLabel ?? a.name} className="shrink-0">
+                      <img src={a.badge.src} alt={a.badge.alt} width="120" height="40" className="h-10 w-auto" loading="lazy" />
+                    </a>
+                  )}
+                </li>
+              ))}
+            </ul>
+            <div className="flex flex-wrap gap-3 pt-1">
               <a
                 href="https://youtu.be/zqQwZ12CWIk"
                 target="_blank"
@@ -103,17 +223,14 @@ export default function EmpfangPage() {
                 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>
 
+        {/* 3. Kabel & IPTV */}
+        <div className="flex items-center gap-3 px-1 mb-3">
+          <Radio className="w-4 h-4 text-primary" />
+          <h2 className="text-lg font-bold text-foreground">3. Kabel & IPTV – bei Ihrem Anbieter</h2>
+        </div>
         <div className="space-y-6 mb-10">
           {COUNTRIES.map((c) => (
             <section
@@ -123,53 +240,35 @@ export default function EmpfangPage() {
             >
               <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>
+                <h3 className="text-lg font-bold text-card-foreground">{c.country}</h3>
               </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, "-")}`}>
+              <ul className="divide-y divide-card-border">
+                {c.providers.map((p) => (
+                  <li key={p.name} className="px-5 py-4 flex flex-col sm:flex-row sm:items-start gap-2 sm:gap-6">
+                    <div className="flex-1">
+                      <div className="text-card-foreground font-semibold" 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 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>
+                      </div>
+                      <p className="text-muted-foreground text-sm leading-relaxed mt-1">{p.how}</p>
+                    </div>
+                    <a
+                      href={p.url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="shrink-0 inline-flex items-center gap-1.5 text-sm font-medium text-primary hover:underline"
+                    >
+                      Zum Anbieter
+                      <ExternalLink className="w-3.5 h-3.5" />
+                    </a>
+                  </li>
+                ))}
+              </ul>
             </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>