import Image from "next/image";
import Link from "next/link";
import { Container } from "@/components/layout/Container";
import { Section } from "@/components/layout/Section";
import {
  Tv,
  Wifi,
  Phone,
  Users,
  Shield,
  Clock,
  MapPin,
  ArrowRight,
  CheckCircle,
} from "lucide-react";

const services = [
  {
    icon: Tv,
    title: "Fernsehen",
    description:
      "Über 200 Programme inkl. 40 HDTV-Sendern. Erstklassige Unterhaltung für Ihr Zuhause – ab 16,47 € im Monat.",
    href: "/fernsehen",
    image: "/images/misc/tv-privat-76f60c7a-88eafcfb.jpg",
  },
  {
    icon: Wifi,
    title: "Internet",
    description:
      "Highspeed-Internet über Kabel und Glasfaser. Flexible Tarife für Privat- und Geschäftskunden – ab 14,50 € im Monat.",
    href: "/internet",
    image: "/images/misc/internet-7b594a2d-793cefee.jpg",
  },
  {
    icon: Phone,
    title: "Telefonie",
    description:
      "Günstige Telefonie-Tarife fürs Festnetz. Für Privat- und Geschäftskunden – ab 0 € mit Telenet-Internet.",
    href: "/telefonie",
    image: "/images/misc/telefon-fa5e8c21-271d2135.jpg",
  },
];

const usps = [
  {
    icon: MapPin,
    title: "Regionale Nähe",
    description:
      "Persönlicher Service direkt vor Ort im Bezirk Reutte. Bei uns kennt man sich noch persönlich.",
  },
  {
    icon: Clock,
    title: "Seit 1976",
    description:
      "Fast 50 Jahre Erfahrung in der Telekommunikation. Verlässlichkeit, der Sie vertrauen können.",
  },
  {
    icon: Shield,
    title: "Voller Service",
    description:
      "Von TV über Internet bis IT-Support – alles aus einer Hand. Keine Servicepauschale bei unseren Tarifen.",
  },
  {
    icon: Users,
    title: "Schneller Support",
    description:
      "Probleme lösen wir direkt – telefonisch oder vor Ort. Kurze Wege, schnelle Hilfe.",
  },
];

const trustItems = [
  "Keine versteckten Kosten",
  "Unlimitiertes Datenvolumen",
  "Persönlicher Ansprechpartner",
  "Regionaler Kundendienst",
];

