import { Metadata } from "next";
import Link from "next/link";
import { Section } from "@/components/layout/Section";
import { Container } from "@/components/layout/Container";
import {
    Tv,
    Wifi,
    Phone,
    Server,
    Wrench,
    MonitorSmartphone,
    Cable,
    Shield,
    ArrowRight
} from "lucide-react";

export const metadata: Metadata = {
    title: "Leistungen",
    description:
        "Umfassende Telekom- und IT-Services für Tirol. Fernsehen, Internet, Telefonie, IT-Support und Netzwerkplanung.",
};

const mainServices = [
    {
        title: "Fernsehen",
        description: "Über 200 Programme inkl. 40 HDTV-Sender für Privat- und Geschäftskunden.",
        icon: Tv,
        href: "/fernsehen",
    },
    {
        title: "Internet",
        description: "Highspeed-Internet über Kabel oder Glasfaser – schnell, stabil, unlimitiert.",
        icon: Wifi,
        href: "/internet",
    },
    {
        title: "Telefonie",
        description: "Flexible Festnetz-Tarife. Mit oder ohne Internet nutzbar.",
        icon: Phone,
        href: "/telefonie",
    },
];

const itServices = [
    {
        title: "Netzwerk- & Serverplanung",
        description: "Professionelle Planung und Umsetzung Ihrer IT-Infrastruktur.",
        icon: Server,
    },
    {
        title: "IT-Installation",
        description: "Fachgerechte Installation von Hard- und Software vor Ort.",
        icon: MonitorSmartphone,
    },
    {
        title: "Reparatur & Wartung",
        description: "Schnelle Hilfe bei Problemen, regelmäßige Wartung Ihrer Systeme.",
        icon: Wrench,
    },
    {
        title: "Fernwartung",
        description: "Schnelle Problembehebung aus der Ferne – ohne Wartezeit vor Ort.",
        icon: Shield,
    },
    {
        title: "Glasfaser-Planung & -Ausbau",
        description: "Beratung und Umsetzung für Glasfaser-Anbindungen.",
        icon: Cable,
    },
];

