import type { Metadata } from "next";
import { Building2 } from "lucide-react";
import PageHero from "@/components/sections/PageHero";
import TariffTable from "@/components/sections/TariffTable";
import ContactSection from "@/components/sections/ContactSection";
import Container from "@/components/ui/Container";
import SectionHeading from "@/components/ui/SectionHeading";
import Button from "@/components/ui/Button";
import { INTERNET_TARIFE } from "@/lib/constants";

export const metadata: Metadata = {
  title: "Internet",
  description:
    "Schnelles Internet in Reutte und Tirol. Kabel- und Glasfaser-Tarife für Privat- und Geschäftskunden. Faire Preise, stabile Verbindung.",
};

export default function InternetPage() {
  const kabelTarife = INTERNET_TARIFE.filter((t) => t.category === "kabel");
  const glasfaserTarife = INTERNET_TARIFE.filter((t) => t.category === "glasfaser");

  return (
    <>
      <PageHero
        title="Internet für Reutte und Umgebung"
        description="Ob Streaming, Homeoffice oder einfach sorgenfreies Surfen — wir bringen Sie ins Netz. Stabil, schnell und ohne Überraschungen auf der Rechnung."
        backgroundImage="/images/hero/internet-header.jpg"
      />

      {/* Kabel-Internet */}
      <section className="py-20 lg:py-24" aria-labelledby="kabel-heading">
        <Container>
          <SectionHeading
            title="Kabel-Internet"
            subtitle="Unsere bewährten Tarife über das Kabelnetz. Verfügbar im Großteil des Außerferns."
          />
          <TariffTable plans={kabelTarife} />
        </Container>
      </section>

      {/* Glasfaser */}
      <section className="bg-neutral-50 py-20 lg:py-24" aria-labelledby="glasfaser-heading">
        <Container>
          <SectionHeading
            title="Glasfaser-Internet"
            subtitle="Wo Glasfaser verfügbar ist, geht mehr. Deutlich mehr. Ideal für anspruchsvolle Nutzer und Mehrpersonenhaushalte."
          />
          <TariffTable plans={glasfaserTarife} />
        </Container>
      </section>

      {/* Business Internet */}
      <section className="py-20 lg:py-24" aria-labelledby="business-internet-heading">
        <Container>
          <div className="grid grid-cols-1 items-center gap-12 lg:grid-cols-2">
            <div>
              <div className="flex items-center gap-3 mb-4">
                <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-amber-100">
                  <Building2 className="h-5 w-5 text-amber-700" aria-hidden="true" />
                </div>
                <h2 id="business-internet-heading" className="text-title font-bold text-neutral-900">
                  Internet für Ihr Unternehmen
                </h2>
              </div>
              <p className="text-neutral-600 leading-relaxed">
                Standardtarife passen nicht immer. Wenn Ihr Betrieb symmetrische Bandbreiten braucht,
                feste IP-Adressen benötigt oder mehrere Standorte vernetzen will — sprechen Sie mit uns.
              </p>
              <p className="mt-4 text-neutral-600 leading-relaxed">
                Wir schauen uns Ihre Situation an und machen Ihnen ein Angebot, das zu Ihrem
                Unternehmen passt. Keine Pakete von der Stange, sondern genau das, was Sie brauchen.
              </p>
              <Button href="/#kontakt" variant="primary" size="md" className="mt-8">
                Individuelles Angebot anfragen
              </Button>
            </div>
            <div className="overflow-hidden rounded-card">
              <img
                src="/images/gallery/serverraum.jpg"
                alt="Serverraum für Business-Internet-Lösungen"
                className="w-full object-cover"
                loading="lazy"
                width={600}
                height={400}
              />
            </div>
          </div>
        </Container>
      </section>

      <ContactSection />
    </>
  );
}