export default function HomePage() {
  return (
    <>
      {/* Hero Section */}
      <Section variant="hero" className="relative overflow-hidden bg-[var(--color-foreground)]">
        <div className="absolute inset-0 z-0">
          <Image
            src="/images/misc/firma1-8a863d8b.jpg"
            alt="Telenet Systems Firmengebäude in Reutte"
            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)]">
              Ihr regionaler Partner in Tirol
            </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)]">
              Seit 1976 versorgen wir den Bezirk Reutte mit zuverlässigem Fernsehen,
              schnellem Internet und flexibler Telefonie. Persönliche Beratung,
              ehrlicher Service – ohne komplizierte Prozesse.
            </p>
            <div className="flex flex-wrap gap-[var(--spacing-md)]">
              <Link href="/kontakt" className="btn btn-primary btn-lg">
                Jetzt beraten lassen
              </Link>
              <Link href="/leistungen" className="btn btn-outline btn-lg text-[var(--color-background)] border-[var(--color-background)] hover:bg-[var(--color-background)] hover:text-[var(--color-foreground)]">
                Unsere Leistungen
              </Link>
            </div>
          </div>
        </Container>
      </Section>

      {/* USP Section */}
      <Section className="bg-[var(--color-muted)]">
        <Container>
          <div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]">
            <h2>Warum Telenet Systems?</h2>
            <p className="lead mt-[var(--spacing-md)]">
              Als regionaler Anbieter verbinden wir modernste Technik mit persönlichem Service.
            </p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-[var(--spacing-xl)]">
            {usps.map((usp) => (
              <div key={usp.title} className="text-center">
                <div className="inline-flex items-center justify-center w-14 h-14 rounded-full bg-[var(--color-primary)] text-[var(--color-background)] mb-[var(--spacing-md)]">
                  <usp.icon className="h-6 w-6" aria-hidden="true" />
                </div>
                <h3 className="heading-5 mb-[var(--spacing-sm)]">{usp.title}</h3>
                <p className="text-muted">{usp.description}</p>
              </div>
            ))}
          </div>
        </Container>
      </Section>

      {/* Services Section */}
      <Section>
        <Container>
          <div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]">
            <h2>Unsere Leistungen für Sie</h2>
            <p className="lead mt-[var(--spacing-md)]">
              Fernsehen, Internet und Telefonie – alles aus einer Hand, ohne Servicepauschale.
            </p>
          </div>
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-[var(--spacing-xl)]">
            {services.map((service) => (
              <Link
                key={service.title}
                href={service.href}
                className="card group overflow-hidden hover:shadow-[var(--shadow-lg)] transition-shadow"
              >
                <div className="relative h-48 -mx-[var(--spacing-xl)] -mt-[var(--spacing-xl)] mb-[var(--spacing-lg)] overflow-hidden">
                  <Image
                    src={service.image}
                    alt={service.title}
                    fill
                    className="object-cover group-hover:scale-105 transition-transform duration-300"
                    sizes="(max-width: 1024px) 100vw, 33vw"
                  />
                </div>
                <div className="flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-sm)]">
                  <service.icon className="h-5 w-5" aria-hidden="true" />
                  <h3 className="heading-4">{service.title}</h3>
                </div>
                <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 group-hover:gap-[var(--spacing-sm)] transition-all">
                  Mehr erfahren
                  <ArrowRight className="h-4 w-4" aria-hidden="true" />
                </span>
              </Link>
            ))}
          </div>
        </Container>
      </Section>

      {/* Trust Section */}
      <Section className="bg-[var(--color-primary)]">
        <Container>
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-[var(--spacing-3xl)] items-center">
            <div>
              <h2 className="text-[var(--color-background)]">
                Transparent und fair – ohne versteckte Kosten
              </h2>
              <p className="text-white/90 text-lg mt-[var(--spacing-md)] mb-[var(--spacing-xl)]">
                Bei uns wissen Sie immer, woran Sie sind. Keine Überraschungen auf der Rechnung,
                keine komplizierte Tarifstruktur. Einfach, ehrlich, regional.
              </p>
              <ul className="space-y-[var(--spacing-sm)]">
                {trustItems.map((item) => (
                  <li
                    key={item}
                    className="flex items-center gap-[var(--spacing-sm)] text-[var(--color-background)]"
                  >
                    <CheckCircle className="h-5 w-5 flex-shrink-0" aria-hidden="true" />
                    <span>{item}</span>
                  </li>
                ))}
              </ul>
            </div>
            <div className="relative h-80 lg:h-96 rounded-[var(--radius-lg)] overflow-hidden">
              <Image
                src="/images/services/tnr-leistungen-055053d5.jpg"
                alt="Telenet Systems Mitarbeiter bei der Arbeit"
                fill
                className="object-cover"
                sizes="(max-width: 1024px) 100vw, 50vw"
              />
            </div>
          </div>
        </Container>
      </Section>

      {/* For Whom Section */}
      <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 md:grid-cols-2 gap-[var(--spacing-xl)]">
            {/* Privatkunden */}
            <div className="card relative overflow-hidden">
              <div className="relative h-48 -mx-[var(--spacing-xl)] -mt-[var(--spacing-xl)] mb-[var(--spacing-lg)]">
                <Image
                  src="/images/misc/privatkunden-a54cf4d8-0018c3fa.jpg"
                  alt="Familie vor dem Fernseher"
                  fill
                  className="object-cover"
                  sizes="(max-width: 768px) 100vw, 50vw"
                />
              </div>
              <h3 className="heading-3 mb-[var(--spacing-sm)]">Privatkunden</h3>
              <p className="text-muted mb-[var(--spacing-lg)]">
                Zuverlässiges Fernsehen, schnelles Internet und günstige Telefonie für Ihr Zuhause.
                Flexible Tarife ohne Servicepauschale und mit persönlicher Betreuung vor Ort.
              </p>
              <Link href="/internet" className="btn btn-primary">
                Tarife für Privatkunden
              </Link>
            </div>

            {/* Geschäftskunden */}
            <div className="card relative overflow-hidden">
              <div className="relative h-48 -mx-[var(--spacing-xl)] -mt-[var(--spacing-xl)] mb-[var(--spacing-lg)]">
                <Image
                  src="/images/misc/firmenkunden-96736712-5fa99704.jpg"
                  alt="Geschäftsmann im Büro"
                  fill
                  className="object-cover"
                  sizes="(max-width: 768px) 100vw, 50vw"
                />
              </div>
              <h3 className="heading-3 mb-[var(--spacing-sm)]">Geschäftskunden</h3>
              <p className="text-muted mb-[var(--spacing-lg)]">
                Maßgeschneiderte Business-Lösungen für Kommunikation und IT.
                Von der Netzwerkplanung bis zur Fernwartung – alles aus einer Hand.
              </p>
              <Link href="/leistungen" className="btn btn-primary">
                Business-Lösungen
              </Link>
            </div>
          </div>
        </Container>
      </Section>

      {/* CTA Section */}
      <Section className="bg-[var(--color-foreground)]">
        <Container>
          <div className="text-center max-w-2xl mx-auto">
            <h2 className="text-[var(--color-background)]">
              Haben Sie Fragen? Wir beraten Sie gerne.
            </h2>
            <p className="text-gray-300 text-lg mt-[var(--spacing-md)] mb-[var(--spacing-xl)]">
              Unser Team in Reutte steht Ihnen persönlich zur Verfügung.
              Rufen Sie uns an oder senden Sie uns eine Nachricht.
            </p>
            <div className="flex flex-wrap justify-center gap-[var(--spacing-md)]">
              <Link href="/kontakt" className="btn btn-primary btn-lg">
                Kontakt aufnehmen
              </Link>
              <a href="tel:+4356725000" className="btn btn-outline btn-lg text-[var(--color-background)] border-[var(--color-background)] hover:bg-[var(--color-background)] hover:text-[var(--color-foreground)]">
                +43 5672 5000
              </a>
            </div>
          </div>
        </Container>
      </Section>
    </>
  );
}