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

export const metadata: Metadata = {
    title: "Telefonie",
    description:
        "Flexible Telefonie-Tarife für Festnetz. Mit oder ohne Internet nutzbar – für Privat- und Geschäftskunden in Tirol.",
};

const telefonieTarife = [
    {
        name: "telenet.zero",
        beschreibung: "Ohne Internet",
        preis: "€ 5,00",
        kosten: "Festnetz AT: ab 2,4 Cent/Min.",
        features: ["Nur Telefonie", "Günstige Minutenpreise"],
    },
    {
        name: "telenet.zero",
        beschreibung: "Mit Internet von Telenet",
        preis: "€ 0,00",
        kosten: "Festnetz AT: ab 2,4 Cent/Min.",
        features: ["Kostenlos zu Ihrem Internet", "Günstige Minutenpreise"],
        highlight: true,
    },
    {
        name: "telenet.business",
        beschreibung: "Für Geschäftskunden",
        preis: "€ 8,90",
        kosten: "Festnetz AT: ab 3,24 Cent/Min.",
        features: ["Business-Funktionen", "Professioneller Support"],
    },
];

export default function TelefoniePage() {
    return (
        <main>
            {/* Hero Section */}
            <Section variant="hero" className="bg-[var(--color-muted)]">
                <Container>
                    <div className="max-w-3xl">
                        <div className="w-16 h-16 rounded-[var(--radius-lg)] bg-[var(--color-primary)] flex items-center justify-center mb-[var(--spacing-lg)]">
                            <PhoneIcon size={32} className="text-[var(--color-background)]" />
                        </div>
                        <h1 className="mb-[var(--spacing-lg)]">
                            Telefonie
                            <span className="text-[var(--color-primary)]"> ohne Kompromisse</span>
                        </h1>
                        <p className="lead mb-[var(--spacing-2xl)]">
                            Flexible Telefonie-Tarife für Ihr Festnetz.
                            Mit oder ohne Internet nutzbar – Sie haben die Wahl.
                        </p>
                        <Link href="/kontakt" className="btn btn-primary btn-lg">
                            Jetzt beraten lassen
                        </Link>
                    </div>
                </Container>
            </Section>

            {/* Tarife Section */}
            <Section>
                <Container>
                    <div className="text-center mb-[var(--spacing-3xl)]">
                        <span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
                            Kabel-Telefonie-Tarife
                        </span>
                        <h2 className="mt-[var(--spacing-sm)]">Unsere Tarife</h2>
                    </div>
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-[var(--spacing-xl)] max-w-4xl mx-auto">
                        {telefonieTarife.map((tarif, index) => (
                            <div
                                key={`${tarif.name}-${index}`}
                                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-xs)]">{tarif.name}</h3>
                                <p className="text-sm text-muted mb-[var(--spacing-md)]">{tarif.beschreibung}</p>
                                <p className="text-4xl font-bold text-[var(--color-primary)]">{tarif.preis}</p>
                                <p className="text-sm text-muted mb-[var(--spacing-md)]">pro Monat</p>
                                <p className="text-sm mb-[var(--spacing-lg)]">{tarif.kosten}</p>
                                <ul className="stack-sm text-left mb-[var(--spacing-lg)]">
                                    {tarif.features.map((feature) => (
                                        <li key={feature} className="flex items-center gap-[var(--spacing-sm)]">
                                            <Check size={16} className="text-[var(--color-primary)] shrink-0" />
                                            <span className="text-sm">{feature}</span>
                                        </li>
                                    ))}
                                </ul>
                                <Link href="/kontakt" className="btn btn-outline w-full">
                                    Anfragen
                                </Link>
                            </div>
                        ))}
                    </div>
                </Container>
            </Section>

            {/* Info Section */}
            <Section className="bg-[var(--color-muted)]">
                <Container variant="narrow">
                    <div className="text-center">
                        <h2 className="mb-[var(--spacing-lg)]">So funktioniert es</h2>
                        <div className="stack-lg text-left">
                            <div className="card">
                                <h3 className="heading-5 mb-[var(--spacing-sm)]">Telefonie mit Telenet-Internet</h3>
                                <p className="text-muted">
                                    Wenn Sie bereits Internet von TeleNetSystems nutzen, können Sie unsere Telefonie
                                    kostenlos hinzubuchen. Sie zahlen nur die tatsächlich geführten Gespräche nach Minutenpreis.
                                </p>
                            </div>
                            <div className="card">
                                <h3 className="heading-5 mb-[var(--spacing-sm)]">Telefonie ohne Internet</h3>
                                <p className="text-muted">
                                    Sie möchten nur Telefonie ohne Internet? Kein Problem.
                                    Für nur € 5,00 pro Monat erhalten Sie einen Festnetzanschluss mit günstigen Minutenpreisen.
                                </p>
                            </div>
                            <div className="card">
                                <h3 className="heading-5 mb-[var(--spacing-sm)]">Business-Telefonie</h3>
                                <p className="text-muted">
                                    Für Geschäftskunden bieten wir professionelle Telefonie-Lösungen mit erweiterten Funktionen
                                    und dediziertem Support.
                                </p>
                            </div>
                        </div>
                    </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)]">
                            Fragen zu unseren Telefonie-Tarifen?
                        </h2>
                        <p className="text-lg opacity-90 mb-[var(--spacing-xl)] max-w-2xl mx-auto">
                            Wir beraten Sie gerne und finden die passende 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"
                            >
                                <PhoneIcon size={18} />
                                PLACEHOLDER: Telefon
                            </a>
                        </div>
                    </div>
                </Container>
            </Section>
        </main>
    );
}