import type { Metadata } from "next";
import Image from "next/image";
import Link from "next/link";
import { Container } from "@/components/layout/Container";
import { Section } from "@/components/layout/Section";
import {
  Server,
  Network,
  Wrench,
  Monitor,
  Cable,
  Shield,
  Headphones,
  Building2,
  Users,
  CheckCircle,
} from "lucide-react";

export const metadata: Metadata = {
  title: "Leistungen",
  description:
    "Umfassende Telekom- und IT-Services im Bezirk Reutte. Von Netzwerkplanung über IT-Installation bis Fernwartung – alles aus einer Hand.",
  openGraph: {
    title: "Leistungen | Telenet Systems GmbH",
    description:
      "Umfassende Telekom- und IT-Services im Bezirk Reutte. Netzwerkplanung, IT-Installation, Fernwartung.",
  },
};

const services = [
  {
    icon: Network,
    title: "Netzwerkplanung",
    description:
      "Professionelle Planung und Konzeption von Netzwerkinfrastrukturen für Unternehmen jeder Größe.",
  },
  {
    icon: Server,
    title: "Serverplanung",
    description:
      "Beratung und Planung von Serverlösungen – von der Hardware bis zur Software-Konfiguration.",
  },
  {
    icon: Wrench,
    title: "IT-Installation",
    description:
      "Fachgerechte Installation von IT-Komponenten, Netzwerken und Kommunikationssystemen.",
  },
  {
    icon: Monitor,
    title: "Reparaturen",
    description:
      "Schnelle und zuverlässige Reparatur von IT-Geräten und Netzwerkkomponenten.",
  },
  {
    icon: Headphones,
    title: "Fernwartung",
    description:
      "Remote-Support für schnelle Problemlösung ohne Wartezeit auf einen Vor-Ort-Termin.",
  },
  {
    icon: Cable,
    title: "Glasfaser-Ausbau",
    description:
      "Planung und Umsetzung von Glasfaser-Infrastruktur für zukunftssichere Anbindungen.",
  },
  {
    icon: Shield,
    title: "Qualitätssicherung",
    description:
      "Kontinuierliche Überwachung und Optimierung Ihrer IT-Systeme für maximale Verfügbarkeit.",
  },
  {
    icon: Building2,
    title: "Behördliche Unterstützung",
    description:
      "Technisch-behördliche Unterstützung bei Netzprojekten und Genehmigungsverfahren.",
  },
];

const targetGroups = [
  {
    icon: Users,
    title: "Privatkunden",
    description:
      "Zuverlässige TV-, Internet- und Telefonielösungen für Ihr Zuhause. Mit persönlichem Service vor Ort.",
    features: [
      "TV mit über 200 Programmen",
      "Highspeed-Internet bis 500 Mbit/s",
      "Günstige Telefonie-Tarife",
      "Persönliche Beratung",
    ],
    cta: "Zu den Tarifen",
    href: "/internet",
    image: "/images/misc/privatkunden-a54cf4d8-0018c3fa.jpg",
  },
  {
    icon: Building2,
    title: "Geschäftskunden",
    description:
      "Professionelle IT- und Kommunikationslösungen für Ihr Unternehmen. Maßgeschneidert und zuverlässig.",
    features: [
      "Business-Internet & Telefonie",
      "Netzwerk- & Serverplanung",
      "IT-Installation & Support",
      "Fernwartung & Monitoring",
    ],
    cta: "Kontakt aufnehmen",
    href: "/kontakt",
    image: "/images/misc/firmenkunden-96736712-5fa99704.jpg",
  },
];

