import type { Metadata } from "next";
import { Building2 } from "lucide-react";
import PageHero from "@/components/sections/PageHero";
import TariffTable from "@/components/sections/TariffTable";
import ContactSection from "@/components/sections/ContactSection";
import Container from "@/components/ui/Container";
import SectionHeading from "@/components/ui/SectionHeading";
import Button from "@/components/ui/Button";
import { TV_PRIVAT_PAKETE } from "@/lib/constants";

export const metadata: Metadata = {
  title: "Fernsehen",
  description:
    "TV-Pakete für Privat- und Geschäftskunden in Tirol. Von der Grundversorgung bis zum individuellen Business-TV. Empfang über Kabel, kein Schüssel nötig.",
};

export default function FernsehenPage() {
  return (
    <>
      <PageHero
        title="Fernsehen mit TeleNetSystems"
        description="Kein Herumfummeln an der Satellitenschüssel. Unser TV kommt über Kabel — zuverlässig, in HD und mit einer Senderauswahl, die passt."
        backgroundImage="/images/hero/tv-header.jpg"
      />

      {/* TV Privat */}
      <section className="py-20 lg:py-24" aria-labelledby="tv-privat-heading">
        <Container>
          <SectionHeading
            title="TV für Privatkunden"
            subtitle="Drei Pakete, klare Inhalte. Wählen Sie, was zu Ihrem Fernsehabend passt."
          />
          <TariffTable plans={TV_PRIVAT_PAKETE} />
        </Container>
      </section>

      {/* Pay TV */}
      <section className="bg-neutral-50 py-20 lg:py-24" aria-labelledby="paytv-heading">
        <Container>
          <div className="grid grid-cols-1 items-center gap-12 lg:grid-cols-2">
            <div className="overflow-hidden rounded-card">
              <img
                src="/images/gallery/tv-paytv.jpg"
                alt="Pay-TV Zusatzpakete"
                className="w-full object-cover"
                loading="lazy"
                width={600}
                height={400}
              />
            </div>
            <div>
              <h2 id="paytv-heading" className="text-title font-bold text-neutral-900">
                Pay TV — mehr Auswahl, wenn Sie möchten
              </h2>
              <p className="mt-4 text-neutral-600 leading-relaxed">
                Sport, Filme, Dokumentationen oder internationale Sender: Mit unseren
                Pay-TV-Zusatzpaketen erweitern Sie Ihr Programm gezielt. Kein Abo-Dschungel,
                sondern klare Zusatzoptionen zu Ihrem bestehenden TV-Paket.
              </p>
              <p className="mt-4 text-neutral-600 leading-relaxed">
                Welche Zusatzpakete für Sie sinnvoll sind, hängt von Ihren Interessen ab.
                Wir beraten Sie gerne — unverbindlich und ehrlich.
              </p>
              <Button href="/#kontakt" variant="outline" size="md" className="mt-8">
                Zu Pay TV beraten lassen
              </Button>
            </div>
          </div>
        </Container>
      </section>

      {/* TV Business */}
      <section className="py-20 lg:py-24" aria-labelledby="tv-business-heading">
        <Container>
          <div className="grid grid-cols-1 items-center gap-12 lg:grid-cols-2">
            <div>
              <div className="flex items-center gap-3 mb-4">
                <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-amber-100">
                  <Building2 className="h-5 w-5 text-amber-700" aria-hidden="true" />
                </div>
                <h2 id="tv-business-heading" className="text-title font-bold text-neutral-900">
                  TV für Unternehmen
                </h2>
              </div>
              <p className="text-neutral-600 leading-relaxed">
                Hotels, Pensionen, Wartezimmer, Gastronomiebetriebe — überall dort, wo Fernsehen
                zum Angebot gehört, brauchen Sie eine Lösung, die einfach funktioniert.
              </p>
              <p className="mt-4 text-neutral-600 leading-relaxed">
                Wir richten Ihr Business-TV so ein, dass es zu Ihrem Betrieb passt. Senderauswahl,
                Anzahl der Anschlüsse, zentrale Steuerung — alles wird individuell abgestimmt.
              </p>
              <Button href="/#kontakt" variant="primary" size="md" className="mt-8">
                Business-TV anfragen
              </Button>
            </div>
            <div className="overflow-hidden rounded-card">
              <img
                src="/images/gallery/tv-business.jpg"
                alt="TV-Lösungen für Hotels und Geschäftskunden"
                className="w-full object-cover"
                loading="lazy"
                width={600}
                height={400}
              />
            </div>
          </div>
        </Container>
      </section>

      <ContactSection />
    </>
  );
}
