import { Metadata } from "next";
import Link from "next/link";
import Image from "next/image";
import { Section } from "@/components/layout/Section";
import { Container } from "@/components/layout/Container";
import { Tv, Check, Phone, ArrowRight } from "lucide-react";

export const metadata: Metadata = {
    title: "Fernsehen",
    description:
        "Über 200 TV-Programme inkl. 40 HDTV-Sender. Kabel-TV für Privat- und Geschäftskunden in Tirol.",
};

const tvFeatures = [
    "Über 200 Programme",
    "40 HDTV-Sender",
    "Rund 40 Radiosender",
    "Kristallklare Bildqualität",
    "Keine Servicepauschale",
    "Regionale Sender inklusive",
];

export default function FernsehenPage() {
    return (
        <main>
            {/* Hero Section */}
            <Section variant="hero" className="bg-[var(--color-muted)]">
                <Container>
                    <div className="grid lg:grid-cols-2 gap-[var(--spacing-3xl)] items-center">
                        <div className="max-w-xl">
                            <div className="w-16 h-16 rounded-[var(--radius-lg)] bg-[var(--color-primary)] flex items-center justify-center mb-[var(--spacing-lg)]">
                                <Tv size={32} className="text-[var(--color-background)]" />
                            </div>
                            <h1 className="mb-[var(--spacing-lg)]">
                                Fernsehen in
                                <span className="text-[var(--color-primary)]"> bester Qualität</span>
                            </h1>
                            <p className="lead mb-[var(--spacing-2xl)]">
                                Genießen Sie über 200 TV-Programme inkl. 40 HDTV-Sendern –
                                direkt über das Kabelnetz von TeleNetSystems.
                            </p>
                            <Link href="/kontakt" className="btn btn-primary btn-lg">
                                Jetzt beraten lassen
                            </Link>
                        </div>
                        <div className="relative">
                            <Image
                                src="/images/hero/tv-header-44c1e07b.jpg"
                                alt="Familie schaut gemütlich fern"
                                width={800}
                                height={600}
                                className="rounded-[var(--radius-lg)] shadow-[var(--shadow-lg)]"
                                priority
                            />
                        </div>
                    </div>
                </Container>
            </Section>

            {/* Trust Elements */}
            <Section variant="sm" className="bg-[var(--color-background)] border-b border-[var(--color-border)]">
                <Container>
                    <div className="flex flex-wrap justify-center gap-[var(--spacing-xl)]">
                        {tvFeatures.slice(0, 4).map((feature) => (
                            <div key={feature} className="flex items-center gap-[var(--spacing-sm)]">
                                <Check size={18} className="text-[var(--color-primary)]" />
                                <span className="text-sm font-medium">{feature}</span>
                            </div>
                        ))}
                    </div>
                </Container>
            </Section>

            {/* TV Privat Section */}
            <Section id="privat">
                <Container>
                    <div className="grid lg:grid-cols-2 gap-[var(--spacing-3xl)] items-center">
                        <div>
                            <span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
                                Für Privatkunden
                            </span>
                            <h2 className="mt-[var(--spacing-sm)] mb-[var(--spacing-lg)]">
                                TV Privat
                            </h2>
                            <p className="text-muted mb-[var(--spacing-lg)]">
                                Holen Sie sich über 200 Programme inkl. 40 HDTV-Sendern und rund 40 Radiosendern
                                direkt in Ihr Wohnzimmer. Genießen Sie beste Unterhaltung für die ganze Familie.
                            </p>
                            <ul className="stack-sm mb-[var(--spacing-xl)]">
                                {tvFeatures.map((feature) => (
                                    <li key={feature} className="flex items-center gap-[var(--spacing-sm)]">
                                        <Check size={18} className="text-[var(--color-primary)] shrink-0" />
                                        <span>{feature}</span>
                                    </li>
                                ))}
                            </ul>
                        </div>
                        <div className="card text-center">
                            <p className="text-sm text-muted uppercase tracking-wide mb-[var(--spacing-sm)]">
                                TV Privat
                            </p>
                            <p className="text-5xl font-bold text-[var(--color-primary)] mb-[var(--spacing-xs)]">
                                € 16,47
                            </p>
                            <p className="text-muted mb-[var(--spacing-lg)]">
                                pro Monat inkl. MwSt.
                            </p>
                            <Link href="/kontakt" className="btn btn-primary w-full">
                                Jetzt anfragen
                            </Link>
                        </div>
                    </div>
                </Container>
            </Section>

            {/* TV Business Section */}
            <Section className="bg-[var(--color-muted)]">
                <Container>
                    <div className="max-w-3xl mx-auto text-center">
                        <span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
                            Für Geschäftskunden
                        </span>
                        <h2 className="mt-[var(--spacing-sm)] mb-[var(--spacing-lg)]">
                            TV Business
                        </h2>
                        <p className="text-muted mb-[var(--spacing-xl)]">
                            Sie sind noch auf der Suche nach der passenden TV-Lösung für Ihr Unternehmen?
                            Gerne erstellen wir Ihnen ein individuelles Angebot, das genau zu Ihren Anforderungen passt.
                        </p>
                        <Link href="/kontakt" className="btn btn-primary">
                            Individuelle Lösung anfragen
                            <ArrowRight size={18} />
                        </Link>
                    </div>
                </Container>
            </Section>

            {/* Pay TV Section */}
            <Section>
                <Container>
                    <div className="max-w-3xl mx-auto text-center">
                        <h2 className="mb-[var(--spacing-lg)]">Pay-TV</h2>
                        <p className="text-muted mb-[var(--spacing-xl)]">
                            Auf Wunsch bieten wir zusätzlich Pay-TV-Lösungen an.
                            Sie möchten exklusive Filme, Serien und Sport in HD oder UHD?
                            Kontaktieren Sie uns einfach und wir finden das passende Angebot für Sie.
                        </p>
                        <Link href="/kontakt" className="btn btn-outline">
                            Pay-TV anfragen
                        </Link>
                    </div>
                </Container>
            </Section>

            {/* CTA Section */}
            <Section className="bg-[var(--color-primary)]">
                <Container>
                    <div className="text-center text-[var(--color-background)]">
                        <h2 className="mb-[var(--spacing-md)] text-[var(--color-background)]">
                            Interesse an unserem TV-Angebot?
                        </h2>
                        <p className="text-lg opacity-90 mb-[var(--spacing-xl)] max-w-2xl mx-auto">
                            Wir beraten Sie gerne persönlich und finden die passende Lösung für Sie.
                        </p>
                        <div className="flex flex-col sm:flex-row justify-center gap-[var(--spacing-md)]">
                            <Link
                                href="/kontakt"
                                className="btn bg-[var(--color-background)] text-[var(--color-primary)] hover:opacity-90"
                            >
                                Jetzt beraten lassen
                            </Link>
                            <a
                                href="tel:+43567612345"
                                className="btn border-2 border-[var(--color-background)] text-[var(--color-background)] hover:bg-[var(--color-background)]/10"
                            >
                                <Phone size={18} />
                                PLACEHOLDER: Telefon
                            </a>
                        </div>
                    </div>
                </Container>
            </Section>
        </main>
    );
}