import type { Metadata } from "next";
import { Wifi, Tv, Phone, Server, Shield, Wrench } from "lucide-react";
import PageHero from "@/components/sections/PageHero";
import ContactSection from "@/components/sections/ContactSection";
import Container from "@/components/ui/Container";
import SectionHeading from "@/components/ui/SectionHeading";
import Button from "@/components/ui/Button";

export const metadata: Metadata = {
  title: "Leistungen",
  description:
    "Alle Dienstleistungen von TeleNetSystems im Überblick. Internet, TV, Telefonie und IT-Lösungen für Privat- und Geschäftskunden in Reutte und Tirol.",
};

const services = [
  {
    icon: Wifi,
    title: "Internet",
    description:
      "Kabel und Glasfaser für Privathaushalte und Unternehmen. Von 30 Mbit/s bis zu 500 Mbit/s — je nach Verfügbarkeit und Bedarf.",
    href: "/internet",
    image: "/images/gallery/internet.jpg",
    imageAlt: "Internet-Dienste von TeleNetSystems",
  },
  {
    icon: Tv,
    title: "Fernsehen",
    description:
      "TV-Pakete über Kabel, von der Grundversorgung bis zum umfangreichen Premium-Paket. Für Privatkunden und Unternehmen.",
    href: "/fernsehen",
    image: "/images/gallery/tv-privat.jpg",
    imageAlt: "TV-Dienste von TeleNetSystems",
  },
  {
    icon: Phone,
    title: "Telefonie",
    description:
      "Festnetz-Tarife, die zum Telefonierverhalten passen. Minutengenau oder als Flatrate, auch in Kombination mit Internet.",
    href: "/telefonie",
    image: "/images/gallery/telefonie1.jpg",
    imageAlt: "Telefonie-Dienste von TeleNetSystems",
  },
];

const additionalServices = [
  {
    icon: Server,
    title: "IT-Infrastruktur",
    description: "Netzwerke, Server und die Technik dahinter. Wir planen, installieren und betreuen Ihre IT-Umgebung.",
  },
  {
    icon: Shield,
    title: "Netzwerksicherheit",
    description: "Firewalls, sichere Zugänge und Datenschutz. Damit Ihre Daten dort bleiben, wo sie hingehören.",
  },
  {
    icon: Wrench,
    title: "Technischer Support",
    description: "Wenn etwas nicht funktioniert, sind wir da. Vor Ort in Reutte, nicht am anderen Ende einer Hotline.",
  },
];

export default function LeistungenPage() {
  return (
    <>
      <PageHero
        title="Unsere Leistungen im Überblick"
        description="Von Internet über TV bis zur kompletten IT-Betreuung. Alles aus einer Hand, alles aus Reutte."
        backgroundImage="/images/gallery/firma1.jpg"
      />

      {/* Main Services */}
      <section className="py-20 lg:py-24" aria-labelledby="main-services-heading">
        <Container>
          <SectionHeading
            title="Unsere Kernbereiche"
            subtitle="Drei Dienste, auf die Sie sich verlassen können."
          />
          <div className="space-y-16" id="main-services-heading">
            {services.map((service, index) => {
              const Icon = service.icon;
              const isReversed = index % 2 !== 0;
              return (
                <div
                  key={service.title}
                  className={`grid grid-cols-1 items-center gap-12 lg:grid-cols-2 ${isReversed ? "lg:direction-rtl" : ""}`}
                >
                  <div className={isReversed ? "lg:order-2" : ""}>
                    <div className="flex items-center gap-3 mb-4">
                      <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary-100">
                        <Icon className="h-5 w-5 text-primary-700" aria-hidden="true" />
                      </div>
                      <h3 className="text-title font-bold text-neutral-900">{service.title}</h3>
                    </div>
                    <p className="text-neutral-600 leading-relaxed">{service.description}</p>
                    <Button href={service.href} variant="outline" size="sm" className="mt-6">
                      Zu den {service.title}-Tarifen
                    </Button>
                  </div>
                  <div className={`overflow-hidden rounded-card ${isReversed ? "lg:order-1" : ""}`}>
                    <img
                      src={service.image}
                      alt={service.imageAlt}
                      className="w-full object-cover"
                      loading="lazy"
                      width={600}
                      height={400}
                    />
                  </div>
                </div>
              );
            })}
          </div>
        </Container>
      </section>

      {/* Additional Services */}
      <section className="bg-neutral-50 py-20 lg:py-24" aria-labelledby="additional-services-heading">
        <Container>
          <SectionHeading
            title="Darüber hinaus"
            subtitle="Neben Internet, TV und Telefonie unterstützen wir Sie auch bei der IT-Infrastruktur."
          />
          <div className="grid grid-cols-1 gap-8 md:grid-cols-3" id="additional-services-heading">
            {additionalServices.map((service) => {
              const Icon = service.icon;
              return (
                <div
                  key={service.title}
                  className="rounded-card bg-white p-8 shadow-sm border border-neutral-200"
                >
                  <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-primary-100">
                    <Icon className="h-6 w-6 text-primary-700" aria-hidden="true" />
                  </div>
                  <h3 className="mt-4 text-lg font-semibold text-neutral-900">{service.title}</h3>
                  <p className="mt-2 text-sm leading-relaxed text-neutral-600">{service.description}</p>
                </div>
              );
            })}
          </div>
        </Container>
      </section>

      <ContactSection />
    </>
  );
}
