import type { Metadata } from "next";
import Image from "next/image";
import Link from "next/link";
import { Container } from "@/components/layout/Container";
import { Section } from "@/components/layout/Section";
import { Tv, Users, Building2, Play, CheckCircle, ArrowRight } from "lucide-react";

export const metadata: Metadata = {
  title: "Fernsehen",
  description:
    "Über 200 TV-Programme inkl. 40 HDTV-Sendern. Kabel-TV für Privat- und Geschäftskunden im Bezirk Reutte. Ab 16,47 € im Monat.",
  openGraph: {
    title: "Fernsehen | Telenet Systems GmbH",
    description:
      "Über 200 TV-Programme inkl. 40 HDTV-Sendern. Kabel-TV für Privat- und Geschäftskunden im Bezirk Reutte.",
  },
};

const tvOptions = [
  {
    icon: Users,
    title: "TV Privat",
    price: "16,47",
    period: "Monat",
    description:
      "Über 200 Programme inkl. 40 HDTV-Sendern und rund 40 Radiosendern direkt in Ihr Wohnzimmer.",
    features: [
      "Über 200 TV-Programme",
      "40 HDTV-Sender inklusive",
      "Rund 40 Radiosender",
      "Erstklassige Bildqualität",
    ],
    cta: "Jetzt bestellen",
    image: "/images/misc/tv-privat-76f60c7a-88eafcfb.jpg",
    popular: true,
  },
  {
    icon: Building2,
    title: "TV Business",
    price: "Auf Anfrage",
    period: "",
    description:
      "Individuelle TV-Lösungen für Ihr Unternehmen. Hotels, Gaststätten, Wartezimmer – wir finden die passende Lösung.",
    features: [
      "Maßgeschneidertes Angebot",
      "Persönliche Beratung",
      "Individuelle Kanalauswahl",
      "Professionelle Installation",
    ],
    cta: "Angebot anfragen",
    image: "/images/misc/tv-business-c3bdfb94-23310090.jpg",
    popular: false,
  },
  {
    icon: Play,
    title: "Pay TV",
    price: "Auf Anfrage",
    period: "",
    description:
      "Exklusive Filme, Serien und Sport in HD/UHD. Ergänzen Sie Ihr TV-Erlebnis mit Premium-Inhalten.",
    features: [
      "Premium-Sender verfügbar",
      "HD/UHD Qualität",
      "Sport & Filme",
      "Flexible Pakete",
    ],
    cta: "Mehr erfahren",
    image: "/images/misc/tv-paytv-6cbac6e4-d140e2e4.jpg",
    popular: false,
  },
];

const benefits = [
  "Keine Servicepauschale",
  "Persönlicher Support vor Ort",
  "Schnelle Installation",
  "Faire und transparente Preise",
];

