import Link from "next/link";
import { Container } from "@/components/layout/Container";
import { Section } from "@/components/layout/Section";

export const metadata = {
    title: "Kabelfernsehen | TeleNetSystems",
    description: "Erleben Sie über 200 TV-Programme, 40 HDTV-Sender und beste Bildqualität mit TeleNetSystems in Reutte.",
};

export default function FernsehenPage() {
    return (
        <main>
            {/* Hero */}
            <Section variant="hero" className="bg-[var(--color-muted)] text-center">
                <Container>
                    <h1 className="mb-[var(--spacing-md)]">
                        Fernsehen <span className="text-[color:var(--color-primary)]">neu erleben</span>
                    </h1>
                    <p className="lead mb-[var(--spacing-xl)] max-w-2xl mx-auto">
                        Brillante Bildqualität, riesige Sendervielfalt und kristallklarer Sound.
                        Holen Sie sich das Kino-Feeling direkt in Ihr Wohnzimmer.
                    </p>
                    <Link href="#kontakt" className="btn btn-primary btn-lg">
                        Jetzt anschließen lassen
                    </Link>
                </Container>
            </Section>

            {/* Main Benefit */}
            <Section>
                <Container>
                    <div className="grid md:grid-cols-2 gap-[var(--spacing-2xl)] items-center">
                        <div>
                            <h2 className="mb-[var(--spacing-md)]">Unterhaltung ohne Grenzen</h2>
                            <p className="mb-[var(--spacing-lg)]">
                                Mit unserem Kabelanschluss erhalten Sie Zugang zu einer riesigen Welt der Unterhaltung.
                                Egal ob Spielfilme, Sport, Dokumentationen oder Kinderprogramm – hier ist für jeden etwas dabei.
                            </p>
                            <ul className="mb-[var(--spacing-xl)] space-y-[var(--spacing-sm)]">
                                <li className="flex items-center gap-[var(--spacing-sm)]">
                                    📺 <span><strong>Über 200 Programme</strong> digital empfangbar</span>
                                </li>
                                <li className="flex items-center gap-[var(--spacing-sm)]">
                                    💎 <span>Davon rund <strong>40 Sender in HD-Qualität</strong></span>
                                </li>
                                <li className="flex items-center gap-[var(--spacing-sm)]">
                                    📻 <span>Rund <strong>40 Radiosender</strong> inklusive</span>
                                </li>
                            </ul>
                        </div>
                        <div className="bg-white p-[var(--spacing-xl)] rounded-[var(--radius-lg)] shadow-[var(--shadow-md)] flex items-center justify-center aspect-video text-[color:var(--color-muted-foreground)] bg-[var(--color-muted)]">
                            PLACEHOLDER: TV Experience Image
                        </div>
                    </div>
                </Container>
            </Section>

            {/* Pricing / Offer */}
            <Section className="bg-[var(--color-muted)] text-center">
                <Container>
                    <h2 className="mb-[var(--spacing-xl)]">Unser Angebot für Privatkunden</h2>
                    <div className="card max-w-lg mx-auto bg-white">
                        <h3 className="text-2xl font-bold mb-[var(--spacing-xs)]">TV Privat</h3>
                        <div className="text-4xl font-bold text-[color:var(--color-primary)] mb-[var(--spacing-md)]">
                            € 16,47 <span className="text-base text-[color:var(--color-foreground)] font-normal">/ Monat</span>
                        </div>
                        <p className="text-sm text-[color:var(--color-muted-foreground)] mb-[var(--spacing-lg)]">
                            inkl. MwSt
                        </p>
                        <ul className="text-left space-y-[var(--spacing-sm)] mb-[var(--spacing-xl)] max-w-xs mx-auto">
                            <li>✅ 200+ TV-Sender</li>
                            <li>✅ 40+ HD-Sender</li>
                            <li>✅ 40+ Radiosender</li>
                            <li>✅ Keine Satellitenschüssel nötig</li>
                            <li>✅ Beste Bild- & Tonqualität</li>
                        </ul>
                        <Link href="#kontakt" className="btn btn-primary w-full">
                            Jetzt bestellen
                        </Link>
                    </div>
                </Container>
            </Section>

            {/* Business & Pay TV */}
            <Section>
                <Container>
                    <div className="grid md:grid-cols-2 gap-[var(--spacing-xl)] text-center">
                        <div>
                            <h3 className="mb-[var(--spacing-md)]">Für Unternehmen (TV Business)</h3>
                            <p className="mb-[var(--spacing-md)]">
                                Hotel, Krankenhaus oder Büro? Wir bieten maßgeschneiderte TV-Lösungen für Ihren Betrieb.
                            </p>
                            <Link href="#kontakt" className="btn btn-outline">
                                Individuelles Angebot anfragen
                            </Link>
                        </div>
                        <div>
                            <h3 className="mb-[var(--spacing-md)]">Pay TV & Extras</h3>
                            <p className="mb-[var(--spacing-md)]">
                                Sie möchten noch mehr? Exklusive Filme, Serien und Premium-Sport in HD/UHD auf Anfrage.
                            </p>
                            <Link href="#kontakt" className="btn btn-outline">
                                Pay-TV Optionen prüfen
                            </Link>
                        </div>
                    </div>
                </Container>
            </Section>

            {/* Contact Anchor */}
            <Section id="kontakt" className="bg-[var(--color-primary)] text-white text-center">
                <Container>
                    <h2 className="text-white mb-[var(--spacing-md)]">Interessiert?</h2>
                    <p className="lead text-white mb-[var(--spacing-xl)]">
                        Kontaktieren Sie uns für Ihren TV-Anschluss.
                    </p>
                    <div className="flex flex-col sm:flex-row justify-center gap-[var(--spacing-md)]">
                        <a href="tel:PLACEHOLDER" className="btn btn-ghost bg-white text-[color:var(--color-primary)] hover:bg-[var(--color-muted)]">
                            📞 Anrufen
                        </a>
                        <a href="mailto:PLACEHOLDER" className="btn btn-outline border-white text-white hover:bg-white hover:text-[color:var(--color-primary)]">
                            ✉️ E-Mail schreiben
                        </a>
                    </div>
                </Container>
            </Section>
        </main>
    );
}