import { Tv, Youtube, Facebook, Instagram, PlayCircle, Radio } 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 KANAELE = [
  {
    name: "FOLX TV Livestream",
    detail: "Rund um die Uhr im Browser",
    href: "https://folx.live",
    icon: Radio,
    testid: "link-livestream",
  },
  {
    name: "FOLX Plus",
    detail: "Der 24/7 Live-Kanal auf YouTube",
    href: "https://www.youtube.com/watch?v=Dib1h-IkR9s",
    icon: PlayCircle,
    testid: "link-folx-plus",
  },
  {
    name: "YouTube",
    detail: "@folxmtv – Interviews, Musik News und ganze Sendungen",
    href: "https://www.youtube.com/@folxmtv",
    icon: Youtube,
    testid: "link-youtube",
  },
  {
    name: "Facebook",
    detail: "facebook.com/folxtv",
    href: "https://www.facebook.com/folxtv",
    icon: Facebook,
    testid: "link-facebook",
  },
  {
    name: "Instagram",
    detail: "@folxtv",
    href: "https://www.instagram.com/folxtv",
    icon: Instagram,
    testid: "link-instagram",
  },
];

export default function AboutPage() {
  usePageMeta(
    "Über FOLX TV - Volksmusik & Schlager Fernsehsender",
    "Alles über FOLX TV – Ihren Volksmusik & Schlager Fernsehsender seit 2013. Die Künstler, der FOLX Stadl und alle Kanäle: Livestream, FOLX Plus, YouTube, Facebook und Instagram.",
  );
  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-8">
          <Tv className="w-7 h-7 text-primary" />
          <h1 className="text-3xl font-bold text-foreground" data-testid="text-about-title">
            Über FOLX TV
          </h1>
        </div>

        <article className="prose-custom space-y-5 text-[15px] leading-relaxed text-muted-foreground" data-testid="section-about-content">
          <p>
            <span className="text-foreground font-semibold">FOLX TV</span> ist Ihr Fernsehsender für volkstümliche Musik und Schlager. Der Sender präsentiert exklusiven Content aus der Welt der volkstümlichen Musik und des Schlagers. Über 90 % des Programms werden von FOLX NETWORK selbst produziert und bieten den Zuschauern eine abwechslungsreiche Auswahl an Musikvideos, Live-Shows und Unterhaltung mit den beliebtesten Stars der Szene.
          </p>

          <p>
            Im Mittelpunkt stehen bei uns immer die <span className="text-foreground font-medium">Künstlerinnen und Künstler</span>. Wir holen sie vor die Kamera, hören ihnen zu und lassen sie ihre Geschichten selbst erzählen – die grossen Namen der Szene genauso wie die jungen Talente, die gerade ihre erste Single veröffentlichen. Auftritt, Interview, Blick hinter die Kulissen: Wer bei FOLX TV zu Gast ist, bekommt Zeit und eine Bühne.
          </p>

          <p>
            Unser Auftrag ist einfach: Die Menschen sollen eine schöne Zeit haben – beim <span className="text-foreground font-medium">Zuschauen</span>, beim <span className="text-foreground font-medium">Zuhören</span> und beim <span className="text-foreground font-medium">Lesen</span>. Deshalb gibt es bei uns nicht nur das Fernsehprogramm, sondern auch täglich neue Musik News, Interviews und Videos auf folx.tv.
          </p>

          <p>
            Zu den beliebtesten Eigenproduktionen zählt der <span className="text-foreground font-medium">FOLX Stadl</span> mit Moderator Hansi Berger, der regelmässig Stars der volkstümlichen Musik und des Schlagers auf die Bühne bringt – mit Live-Auftritten, Gesprächen und einer guten Portion Humor.
          </p>

          <p>
            FOLX TV ist heute über IPTV-Plattformen und Kabelnetze in Deutschland, Österreich und der Schweiz empfangbar, unter anderem über MagentaTV, Zattoo, O2 TV, A1 Xplore TV, Swisscom blue TV sowie über verschiedene regionale Kabelnetze.
          </p>

          <p>
            FOLX TV wurde am 15. April 2013 gegründet und hat sich seitdem zu einem der wichtigsten Fernsehsender für volkstümliche Musik und Schlager im deutschsprachigen Raum entwickelt. Unsere Vision ist es, die musikalische Tradition des Alpenraums und der Schlagerwelt in moderner TV-Produktion weiterzuführen und ein internationales Publikum für diese einzigartige Musik zu begeistern.
          </p>
        </article>

        <section className="mt-10" data-testid="section-kanaele">
          <h2 className="text-xl font-bold text-foreground mb-2">Wo Sie uns finden</h2>
          <p className="text-muted-foreground text-sm mb-5">
            Ob im Fernsehen, im Livestream oder unterwegs am Handy – FOLX TV ist überall dort, wo Sie sind.
          </p>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
            {KANAELE.map((k) => (
              <a
                key={k.name}
                href={k.href}
                target="_blank"
                rel="noopener"
                className="flex items-center gap-3 rounded-lg border border-card-border bg-card px-4 py-3.5 transition-colors hover:border-primary/60"
                data-testid={k.testid}
              >
                <k.icon className="w-5 h-5 text-primary flex-shrink-0" />
                <span className="min-w-0">
                  <span className="block text-sm font-semibold text-card-foreground">{k.name}</span>
                  <span className="block text-xs text-muted-foreground truncate">{k.detail}</span>
                </span>
              </a>
            ))}
          </div>
        </section>

        <p className="text-primary font-semibold mt-8 text-[15px]">
          Schalten Sie ein und erleben Sie die Welt der Volksmusik und des Schlagers – nur bei FOLX TV.
        </p>
      </main>
      <Footer />
    </div>
  );
}