export default function FernsehenPage() {
  return (
    <>
      {/* Hero Section */}
      <Section variant="hero" className="relative overflow-hidden bg-[var(--color-foreground)]">
        <div className="absolute inset-0 z-0">
          <Image
            src="/images/hero/tv-header-44c1e07b.jpg"
            alt="Familie genießt Fernsehen"
            fill
            priority
            className="object-cover opacity-40"
            sizes="100vw"
          />
        </div>
        <Container className="relative z-10">
          <div className="max-w-3xl">
            <div className="inline-flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-md)]">
              <Tv className="h-5 w-5" aria-hidden="true" />
              <span className="font-medium">Fernsehen</span>
            </div>
            <h1 className="text-[var(--color-background)] mb-[var(--spacing-lg)]">
              Über 200 TV-Programme in bester Qualität
            </h1>
            <p className="lead text-gray-300 mb-[var(--spacing-xl)]">
              Erstklassige Unterhaltung für Ihr Zuhause oder Unternehmen.
              Mit 40 HDTV-Sendern und rund 40 Radiosendern – ab nur 16,47 € im Monat.
            </p>
            <div className="flex flex-wrap gap-[var(--spacing-md)]">
              <Link href="/kontakt" className="btn btn-primary btn-lg">
                Jetzt bestellen
              </Link>
              <a href="#angebote" className="btn btn-outline btn-lg text-[var(--color-background)] border-[var(--color-background)] hover:bg-[var(--color-background)] hover:text-[var(--color-foreground)]">
                Angebote ansehen
              </a>
            </div>
          </div>
        </Container>
      </Section>

      {/* Trust Bar */}
      <Section variant="sm" className="bg-[var(--color-muted)]">
        <Container>
          <div className="flex flex-wrap justify-center gap-x-[var(--spacing-2xl)] gap-y-[var(--spacing-md)]">
            {benefits.map((benefit) => (
              <div
                key={benefit}
                className="flex items-center gap-[var(--spacing-sm)] text-sm font-medium"
              >
                <CheckCircle
                  className="h-5 w-5 text-[var(--color-success)]"
                  aria-hidden="true"
                />
                <span>{benefit}</span>
              </div>
            ))}
          </div>
        </Container>
      </Section>

      {/* TV Options */}
      <Section id="angebote">
        <Container>
          <div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]">
            <h2>Unsere TV-Angebote</h2>
            <p className="lead mt-[var(--spacing-md)]">
              Ob für Ihr Zuhause oder Ihr Unternehmen – wir haben das passende Angebot.
            </p>
          </div>
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-[var(--spacing-xl)]">
            {tvOptions.map((option) => (
              <div
                key={option.title}
                className={`card relative overflow-hidden ${
                  option.popular
                    ? "border-[var(--color-primary)] border-2"
                    : ""
                }`}
              >
                {option.popular && (
                  <div className="absolute top-4 right-4 bg-[var(--color-primary)] text-[var(--color-background)] text-xs font-semibold px-3 py-1 rounded-full">
                    Beliebt
                  </div>
                )}
                <div className="relative h-40 -mx-[var(--spacing-xl)] -mt-[var(--spacing-xl)] mb-[var(--spacing-lg)]">
                  <Image
                    src={option.image}
                    alt={option.title}
                    fill
                    className="object-cover"
                    sizes="(max-width: 1024px) 100vw, 33vw"
                  />
                </div>
                <div className="flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-sm)]">
                  <option.icon className="h-5 w-5" aria-hidden="true" />
                  <h3 className="heading-4">{option.title}</h3>
                </div>
                <div className="mb-[var(--spacing-md)]">
                  <span className="heading-2 text-[var(--color-foreground)]">
                    {option.price.includes("Anfrage") ? "" : "€ "}
                    {option.price}
                  </span>
                  {option.period && (
                    <span className="text-muted"> / {option.period}</span>
                  )}
                </div>
                <p className="text-muted mb-[var(--spacing-lg)]">
                  {option.description}
                </p>
                <ul className="space-y-[var(--spacing-sm)] mb-[var(--spacing-xl)]">
                  {option.features.map((feature) => (
                    <li
                      key={feature}
                      className="flex items-center gap-[var(--spacing-sm)] text-sm"
                    >
                      <CheckCircle
                        className="h-4 w-4 text-[var(--color-success)] flex-shrink-0"
                        aria-hidden="true"
                      />
                      <span>{feature}</span>
                    </li>
                  ))}
                </ul>
                <Link
                  href="/kontakt"
                  className={`btn w-full ${
                    option.popular ? "btn-primary" : "btn-outline"
                  }`}
                >
                  {option.cta}
                </Link>
              </div>
            ))}
          </div>
        </Container>
      </Section>

      {/* FAQ Section */}
      <Section className="bg-[var(--color-muted)]">
        <Container variant="narrow">
          <div className="text-center mb-[var(--spacing-3xl)]">
            <h2>Häufige Fragen</h2>
          </div>
          <div className="space-y-[var(--spacing-lg)]">
            <div className="card">
              <h3 className="heading-5 mb-[var(--spacing-sm)]">
                Wie schnell ist die Installation?
              </h3>
              <p className="text-muted">
                In der Regel können wir innerhalb weniger Werktage einen Installationstermin
                vereinbaren. Unser Techniker kommt zu Ihnen und richtet alles ein.
              </p>
            </div>
            <div className="card">
              <h3 className="heading-5 mb-[var(--spacing-sm)]">
                Gibt es versteckte Kosten?
              </h3>
              <p className="text-muted">
                Nein. Der angezeigte Preis ist der Endpreis inklusive Mehrwertsteuer.
                Es gibt keine Servicepauschale und keine versteckten Gebühren.
              </p>
            </div>
            <div className="card">
              <h3 className="heading-5 mb-[var(--spacing-sm)]">
                Kann ich Pay-TV dazubuchen?
              </h3>
              <p className="text-muted">
                Ja, wir bieten verschiedene Pay-TV-Optionen an. Kontaktieren Sie uns
                und wir finden das passende Paket für Sie.
              </p>
            </div>
          </div>
        </Container>
      </Section>

      {/* CTA Section */}
      <Section className="bg-[var(--color-primary)]">
        <Container>
          <div className="text-center max-w-2xl mx-auto">
            <h2 className="text-[var(--color-background)]">
              Bereit für bestes Fernsehen?
            </h2>
            <p className="text-white/90 text-lg mt-[var(--spacing-md)] mb-[var(--spacing-xl)]">
              Kontaktieren Sie uns für eine persönliche Beratung oder bestellen Sie
              direkt Ihren TV-Anschluss.
            </p>
            <div className="flex flex-wrap justify-center gap-[var(--spacing-md)]">
              <Link
                href="/kontakt"
                className="btn btn-lg bg-[var(--color-background)] text-[var(--color-foreground)] hover:opacity-90"
              >
                Jetzt bestellen
              </Link>
              <a
                href="tel:+4356725000"
                className="btn btn-lg btn-outline text-[var(--color-background)] border-[var(--color-background)] hover:bg-[var(--color-background)] hover:text-[var(--color-primary)]"
              >
                +43 5672 5000
              </a>
            </div>
          </div>
        </Container>
      </Section>
    </>
  );
}
