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 { Wifi, Zap, Building2, CheckCircle, ArrowDown, ArrowUp } from "lucide-react";

export const metadata: Metadata = {
  title: "Internet",
  description:
    "Highspeed-Internet über Kabel und Glasfaser im Bezirk Reutte. Flexible Tarife für Privat- und Geschäftskunden ab 14,50 € im Monat. Ohne Servicepauschale.",
  openGraph: {
    title: "Internet | Telenet Systems GmbH",
    description:
      "Highspeed-Internet über Kabel und Glasfaser im Bezirk Reutte. Ab 14,50 € im Monat.",
  },
};

const kabelTarife = [
  {
    name: "telenet.hit",
    price: "14,50",
    download: "40",
    upload: "6",
    popular: false,
  },
  {
    name: "telenet.eco",
    price: "19,00",
    download: "60",
    upload: "8",
    popular: false,
  },
  {
    name: "telenet.fun",
    price: "29,00",
    download: "80",
    upload: "12",
    popular: true,
  },
  {
    name: "telenet.pro",
    price: "39,00",
    download: "100",
    upload: "14",
    popular: false,
  },
  {
    name: "telenet.mega",
    price: "49,00",
    download: "180",
    upload: "22",
    popular: false,
  },
];

const glasfaserTarife = [
  {
    name: "telenet.eco",
    price: "23,00",
    download: "100",
    upload: "100",
    popular: false,
  },
  {
    name: "telenet.fun",
    price: "29,00",
    download: "200",
    upload: "200",
    popular: true,
  },
  {
    name: "telenet.pro",
    price: "39,00",
    download: "300",
    upload: "300",
    popular: false,
  },
  {
    name: "telenet.mega",
    price: "49,00",
    download: "500",
    upload: "500",
    popular: false,
  },
];

const benefits = [
  "Keine Servicepauschale",
  "Unlimitiertes Datenvolumen",
  "IPv6 inklusive",
  "Persönlicher Support",
];