export default function LeistungenPage() {
  return (
    <>
      {/* Hero Section */}
      <Section variant="hero" className="relative overflow-hidden bg-[var(--color-foreground)]">
        <div className="absolute inset-0 z-0">
          <Image
            src="/images/services/tnr-leistungen-055053d5.jpg"
            alt="Telenet Systems Mitarbeiter"
            fill
            priority
            className="object-cover opacity-40"
            sizes="100vw"
          />
        </div>
        <Container className="relative z-10">
          <div className="max-w-3xl">
            <p className="text-[var(--color-primary)] font-medium mb-[var(--spacing-md)]">
              Unser Leistungsangebot
            </p>
            <h1 className="text-[var(--color-background)] mb-[var(--spacing-lg)]">
              Telekommunikation und IT-Services aus einer Hand
            </h1>
            <p className="lead text-gray-300 mb-[var(--spacing-xl)]">
              Von TV und Internet über Telefonie bis zu professionellen IT-Dienstleistungen –
              wir bieten alles, was Sie für moderne Kommunikation benötigen.
            </p>
            <div className="flex flex-wrap gap-[var(--spacing-md)]">
              <Link href="/kontakt" className="btn btn-primary btn-lg">
                Jetzt beraten lassen
              </Link>
              <a href="#services" className="btn btn-outline btn-lg text-[var(--color-background)] border-[var(--color-background)] hover:bg-[var(--color-background)] hover:text-[var(--color-foreground)]">
                Leistungen entdecken
              </a>
            </div>
          </div>
        </Container>
      </Section>

      {/* Zielgruppen */}
      <Section>
        <Container>
          <div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]">
            <h2>Für Privat- und Geschäftskunden</h2>
            <p className="lead mt-[var(--spacing-md)]">
              Ob Zuhause oder im Unternehmen – wir haben die passende Lösung für Sie.
            </p>
          </div>
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-[var(--spacing-xl)]">
            {targetGroups.map((group) => (
              <div key={group.title} className="card overflow-hidden">
                <div className="relative h-48 -mx-[var(--spacing-xl)] -mt-[var(--spacing-xl)] mb-[var(--spacing-lg)]">
                  <Image
                    src={group.image}
                    alt={group.title}
                    fill
                    className="object-cover"
                    sizes="(max-width: 1024px) 100vw, 50vw"
                  />
                </div>
                <div className="flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-sm)]">
                  <group.icon className="h-5 w-5" aria-hidden="true" />
                  <h3 className="heading-3">{group.title}</h3>
                </div>
                <p className="text-muted mb-[var(--spacing-lg)]">{group.description}</p>
                <ul className="space-y-[var(--spacing-sm)] mb-[var(--spacing-xl)]">
                  {group.features.map((feature) => (
                    <li
                      key={feature}
                      className="flex items-center gap-[var(--spacing-sm)] text-sm"
                    >
                      <CheckCircle
                        className="h-4 w-4 text-[var(--color-success)] flex-shrink-0"
                        aria-hidden="true"
                      />
                      <span>{feature}</span>
                    </li>
                  ))}
                </ul>
                <Link href={group.href} className="btn btn-primary">
                  {group.cta}
                </Link>
              </div>
            ))}
          </div>
        </Container>
      </Section>

      {/* IT-Services */}
      <Section id="services" className="bg-[var(--color-muted)]">
        <Container>
          <div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]">
            <h2>IT-Services für Unternehmen</h2>
            <p className="lead mt-[var(--spacing-md)]">
              Professionelle IT-Dienstleistungen von der Planung bis zur Wartung.
              Alles aus einer Hand, mit persönlichem Ansprechpartner vor Ort.
            </p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-[var(--spacing-lg)]">
            {services.map((service) => (
              <div key={service.title} className="card text-center">
                <div className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-[var(--color-primary)] text-[var(--color-background)] mb-[var(--spacing-md)]">
                  <service.icon className="h-6 w-6" aria-hidden="true" />
                </div>
                <h3 className="heading-5 mb-[var(--spacing-sm)]">{service.title}</h3>
                <p className="text-sm text-muted">{service.description}</p>
              </div>
            ))}
          </div>
        </Container>
      </Section>

      {/* Glasfaser Section */}
      <Section>
        <Container>
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-[var(--spacing-3xl)] items-center">
            <div className="relative h-80 lg:h-full min-h-[320px] rounded-[var(--radius-lg)] overflow-hidden">
              <Image
                src="/images/services/lwl1-40360e27.jpg"
                alt="Glasfaser-Installation"
                fill
                className="object-cover"
                sizes="(max-width: 1024px) 100vw, 50vw"
              />
            </div>
            <div>
              <div className="inline-flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-md)]">
                <Cable className="h-5 w-5" aria-hidden="true" />
                <span className="font-medium">Glasfaser</span>
              </div>
              <h2>Zukunftssichere Glasfaser-Infrastruktur</h2>
              <p className="lead mt-[var(--spacing-md)] mb-[var(--spacing-lg)]">
                Wir planen und bauen Glasfasernetze für Gemeinden und Unternehmen.
                Profitieren Sie von unserer langjährigen Erfahrung.
              </p>
              <ul className="space-y-[var(--spacing-sm)] mb-[var(--spacing-xl)]">
                <li className="flex items-center gap-[var(--spacing-sm)]">
                  <CheckCircle className="h-5 w-5 text-[var(--color-success)] flex-shrink-0" aria-hidden="true" />
                  <span>Glasfaser-Planung & Beratung</span>
                </li>
                <li className="flex items-center gap-[var(--spacing-sm)]">
                  <CheckCircle className="h-5 w-5 text-[var(--color-success)] flex-shrink-0" aria-hidden="true" />
                  <span>Professioneller Netzausbau</span>
                </li>
                <li className="flex items-center gap-[var(--spacing-sm)]">
                  <CheckCircle className="h-5 w-5 text-[var(--color-success)] flex-shrink-0" aria-hidden="true" />
                  <span>Behördliche Unterstützung</span>
                </li>
                <li className="flex items-center gap-[var(--spacing-sm)]">
                  <CheckCircle className="h-5 w-5 text-[var(--color-success)] flex-shrink-0" aria-hidden="true" />
                  <span>Qualitätssicherung</span>
                </li>
              </ul>
              <Link href="/kontakt" className="btn btn-primary">
                Projekt anfragen
              </Link>
            </div>
          </div>
        </Container>
      </Section>

      {/* CTA Section */}
      <Section className="bg-[var(--color-primary)]">
        <Container>
          <div className="text-center max-w-2xl mx-auto">
            <h2 className="text-[var(--color-background)]">
              Haben Sie Fragen zu unseren Leistungen?
            </h2>
            <p className="text-white/90 text-lg mt-[var(--spacing-md)] mb-[var(--spacing-xl)]">
              Wir beraten Sie gerne persönlich und finden die optimale Lösung für Ihre Anforderungen.
            </p>
            <div className="flex flex-wrap justify-center gap-[var(--spacing-md)]">
              <Link
                href="/kontakt"
                className="btn btn-lg bg-[var(--color-background)] text-[var(--color-foreground)] hover:opacity-90"
              >
                Jetzt beraten lassen
              </Link>
              <a
                href="tel:+4356725000"
                className="btn btn-lg btn-outline text-[var(--color-background)] border-[var(--color-background)] hover:bg-[var(--color-background)] hover:text-[var(--color-primary)]"
              >
                +43 5672 5000
              </a>
            </div>
          </div>
        </Container>
      </Section>
    </>
  );
}