export default function LeistungenPage() {
    return (
        <main>
            {/* Hero Section */}
            <Section variant="hero" className="bg-[var(--color-muted)]">
                <Container>
                    <div className="max-w-3xl">
                        <h1 className="mb-[var(--spacing-lg)]">
                            Alle Leistungen
                            <span className="text-[var(--color-primary)]"> im Überblick</span>
                        </h1>
                        <p className="lead mb-[var(--spacing-2xl)]">
                            Von Fernsehen über Internet bis zu IT-Services –
                            wir bieten Ihnen umfassende Lösungen aus einer Hand.
                        </p>
                        <Link href="/kontakt" className="btn btn-primary btn-lg">
                            Jetzt beraten lassen
                        </Link>
                    </div>
                </Container>
            </Section>

            {/* Telekom Services */}
            <Section>
                <Container>
                    <div className="text-center mb-[var(--spacing-3xl)]">
                        <span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
                            Telekommunikation
                        </span>
                        <h2 className="mt-[var(--spacing-sm)]">Fernsehen, Internet & Telefonie</h2>
                    </div>
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-[var(--spacing-xl)]">
                        {mainServices.map((service) => (
                            <Link
                                key={service.title}
                                href={service.href}
                                className="card group hover:shadow-lg transition-shadow hover:no-underline"
                            >
                                <div className="w-12 h-12 rounded-[var(--radius-md)] bg-[var(--color-primary)]/10 flex items-center justify-center mb-[var(--spacing-lg)] group-hover:bg-[var(--color-primary)] transition-colors">
                                    <service.icon
                                        size={24}
                                        className="text-[var(--color-primary)] group-hover:text-[var(--color-background)] transition-colors"
                                    />
                                </div>
                                <h3 className="heading-4 mb-[var(--spacing-sm)] text-[var(--color-foreground)]">
                                    {service.title}
                                </h3>
                                <p className="text-muted mb-[var(--spacing-md)]">
                                    {service.description}
                                </p>
                                <span className="inline-flex items-center gap-[var(--spacing-xs)] text-[var(--color-primary)] font-medium">
                                    Mehr erfahren
                                    <ArrowRight size={16} />
                                </span>
                            </Link>
                        ))}
                    </div>
                </Container>
            </Section>

            {/* IT Services */}
            <Section 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">
                            IT-Dienstleistungen
                        </span>
                        <h2 className="mt-[var(--spacing-sm)]">IT-Services & Support</h2>
                        <p className="lead max-w-2xl mx-auto mt-[var(--spacing-md)]">
                            Professionelle IT-Lösungen für Unternehmen und Privatkunden.
                        </p>
                    </div>
                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[var(--spacing-lg)]">
                        {itServices.map((service) => (
                            <div key={service.title} className="card">
                                <div className="w-10 h-10 rounded-[var(--radius-md)] bg-[var(--color-primary)]/10 flex items-center justify-center mb-[var(--spacing-md)]">
                                    <service.icon size={20} className="text-[var(--color-primary)]" />
                                </div>
                                <h3 className="heading-5 mb-[var(--spacing-sm)]">{service.title}</h3>
                                <p className="text-sm text-muted">{service.description}</p>
                            </div>
                        ))}
                    </div>
                    <div className="text-center mt-[var(--spacing-2xl)]">
                        <Link href="/kontakt" className="btn btn-primary">
                            IT-Beratung anfragen
                            <ArrowRight size={18} />
                        </Link>
                    </div>
                </Container>
            </Section>

            {/* Business Section */}
            <Section>
                <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 Unternehmen
                            </span>
                            <h2 className="mt-[var(--spacing-sm)] mb-[var(--spacing-lg)]">
                                Maßgeschneiderte Lösungen
                            </h2>
                            <p className="text-muted mb-[var(--spacing-lg)]">
                                Sie benötigen eine individuelle Lösung für Ihr Unternehmen?
                                Wir analysieren Ihre Anforderungen und erstellen ein maßgeschneidertes Angebot –
                                von der Telekommunikation bis zur kompletten IT-Infrastruktur.
                            </p>
                            <ul className="stack-sm mb-[var(--spacing-xl)]">
                                <li className="flex items-start gap-[var(--spacing-sm)]">
                                    <span className="w-6 h-6 rounded-full bg-[var(--color-primary)] text-[var(--color-background)] flex items-center justify-center text-sm font-medium shrink-0">1</span>
                                    <span>Bedarfsanalyse vor Ort</span>
                                </li>
                                <li className="flex items-start gap-[var(--spacing-sm)]">
                                    <span className="w-6 h-6 rounded-full bg-[var(--color-primary)] text-[var(--color-background)] flex items-center justify-center text-sm font-medium shrink-0">2</span>
                                    <span>Individuelles Angebot</span>
                                </li>
                                <li className="flex items-start gap-[var(--spacing-sm)]">
                                    <span className="w-6 h-6 rounded-full bg-[var(--color-primary)] text-[var(--color-background)] flex items-center justify-center text-sm font-medium shrink-0">3</span>
                                    <span>Professionelle Umsetzung</span>
                                </li>
                                <li className="flex items-start gap-[var(--spacing-sm)]">
                                    <span className="w-6 h-6 rounded-full bg-[var(--color-primary)] text-[var(--color-background)] flex items-center justify-center text-sm font-medium shrink-0">4</span>
                                    <span>Laufender Support</span>
                                </li>
                            </ul>
                            <Link href="/kontakt" className="btn btn-primary">
                                Beratungstermin vereinbaren
                            </Link>
                        </div>
                        <div className="bg-[var(--color-muted)] rounded-[var(--radius-lg)] p-[var(--spacing-2xl)] text-center">
                            <p className="text-6xl font-bold text-[var(--color-primary)] mb-[var(--spacing-md)]">
                                50
                            </p>
                            <p className="text-xl font-semibold mb-[var(--spacing-sm)]">Jahre Erfahrung</p>
                            <p className="text-muted">
                                Seit 1976 sind wir Ihr zuverlässiger Partner für Telekommunikation und IT in Tirol.
                            </p>
                        </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)]">
                            Haben Sie Fragen zu unseren Leistungen?
                        </h2>
                        <p className="text-lg opacity-90 mb-[var(--spacing-xl)] max-w-2xl mx-auto">
                            Kontaktieren Sie uns für eine unverbindliche Beratung.
                            Wir finden gemeinsam die passende Lösung.
                        </p>
                        <Link
                            href="/kontakt"
                            className="btn bg-[var(--color-background)] text-[var(--color-primary)] hover:opacity-90"
                        >
                            Jetzt beraten lassen
                        </Link>
                    </div>
                </Container>
            </Section>
        </main>
    );
}