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 { Phone, Building2, CheckCircle, Users } from "lucide-react";

export const metadata: Metadata = {
  title: "Telefonie",
  description:
    "Günstige Telefonie-Tarife fürs Festnetz im Bezirk Reutte. Für Privat- und Geschäftskunden – ab 0 € mit Telenet-Internet.",
  openGraph: {
    title: "Telefonie | Telenet Systems GmbH",
    description:
      "Günstige Telefonie-Tarife fürs Festnetz im Bezirk Reutte. Ab 0 € mit Telenet-Internet.",
  },
};

const telefonieTarife = [
  {
    name: "telenet.zero",
    subtitle: "ohne Internet",
    price: "5,00",
    minutenpreis: "2,4",
    description: "Festnetz-Telefonie ohne Internet-Anschluss von Telenet.",
    features: [
      "Festnetzanschluss",
      "Günstiger Minutenpreis",
      "Keine Grundgebühr bei Internet",
    ],
    popular: false,
  },
  {
    name: "telenet.zero",
    subtitle: "mit Internet von Telenet",
    price: "0,00",
    minutenpreis: "2,4",
    description: "Festnetz-Telefonie ohne Grundgebühr für Telenet-Internet-Kunden.",
    features: [
      "Keine monatliche Grundgebühr",
      "Günstiger Minutenpreis",
      "Perfekt für Telenet-Kunden",
    ],
    popular: true,
  },
  {
    name: "telenet.business",
    subtitle: "für Unternehmen",
    price: "8,90",
    minutenpreis: "3,24",
    description: "Professionelle Telefonie-Lösung für Geschäftskunden.",
    features: [
      "Business-Tarif",
      "Professioneller Service",
      "Individuelle Optionen",
    ],
    popular: false,
  },
];

const benefits = [
  "Günstige Minutenpreise",
  "Keine versteckten Kosten",
  "Einfache Einrichtung",
  "Persönlicher Support",
];

export default function TelefoniePage() {
  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/telefonie1-ad7595f9.jpg"
            alt="Telefonie"
            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)]">
              <Phone className="h-5 w-5" aria-hidden="true" />
              <span className="font-medium">Telefonie</span>
            </div>
            <h1 className="text-[var(--color-background)] mb-[var(--spacing-lg)]">
              Flexible Telefonie-Tarife für jeden Bedarf
            </h1>
            <p className="lead text-gray-300 mb-[var(--spacing-xl)]">
              Günstig ins österreichische Festnetz telefonieren.
              Mit Telenet-Internet sogar ohne monatliche Grundgebühr.
            </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 ansehen
              </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>

      {/* Tarife */}
      <Section id="tarife">
        <Container>
          <div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]">
            <h2>Unsere Telefonie-Tarife</h2>
            <p className="lead mt-[var(--spacing-md)]">
              Einfache Preisstruktur ohne versteckte Kosten.
              Wählen Sie den passenden Tarif für Ihre Bedürfnisse.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-[var(--spacing-xl)]">
            {telefonieTarife.map((tarif, index) => (
              <div
                key={`${tarif.name}-${index}`}
                className={`card relative ${
                  tarif.popular
                    ? "border-[var(--color-primary)] border-2"
                    : ""
                }`}
              >
                {tarif.popular && (
                  <div className="absolute -top-3 left-1/2 -translate-x-1/2 bg-[var(--color-primary)] text-[var(--color-background)] text-xs font-semibold px-3 py-1 rounded-full">
                    Empfohlen
                  </div>
                )}
                <div className="text-center">
                  <h3 className="heading-4 text-[var(--color-primary)]">
                    {tarif.name}
                  </h3>
                  <p className="text-sm text-muted mb-[var(--spacing-md)]">
                    {tarif.subtitle}
                  </p>
                  <div className="mb-[var(--spacing-md)]">
                    <span className="heading-1">€ {tarif.price}</span>
                    <span className="text-muted"> / Monat</span>
                  </div>
                  <p className="text-sm text-muted mb-[var(--spacing-sm)]">
                    Festnetz AT: ab {tarif.minutenpreis} Cent / Minute
                  </p>
                </div>
                <hr className="border-[var(--color-border)] my-[var(--spacing-lg)]" />
                <p className="text-muted mb-[var(--spacing-lg)]">
                  {tarif.description}
                </p>
                <ul className="space-y-[var(--spacing-sm)] mb-[var(--spacing-xl)]">
                  {tarif.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="/kontakt"
                  className={`btn w-full ${
                    tarif.popular ? "btn-primary" : "btn-outline"
                  }`}
                >
                  Jetzt bestellen
                </Link>
              </div>
            ))}
          </div>
        </Container>
      </Section>

      {/* Kombinieren Section */}
      <Section className="bg-[var(--color-muted)]">
        <Container>
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-[var(--spacing-3xl)] items-center">
            <div>
              <div className="inline-flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-md)]">
                <Users className="h-5 w-5" aria-hidden="true" />
                <span className="font-medium">Tipp</span>
              </div>
              <h2>Telefonie + Internet kombinieren</h2>
              <p className="lead mt-[var(--spacing-md)] mb-[var(--spacing-lg)]">
                Als Telenet-Internet-Kunde telefonieren Sie ohne monatliche Grundgebühr.
                Sie zahlen nur für die tatsächlich geführten Gespräche.
              </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>0 € Grundgebühr mit Telenet-Internet</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>Einfache Abrechnung über eine Rechnung</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>Ein Ansprechpartner für alles</span>
                </li>
              </ul>
              <Link href="/internet" className="btn btn-primary">
                Internet-Tarife ansehen
              </Link>
            </div>
            <div className="relative h-80 lg:h-96 rounded-[var(--radius-lg)] overflow-hidden">
              <Image
                src="/images/misc/telefon-fa5e8c21-271d2135.jpg"
                alt="Person telefoniert"
                fill
                className="object-cover"
                sizes="(max-width: 1024px) 100vw, 50vw"
              />
            </div>
          </div>
        </Container>
      </Section>

      {/* Business Section */}
      <Section>
        <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)]">
              <Building2 className="h-5 w-5" aria-hidden="true" />
              <span className="font-medium">Business</span>
            </div>
            <h2>Telefonie für Unternehmen</h2>
            <p className="lead mt-[var(--spacing-md)]">
              Professionelle Telefonielösungen für Ihr Unternehmen.
              Wir beraten Sie gerne zu den verschiedenen Möglichkeiten.
            </p>
          </div>
          <div className="card max-w-2xl mx-auto text-center">
            <h3 className="heading-4 mb-[var(--spacing-md)]">
              Individuelle Business-Lösungen
            </h3>
            <p className="text-muted mb-[var(--spacing-lg)]">
              Für Unternehmen bieten wir maßgeschneiderte Telefonielösungen an.
              Von der klassischen Festnetzanbindung bis zu modernen VoIP-Systemen –
              wir finden die passende Lösung für Ihre Anforderungen.
            </p>
            <Link href="/kontakt" className="btn btn-primary">
              Beratung anfragen
            </Link>
          </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)]">
              Fragen zu unseren Telefonie-Tarifen?
            </h2>
            <p className="text-gray-300 text-lg mt-[var(--spacing-md)] mb-[var(--spacing-xl)]">
              Unser Team berät Sie gerne persönlich und findet den passenden Tarif für Sie.
            </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>
    </>
  );
}