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 { Wifi, Check, Phone, ArrowRight } from "lucide-react";

export const metadata: Metadata = {
    title: "Internet",
    description:
        "Highspeed-Internet über Kabel oder Glasfaser. Schnell, stabil, unlimitiert – für Privat- und Geschäftskunden in Tirol.",
};

const kabelTarife = [
    {
        name: "telenet.hit",
        preis: "€ 14,50",
        download: "40 Mbit/s",
        upload: "6 Mbit/s",
        features: ["Keine Servicepauschale", "Unlimitierte Daten"],
    },
    {
        name: "telenet.eco",
        preis: "€ 19,00",
        download: "60 Mbit/s",
        upload: "8 Mbit/s",
        features: ["Keine Servicepauschale", "Unlimitierte Daten"],
    },
    {
        name: "telenet.fun",
        preis: "€ 29,00",
        download: "80 Mbit/s",
        upload: "12 Mbit/s",
        features: ["Keine Servicepauschale", "Unlimitierte Daten"],
    },
    {
        name: "telenet.pro",
        preis: "€ 39,00",
        download: "100 Mbit/s",
        upload: "14 Mbit/s",
        features: ["Keine Servicepauschale", "Unlimitierte Daten", "Öffentliche IPv4"],
        highlight: true,
    },
    {
        name: "telenet.mega",
        preis: "€ 49,00",
        download: "180 Mbit/s",
        upload: "22 Mbit/s",
        features: ["Keine Servicepauschale", "Unlimitierte Daten", "Öffentliche IPv4"],
    },
];

const glasfaserTarife = [
    {
        name: "telenet.eco",
        preis: "€ 23,00",
        download: "100 Mbit/s",
        upload: "100 Mbit/s",
        features: ["Keine Servicepauschale", "Unlimitierte Daten", "Symmetrisch"],
    },
    {
        name: "telenet.fun",
        preis: "€ 29,00",
        download: "200 Mbit/s",
        upload: "200 Mbit/s",
        features: ["Keine Servicepauschale", "Unlimitierte Daten", "Symmetrisch"],
    },
    {
        name: "telenet.pro",
        preis: "€ 39,00",
        download: "300 Mbit/s",
        upload: "300 Mbit/s",
        features: ["Keine Servicepauschale", "Unlimitierte Daten", "Symmetrisch", "Öffentliche IPv4"],
        highlight: true,
    },
    {
        name: "telenet.mega",
        preis: "€ 49,00",
        download: "500 Mbit/s",
        upload: "500 Mbit/s",
        features: ["Keine Servicepauschale", "Unlimitierte Daten", "Symmetrisch", "Öffentliche IPv4"],
    },
];