export default function InternetPage() {
  return (
    <>
      {/* Hero Section */}
      <Section variant="hero" className="relative overflow-hidden bg-[var(--color-foreground)]">
        <div className="absolute inset-0 z-0">
          <Image
            src="/images/hero/internet-header-431619ac.jpg"
            alt="Highspeed Internet"
            fill
            priority
            className="object-cover opacity-40"
            sizes="100vw"
          />
        </div>
        <Container className="relative z-10">
          <div className="max-w-3xl">
            <div className="inline-flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-md)]">
              <Wifi className="h-5 w-5" aria-hidden="true" />
              <span className="font-medium">Internet</span>
            </div>
            <h1 className="text-[var(--color-background)] mb-[var(--spacing-lg)]">
              Highspeed-Internet für Ihr Zuhause
            </h1>
            <p className="lead text-gray-300 mb-[var(--spacing-xl)]">
              Schnelles und zuverlässiges Internet über Kabel oder Glasfaser.
              Flexible Tarife ohne Servicepauschale – ab 14,50 € im Monat.
            </p>
            <div className="flex flex-wrap gap-[var(--spacing-md)]">
              <Link href="/kontakt" className="btn btn-primary btn-lg">
                Jetzt bestellen
              </Link>
              <a href="#tarife" className="btn btn-outline btn-lg text-[var(--color-background)] border-[var(--color-background)] hover:bg-[var(--color-background)] hover:text-[var(--color-foreground)]">
                Tarife vergleichen
              </a>
            </div>
          </div>
        </Container>
      </Section>

      {/* Trust Bar */}
      <Section variant="sm" className="bg-[var(--color-muted)]">
        <Container>
          <div className="flex flex-wrap justify-center gap-x-[var(--spacing-2xl)] gap-y-[var(--spacing-md)]">
            {benefits.map((benefit) => (
              <div
                key={benefit}
                className="flex items-center gap-[var(--spacing-sm)] text-sm font-medium"
              >
                <CheckCircle
                  className="h-5 w-5 text-[var(--color-success)]"
                  aria-hidden="true"
                />
                <span>{benefit}</span>
              </div>
            ))}
          </div>
        </Container>
      </Section>

      {/* Kabel-Tarife */}
      <Section id="tarife">
        <Container>
          <div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]">
            <div className="inline-flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-md)]">
              <Zap className="h-5 w-5" aria-hidden="true" />
              <span className="font-medium">Kabel-Internet</span>
            </div>
            <h2>Tarife für Kabel-Kunden</h2>
            <p className="text-muted mt-[var(--spacing-md)]">
              Tarife gültig ab 01.05.2024. Alle Preise inkl. MwSt.
            </p>
          </div>

          <div className="overflow-x-auto">
            <table className="w-full border-collapse">
              <thead>
                <tr className="border-b border-[var(--color-border)]">
                  <th className="text-left py-[var(--spacing-md)] px-[var(--spacing-sm)] font-semibold">
                    Tarif
                  </th>
                  <th className="text-center py-[var(--spacing-md)] px-[var(--spacing-sm)] font-semibold">
                    <span className="flex items-center justify-center gap-1">
                      <ArrowDown className="h-4 w-4" aria-hidden="true" />
                      Download
                    </span>
                  </th>
                  <th className="text-center py-[var(--spacing-md)] px-[var(--spacing-sm)] font-semibold">
                    <span className="flex items-center justify-center gap-1">
                      <ArrowUp className="h-4 w-4" aria-hidden="true" />
                      Upload
                    </span>
                  </th>
                  <th className="text-right py-[var(--spacing-md)] px-[var(--spacing-sm)] font-semibold">
                    Preis / Monat
                  </th>
                  <th className="py-[var(--spacing-md)] px-[var(--spacing-sm)]"></th>
                </tr>
              </thead>
              <tbody>
                {kabelTarife.map((tarif) => (
                  <tr
                    key={tarif.name}
                    className={`border-b border-[var(--color-border)] ${
                      tarif.popular ? "bg-[var(--color-primary)]/5" : ""
                    }`}
                  >
                    <td className="py-[var(--spacing-md)] px-[var(--spacing-sm)]">
                      <span className="font-medium">{tarif.name}</span>
                      {tarif.popular && (
                        <span className="ml-2 text-xs bg-[var(--color-primary)] text-[var(--color-background)] px-2 py-0.5 rounded-full">
                          Beliebt
                        </span>
                      )}
                    </td>
                    <td className="text-center py-[var(--spacing-md)] px-[var(--spacing-sm)]">
                      {tarif.download} Mbit/s
                    </td>
                    <td className="text-center py-[var(--spacing-md)] px-[var(--spacing-sm)]">
                      {tarif.upload} Mbit/s
                    </td>
                    <td className="text-right py-[var(--spacing-md)] px-[var(--spacing-sm)] font-semibold">
                      € {tarif.price}
                    </td>
                    <td className="py-[var(--spacing-md)] px-[var(--spacing-sm)]">
                      <Link
                        href="/kontakt"
                        className="btn btn-sm btn-outline"
                      >
                        Bestellen
                      </Link>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          <p className="text-sm text-muted mt-[var(--spacing-lg)]">
            Alle Tarife enthalten unlimitiertes Datenvolumen und IPv6-Adressen.
            Für die Tarife ab telenet.pro ist eine öffentliche IPv4-Adresse enthalten.
            Einmalige Installationskosten je nach Aufwand.
          </p>
        </Container>
      </Section>

      {/* Glasfaser-Tarife */}
      <Section className="bg-[var(--color-muted)]">
        <Container>
          <div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]">
            <div className="inline-flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-md)]">
              <Zap className="h-5 w-5" aria-hidden="true" />
              <span className="font-medium">Glasfaser-Internet</span>
            </div>
            <h2>Tarife für Glasfaser-Kunden</h2>
            <p className="text-muted mt-[var(--spacing-md)]">
              Symmetrische Bandbreite – gleich schnell hoch- wie runterladen. Tarife gültig ab 01.04.2025.
            </p>
          </div>

          <div className="overflow-x-auto">
            <table className="w-full border-collapse bg-[var(--color-background)] rounded-[var(--radius-lg)]">
              <thead>
                <tr className="border-b border-[var(--color-border)]">
                  <th className="text-left py-[var(--spacing-md)] px-[var(--spacing-lg)] font-semibold">
                    Tarif
                  </th>
                  <th className="text-center py-[var(--spacing-md)] px-[var(--spacing-sm)] font-semibold">
                    <span className="flex items-center justify-center gap-1">
                      <ArrowDown className="h-4 w-4" aria-hidden="true" />
                      Download
                    </span>
                  </th>
                  <th className="text-center py-[var(--spacing-md)] px-[var(--spacing-sm)] font-semibold">
                    <span className="flex items-center justify-center gap-1">
                      <ArrowUp className="h-4 w-4" aria-hidden="true" />
                      Upload
                    </span>
                  </th>
                  <th className="text-right py-[var(--spacing-md)] px-[var(--spacing-sm)] font-semibold">
                    Preis / Monat
                  </th>
                  <th className="py-[var(--spacing-md)] px-[var(--spacing-lg)]"></th>
                </tr>
              </thead>
              <tbody>
                {glasfaserTarife.map((tarif) => (
                  <tr
                    key={tarif.name + "-gf"}
                    className={`border-b border-[var(--color-border)] last:border-b-0 ${
                      tarif.popular ? "bg-[var(--color-primary)]/5" : ""
                    }`}
                  >
                    <td className="py-[var(--spacing-md)] px-[var(--spacing-lg)]">
                      <span className="font-medium">{tarif.name}</span>
                      {tarif.popular && (
                        <span className="ml-2 text-xs bg-[var(--color-primary)] text-[var(--color-background)] px-2 py-0.5 rounded-full">
                          Empfohlen
                        </span>
                      )}
                    </td>
                    <td className="text-center py-[var(--spacing-md)] px-[var(--spacing-sm)]">
                      {tarif.download} Mbit/s
                    </td>
                    <td className="text-center py-[var(--spacing-md)] px-[var(--spacing-sm)]">
                      {tarif.upload} Mbit/s
                    </td>
                    <td className="text-right py-[var(--spacing-md)] px-[var(--spacing-sm)] font-semibold">
                      € {tarif.price}
                    </td>
                    <td className="py-[var(--spacing-md)] px-[var(--spacing-lg)]">
                      <Link
                        href="/kontakt"
                        className="btn btn-sm btn-outline"
                      >
                        Bestellen
                      </Link>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          <p className="text-sm text-muted mt-[var(--spacing-lg)]">
            Glasfaser bietet symmetrische Geschwindigkeiten – ideal für Homeoffice und Videokonferenzen.
            Alle Tarife ohne Servicepauschale mit unlimitiertem Datenvolumen.
          </p>
        </Container>
      </Section>

      {/* Business 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/misc/firmenkunden-96736712-5fa99704.jpg"
                alt="Geschäftskunde im Büro"
                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)]">
                <Building2 className="h-5 w-5" aria-hidden="true" />
                <span className="font-medium">Business-Internet</span>
              </div>
              <h2>Maßgeschneiderte Lösungen für Ihr Unternehmen</h2>
              <p className="lead mt-[var(--spacing-md)] mb-[var(--spacing-lg)]">
                Für Unternehmen erstellen wir individuelle Internet-Angebote
                inklusive passendem Service-Paket.
              </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>Dedizierte Bandbreite</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>Statische IP-Adressen</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>Erweiterte SLA-Optionen</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>Persönliche Betreuung</span>
                </li>
              </ul>
              <Link href="/kontakt" className="btn btn-primary">
                Angebot anfragen
              </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)]">
              Welcher Tarif passt zu Ihnen?
            </h2>
            <p className="text-gray-300 text-lg mt-[var(--spacing-md)] mb-[var(--spacing-xl)]">
              Wir beraten Sie gerne persönlich und finden gemeinsam den idealen
              Internet-Tarif für Ihre Bedürfnisse.
            </p>
            <div className="flex flex-wrap justify-center gap-[var(--spacing-md)]">
              <Link href="/kontakt" className="btn btn-primary btn-lg">
                Beratung anfragen
              </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>
    </>
  );
}