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

export const metadata = {
    title: "Highspeed Internet | TeleNetSystems",
    description: "Surfen Sie mit bis zu 500 Mbit/s in Reutte. Faire Tarife für Kabel und Glasfaser für Privat und Business.",
};

export default function InternetPage() {
    return (
        <main>
            <Section variant="hero" className="bg-[var(--color-muted)] text-center">
                <Container>
                    <h1 className="mb-[var(--spacing-md)]">
                        Highspeed Internet <span className="text-[color:var(--color-primary)]">für Tirol</span>
                    </h1>
                    <p className="lead mb-[var(--spacing-xl)] max-w-2xl mx-auto">
                        Stabil, extrem schnell und ohne versteckte Kosten. Wir bringen die Welt zu Ihnen nach Hause.
                    </p>
                    <div className="flex flex-col sm:flex-row justify-center gap-[var(--spacing-md)]">
                        <Link href="#kabel" className="btn btn-primary">
                            Kabel-Tarife
                        </Link>
                        <Link href="#glasfaser" className="btn btn-secondary">
                            Glasfaser-Tarife
                        </Link>
                    </div>
                </Container>
            </Section>

            {/* Intro Info */}
            <Section>
                <Container className="text-center max-w-3xl">
                    <h2 className="mb-[var(--spacing-md)]">Warum TeleNetSystems Internet?</h2>
                    <p>
                        Wir bieten Ihnen echte Flatrates ohne Datenlimit. Keine Servicepauschale.
                        Ehrliche Bandbreiten und persönlicher Support direkt vor Ort in Reutte.
                    </p>
                </Container>
            </Section>

            {/* Kabel Tarife */}
            <Section id="kabel" className="bg-[var(--color-muted)]">
                <Container>
                    <h2 className="text-center mb-[var(--spacing-sm)]">Kabel-Internet Tarife</h2>
                    <p className="text-center mb-[var(--spacing-2xl)] text-[color:var(--color-muted-foreground)]">
                        Verfügbar überall dort, wo Sie unseren Kabelanschluss haben. (Gültig ab 01.05.2024)
                    </p>

                    <div className="grid md:grid-cols-3 lg:grid-cols-5 gap-[var(--spacing-md)]">
                        {/* Hit */}
                        <div className="card flex flex-col items-center bg-white">
                            <h3 className="text-xl font-bold mb-[var(--spacing-xs)]">hit</h3>
                            <div className="text-3xl font-bold text-[color:var(--color-primary)] mb-[var(--spacing-sm)]">€14,50</div>
                            <div className="text-sm text-[color:var(--color-muted-foreground)] mb-[var(--spacing-md)]">/ Monat</div>
                            <div className="w-full border-t border-[color:var(--color-border)] my-[var(--spacing-sm)]"></div>
                            <ul className="text-sm space-y-[var(--spacing-xs)] flex-1 mb-[var(--spacing-md)] text-center">
                                <li><strong>40 Mbit/s</strong> Down</li>
                                <li><strong>6 Mbit/s</strong> Up</li>
                                <li>Daten: Unlimitiert</li>
                            </ul>
                            <Link href="#kontakt" className="btn btn-outline btn-sm w-full">Bestellen</Link>
                        </div>

                        {/* Eco */}
                        <div className="card flex flex-col items-center bg-white relative overflow-hidden">
                            <div className="absolute top-0 right-0 bg-[var(--color-secondary)] text-white text-xs px-2 py-1">Tipp</div>
                            <h3 className="text-xl font-bold mb-[var(--spacing-xs)]">eco</h3>
                            <div className="text-3xl font-bold text-[color:var(--color-primary)] mb-[var(--spacing-sm)]">€19,00</div>
                            <div className="text-sm text-[color:var(--color-muted-foreground)] mb-[var(--spacing-md)]">/ Monat</div>
                            <div className="w-full border-t border-[color:var(--color-border)] my-[var(--spacing-sm)]"></div>
                            <ul className="text-sm space-y-[var(--spacing-xs)] flex-1 mb-[var(--spacing-md)] text-center">
                                <li><strong>60 Mbit/s</strong> Down</li>
                                <li><strong>8 Mbit/s</strong> Up</li>
                                <li>Daten: Unlimitiert</li>
                            </ul>
                            <Link href="#kontakt" className="btn btn-primary btn-sm w-full">Bestellen</Link>
                        </div>

                        {/* Fun */}
                        <div className="card flex flex-col items-center bg-white">
                            <h3 className="text-xl font-bold mb-[var(--spacing-xs)]">fun</h3>
                            <div className="text-3xl font-bold text-[color:var(--color-primary)] mb-[var(--spacing-sm)]">€29,00</div>
                            <div className="text-sm text-[color:var(--color-muted-foreground)] mb-[var(--spacing-md)]">/ Monat</div>
                            <div className="w-full border-t border-[color:var(--color-border)] my-[var(--spacing-sm)]"></div>
                            <ul className="text-sm space-y-[var(--spacing-xs)] flex-1 mb-[var(--spacing-md)] text-center">
                                <li><strong>80 Mbit/s</strong> Down</li>
                                <li><strong>12 Mbit/s</strong> Up</li>
                                <li>Daten: Unlimitiert</li>
                            </ul>
                            <Link href="#kontakt" className="btn btn-outline btn-sm w-full">Bestellen</Link>
                        </div>

                        {/* Pro */}
                        <div className="card flex flex-col items-center bg-white">
                            <h3 className="text-xl font-bold mb-[var(--spacing-xs)]">pro</h3>
                            <div className="text-3xl font-bold text-[color:var(--color-primary)] mb-[var(--spacing-sm)]">€39,00</div>
                            <div className="text-sm text-[color:var(--color-muted-foreground)] mb-[var(--spacing-md)]">/ Monat</div>
                            <div className="w-full border-t border-[color:var(--color-border)] my-[var(--spacing-sm)]"></div>
                            <ul className="text-sm space-y-[var(--spacing-xs)] flex-1 mb-[var(--spacing-md)] text-center">
                                <li><strong>100 Mbit/s</strong> Down</li>
                                <li><strong>14 Mbit/s</strong> Up</li>
                                <li>Public IPv4 Address</li>
                            </ul>
                            <Link href="#kontakt" className="btn btn-outline btn-sm w-full">Bestellen</Link>
                        </div>

                        {/* Mega */}
                        <div className="card flex flex-col items-center bg-white">
                            <h3 className="text-xl font-bold mb-[var(--spacing-xs)]">mega</h3>
                            <div className="text-3xl font-bold text-[color:var(--color-primary)] mb-[var(--spacing-sm)]">€49,00</div>
                            <div className="text-sm text-[color:var(--color-muted-foreground)] mb-[var(--spacing-md)]">/ Monat</div>
                            <div className="w-full border-t border-[color:var(--color-border)] my-[var(--spacing-sm)]"></div>
                            <ul className="text-sm space-y-[var(--spacing-xs)] flex-1 mb-[var(--spacing-md)] text-center">
                                <li><strong>180 Mbit/s</strong> Down</li>
                                <li><strong>22 Mbit/s</strong> Up</li>
                                <li>Public IPv4 Address</li>
                            </ul>
                            <Link href="#kontakt" className="btn btn-outline btn-sm w-full">Bestellen</Link>
                        </div>
                    </div>
                </Container>
            </Section>

            {/* Glasfaser Tarife */}
            <Section id="glasfaser">
                <Container>
                    <h2 className="text-center mb-[var(--spacing-sm)]">Glasfaser-Internet Tarife</h2>
                    <p className="text-center mb-[var(--spacing-2xl)] text-[color:var(--color-muted-foreground)]">
                        Die Zukunft der Geschwindigkeit. (Gültig ab 01.04.2025)
                    </p>

                    <div className="grid md:grid-cols-4 gap-[var(--spacing-md)]">
                        {/* Eco */}
                        <div className="card flex flex-col items-center bg-[var(--color-muted)]/30">
                            <h3 className="text-xl font-bold mb-[var(--spacing-xs)]">eco</h3>
                            <div className="text-3xl font-bold text-[color:var(--color-accent)] mb-[var(--spacing-sm)]">€23,00</div>
                            <div className="text-sm text-[color:var(--color-muted-foreground)] mb-[var(--spacing-md)]">/ Monat</div>
                            <ul className="text-sm space-y-[var(--spacing-xs)] flex-1 mb-[var(--spacing-md)] text-center">
                                <li><strong>100 Mbit/s</strong> Down</li>
                                <li><strong>100 Mbit/s</strong> Up</li>
                                <li>Symmetrisch!</li>
                            </ul>
                            <Link href="#kontakt" className="btn btn-outline btn-sm w-full">Anfragen</Link>
                        </div>

                        {/* Fun */}
                        <div className="card flex flex-col items-center border-[color:var(--color-primary)]">
                            <h3 className="text-xl font-bold mb-[var(--spacing-xs)]">fun</h3>
                            <div className="text-3xl font-bold text-[color:var(--color-accent)] mb-[var(--spacing-sm)]">€29,00</div>
                            <div className="text-sm text-[color:var(--color-muted-foreground)] mb-[var(--spacing-md)]">/ Monat</div>
                            <ul className="text-sm space-y-[var(--spacing-xs)] flex-1 mb-[var(--spacing-md)] text-center">
                                <li><strong>200 Mbit/s</strong> Down</li>
                                <li><strong>200 Mbit/s</strong> Up</li>
                                <li>Symmetrisch!</li>
                            </ul>
                            <Link href="#kontakt" className="btn btn-primary btn-sm w-full">Anfragen</Link>
                        </div>

                        {/* Pro */}
                        <div className="card flex flex-col items-center bg-[var(--color-muted)]/30">
                            <h3 className="text-xl font-bold mb-[var(--spacing-xs)]">pro</h3>
                            <div className="text-3xl font-bold text-[color:var(--color-accent)] mb-[var(--spacing-sm)]">€39,00</div>
                            <div className="text-sm text-[color:var(--color-muted-foreground)] mb-[var(--spacing-md)]">/ Monat</div>
                            <ul className="text-sm space-y-[var(--spacing-xs)] flex-1 mb-[var(--spacing-md)] text-center">
                                <li><strong>300 Mbit/s</strong> Down</li>
                                <li><strong>300 Mbit/s</strong> Up</li>
                                <li>Public IPv4 Address</li>
                            </ul>
                            <Link href="#kontakt" className="btn btn-outline btn-sm w-full">Anfragen</Link>
                        </div>

                        {/* Mega */}
                        <div className="card flex flex-col items-center bg-[var(--color-muted)]/30">
                            <h3 className="text-xl font-bold mb-[var(--spacing-xs)]">mega</h3>
                            <div className="text-3xl font-bold text-[color:var(--color-accent)] mb-[var(--spacing-sm)]">€49,00</div>
                            <div className="text-sm text-[color:var(--color-muted-foreground)] mb-[var(--spacing-md)]">/ Monat</div>
                            <ul className="text-sm space-y-[var(--spacing-xs)] flex-1 mb-[var(--spacing-md)] text-center">
                                <li><strong>500 Mbit/s</strong> Down</li>
                                <li><strong>500 Mbit/s</strong> Up</li>
                                <li>Public IPv4 Address</li>
                            </ul>
                            <Link href="#kontakt" className="btn btn-outline btn-sm w-full">Anfragen</Link>
                        </div>
                    </div>
                </Container>
            </Section>

            {/* Business */}
            <Section className="bg-[var(--color-muted)]">
                <Container className="text-center">
                    <h2 className="mb-[var(--spacing-md)]">Internet für Unternehmen</h2>
                    <p className="max-w-2xl mx-auto mb-[var(--spacing-lg)]">
                        Sie benötigen garantierte Bandbreiten, SLA oder spezielle IP-Konfigurationen?
                        Wir erstellen Ihnen gerne ein maßgeschneidertes Angebot.
                    </p>
                    <Link href="#kontakt" className="btn btn-primary">
                        Business-Anfrage stellen
                    </Link>
                </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)]">Jetzt Internet bestellen</h2>
                    <p className="lead text-white mb-[var(--spacing-xl)]">
                        Wir kümmern uns um die Installation.
                    </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)]">
                            ✉️ Tarif wählen
                        </a>
                    </div>
                </Container>
            </Section>
        </main>
    );
}