export default function InternetPage() {
    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)]">
                                <Wifi size={32} className="text-[var(--color-background)]" />
                            </div>
                            <h1 className="mb-[var(--spacing-lg)]">
                                Highspeed-Internet
                                <span className="text-[var(--color-primary)]"> für Tirol</span>
                            </h1>
                            <p className="lead mb-[var(--spacing-2xl)]">
                                Schnelles und zuverlässiges Internet über Kabel oder Glasfaser.
                                Flexible Tarife ohne Servicepauschale – für Privat- und Geschäftskunden.
                            </p>
                            <Link href="/kontakt" className="btn btn-primary btn-lg">
                                Jetzt beraten lassen
                            </Link>
                        </div>
                        <div className="relative">
                            <Image
                                src="/images/hero/internet-header-431619ac.jpg"
                                alt="Highspeed Internet Verbindung"
                                width={800}
                                height={600}
                                className="rounded-[var(--radius-lg)] shadow-[var(--shadow-lg)]"
                                priority
                            />
                        </div>
                    </div>
                </Container>
            </Section>

            {/* Trust Elements */}
            <Section variant="sm" className="border-b border-[var(--color-border)]">
                <Container>
                    <div className="flex flex-wrap justify-center gap-[var(--spacing-xl)]">
                        {["Keine Servicepauschale", "Unlimitierte Daten", "IPv6 inklusive", "Regionaler Support"].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>

            {/* Kabel-Internet Section */}
            <Section id="kabel">
                <Container>
                    <div className="text-center mb-[var(--spacing-3xl)]">
                        <span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
                            Tarife für Kabel-Kunden
                        </span>
                        <h2 className="mt-[var(--spacing-sm)]">Kabel-Internet</h2>
                    </div>
                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-[var(--spacing-lg)]">
                        {kabelTarife.map((tarif) => (
                            <div
                                key={tarif.name}
                                className={`card text-center ${tarif.highlight ? "ring-2 ring-[var(--color-primary)]" : ""}`}
                            >
                                {tarif.highlight && (
                                    <span className="inline-block bg-[var(--color-primary)] text-[var(--color-background)] text-xs font-medium px-[var(--spacing-sm)] py-[var(--spacing-xs)] rounded-full mb-[var(--spacing-md)]">
                                        Empfohlen
                                    </span>
                                )}
                                <h3 className="heading-5 mb-[var(--spacing-sm)]">{tarif.name}</h3>
                                <p className="text-3xl font-bold text-[var(--color-primary)]">{tarif.preis}</p>
                                <p className="text-sm text-muted mb-[var(--spacing-md)]">pro Monat</p>
                                <div className="text-sm mb-[var(--spacing-md)]">
                                    <p><strong>{tarif.download}</strong> Download</p>
                                    <p><strong>{tarif.upload}</strong> Upload</p>
                                </div>
                                <ul className="stack-xs text-left text-sm mb-[var(--spacing-lg)]">
                                    {tarif.features.map((feature) => (
                                        <li key={feature} className="flex items-center gap-[var(--spacing-xs)]">
                                            <Check size={14} className="text-[var(--color-primary)] shrink-0" />
                                            <span>{feature}</span>
                                        </li>
                                    ))}
                                </ul>
                                <Link href="/kontakt" className="btn btn-outline btn-sm w-full">
                                    Anfragen
                                </Link>
                            </div>
                        ))}
                    </div>
                    <p className="text-xs text-muted text-center mt-[var(--spacing-xl)]">
                        Tarife gültig ab 01.05.2024. Für die Installation fallen einmalige Installationskosten an.
                    </p>
                </Container>
            </Section>

            {/* Glasfaser-Internet Section */}
            <Section id="glasfaser" className="bg-[var(--color-muted)]">
                <Container>
                    <div className="text-center mb-[var(--spacing-3xl)]">
                        <span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
                            Tarife für Glasfaser-Kunden
                        </span>
                        <h2 className="mt-[var(--spacing-sm)]">Glasfaser-Internet</h2>
                        <p className="lead max-w-2xl mx-auto mt-[var(--spacing-md)]">
                            Symmetrische Geschwindigkeiten – gleich schnell im Download und Upload.
                        </p>
                    </div>
                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-[var(--spacing-lg)] max-w-5xl mx-auto">
                        {glasfaserTarife.map((tarif) => (
                            <div
                                key={tarif.name + "-glas"}
                                className={`card text-center ${tarif.highlight ? "ring-2 ring-[var(--color-primary)]" : ""}`}
                            >
                                {tarif.highlight && (
                                    <span className="inline-block bg-[var(--color-primary)] text-[var(--color-background)] text-xs font-medium px-[var(--spacing-sm)] py-[var(--spacing-xs)] rounded-full mb-[var(--spacing-md)]">
                                        Empfohlen
                                    </span>
                                )}
                                <h3 className="heading-5 mb-[var(--spacing-sm)]">{tarif.name}</h3>
                                <p className="text-3xl font-bold text-[var(--color-primary)]">{tarif.preis}</p>
                                <p className="text-sm text-muted mb-[var(--spacing-md)]">pro Monat</p>
                                <div className="text-sm mb-[var(--spacing-md)]">
                                    <p><strong>{tarif.download}</strong> Download</p>
                                    <p><strong>{tarif.upload}</strong> Upload</p>
                                </div>
                                <ul className="stack-xs text-left text-sm mb-[var(--spacing-lg)]">
                                    {tarif.features.map((feature) => (
                                        <li key={feature} className="flex items-center gap-[var(--spacing-xs)]">
                                            <Check size={14} className="text-[var(--color-primary)] shrink-0" />
                                            <span>{feature}</span>
                                        </li>
                                    ))}
                                </ul>
                                <Link href="/kontakt" className="btn btn-outline btn-sm w-full">
                                    Anfragen
                                </Link>
                            </div>
                        ))}
                    </div>
                    <p className="text-xs text-muted text-center mt-[var(--spacing-xl)]">
                        Tarife gültig ab 01.04.2025. Für die Installation fallen einmalige Installationskosten an.
                    </p>
                </Container>
            </Section>

            {/* Business Section */}
            <Section>
                <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)]">
                            Business-Internet
                        </h2>
                        <p className="text-muted mb-[var(--spacing-xl)]">
                            Gerne erstellen wir für Ihr Unternehmen ein maßgeschneidertes Business-Internet-Angebot
                            inkl. passendem Service-Paket. Schicken Sie uns einfach Ihre Anfrage.
                        </p>
                        <Link href="/kontakt" className="btn btn-primary">
                            Individuelle Lösung anfragen
                            <ArrowRight size={18} />
                        </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)]">
                            Welcher Tarif passt zu Ihnen?
                        </h2>
                        <p className="text-lg opacity-90 mb-[var(--spacing-xl)] max-w-2xl mx-auto">
                            Wir beraten Sie gerne und finden die beste Lösung für Ihre Anforderungen.
                        </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>
    );
}