import type { Metadata } from "next";
import Image from "next/image";

import { ContactStrip } from "@/components/contact-strip";
import { PageHero } from "@/components/page-hero";
import { internetTariffs } from "@/lib/site-content";

export const metadata: Metadata = {
  title: "Internet in Reutte und Tirol",
  description:
    "Internet-Tarife fuer Reutte und Tirol: Kabel, Glasfaser und Business-Leitungen mit transparenten Preisen und regionalem Support."
};

export default function InternetPage() {
  return (
    <>
      <PageHero
        eyebrow="Internet"
        title="Schnelles Internet fuer Alltag und Betrieb"
        intro="Ob Familie, Homeoffice oder Unternehmensstandort: Sie sehen auf einen Blick, welche Geschwindigkeit, Vertragsdauer und Kosten zu Ihrem Bedarf passen."
        imageSrc="/assets/gallery/internet-7b594a2d-793cefee.jpg"
        imageAlt="Internetinfrastruktur von TeleNetSystems"
        primaryCta={{ label: "Jetzt beraten lassen", href: "/#kontakt" }}
        secondaryCta={{ label: "Fernsehen ansehen", href: "/fernsehen" }}
      />

      <section className="section-block pt-6">
        <div className="container-shell grid gap-5 md:grid-cols-3">
          <article className="surface-card">
            <h2 className="text-xl font-semibold text-alpine-900">Transparent kalkuliert</h2>
            <p className="mt-3 text-sm text-alpine-700">Monatspreis, Aktivierung und Laufzeit sind offen dargestellt.</p>
          </article>
          <article className="surface-card">
            <h2 className="text-xl font-semibold text-alpine-900">Stabil in Spitzenzeiten</h2>
            <p className="mt-3 text-sm text-alpine-700">Tarife sind fuer Streaming, Homeoffice und Cloud-Nutzung ausgelegt.</p>
          </article>
          <article className="surface-card">
            <h2 className="text-xl font-semibold text-alpine-900">Support vor Ort</h2>
            <p className="mt-3 text-sm text-alpine-700">Keine Hotline-Odyssee. Unser Team sitzt in Tirol und kennt die Netze.</p>
          </article>
        </div>
      </section>

      <section className="section-block bg-white/70">
        <div className="container-shell space-y-12">
          <div>
            <p className="eyebrow">Privatkunden | Kabel</p>
            <div className="mt-4 table-shell">
              <table className="data-table">
                <thead>
                  <tr>
                    <th>Tarif</th>
                    <th>Geschwindigkeit</th>
                    <th>Laufzeit</th>
                    <th>Setup</th>
                    <th>Preis</th>
                  </tr>
                </thead>
                <tbody>
                  {internetTariffs.privateCable.map((tariff) => (
                    <tr key={tariff.name}>
                      <td>{tariff.name}</td>
                      <td>{tariff.speed}</td>
                      <td>{tariff.contract}</td>
                      <td>{tariff.setup}</td>
                      <td>{tariff.price}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>

          <div>
            <p className="eyebrow">Privatkunden | Glasfaser</p>
            <div className="mt-4 table-shell">
              <table className="data-table">
                <thead>
                  <tr>
                    <th>Tarif</th>
                    <th>Geschwindigkeit</th>
                    <th>Laufzeit</th>
                    <th>Setup</th>
                    <th>Preis</th>
                  </tr>
                </thead>
                <tbody>
                  {internetTariffs.privateFiber.map((tariff) => (
                    <tr key={tariff.name}>
                      <td>{tariff.name}</td>
                      <td>{tariff.speed}</td>
                      <td>{tariff.contract}</td>
                      <td>{tariff.setup}</td>
                      <td>{tariff.price}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </section>

      <section className="section-block">
        <div className="container-shell grid gap-8 lg:grid-cols-[1fr_1fr] lg:items-center">
          <div>
            <p className="eyebrow">Business-Internet</p>
            <h2 className="mt-2 text-3xl font-semibold text-alpine-900">Wenn Leitungen Teil Ihrer Betriebszeit sind.</h2>
            <p className="mt-4 text-alpine-700">
              Fuer Betriebe konfigurieren wir Internet nicht als Standardpaket, sondern passend zu Ausfallsicherheit,
              Standortanzahl und Lastprofil.
            </p>
            <ul className="mt-4 space-y-2 text-sm text-alpine-700">
              {internetTariffs.business.map((point) => (
                <li className="surface-card py-3" key={point}>
                  {point}
                </li>
              ))}
            </ul>
          </div>

          <div className="overflow-hidden rounded-3xl border border-alpine-200 bg-white shadow-soft">
            <Image
              alt="Serverraum TeleNetSystems"
              className="h-[340px] w-full object-cover"
              src="/assets/gallery/serverraum-7225cb6a.jpg"
              width={900}
              height={560}
            />
          </div>
        </div>
      </section>

      <ContactStrip />
    </>
  );
}