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

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

export const metadata: Metadata = {
  title: "Fernsehen fuer Privat und Business",
  description:
    "TV Privat, Pay TV und TV Business in Tirol: klar verglichen, einfach erklaert und mit persoenlicher Beratung in Reutte."
};

export default function FernsehenPage() {
  return (
    <>
      <PageHero
        eyebrow="Fernsehen"
        title="TV-Pakete, die zu Ihrem Alltag passen"
        intro="Privatpakete und Pay-TV sind direkt vergleichbar. TV Business planen wir separat, weil Anforderungen in Hotels, Gastro oder Unternehmen deutlich anders sind."
        imageSrc="/assets/hero/tv-header-44c1e07b.jpg"
        imageAlt="Fernsehangebot von TeleNetSystems"
        primaryCta={{ label: "TV-Beratung anfragen", href: "/#kontakt" }}
        secondaryCta={{ label: "Internet-Tarife", href: "/internet" }}
      />

      <section className="section-block pt-6 bg-white/70">
        <div className="container-shell space-y-10">
          <div>
            <p className="eyebrow">Vergleich | TV Privat</p>
            <div className="mt-4 table-shell">
              <table className="data-table">
                <thead>
                  <tr>
                    <th>Paket</th>
                    <th>Sender</th>
                    <th>Extras</th>
                    <th>Passend fuer</th>
                    <th>Preis</th>
                  </tr>
                </thead>
                <tbody>
                  {tvTariffs.private.map((tariff) => (
                    <tr key={tariff.name}>
                      <td>{tariff.name}</td>
                      <td>{tariff.channels}</td>
                      <td>{tariff.extras}</td>
                      <td>{tariff.target}</td>
                      <td>{tariff.price}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>

          <div>
            <p className="eyebrow">Vergleich | Pay TV</p>
            <div className="mt-4 table-shell">
              <table className="data-table">
                <thead>
                  <tr>
                    <th>Paket</th>
                    <th>Sender</th>
                    <th>Extras</th>
                    <th>Passend fuer</th>
                    <th>Preis</th>
                  </tr>
                </thead>
                <tbody>
                  {tvTariffs.payTv.map((tariff) => (
                    <tr key={tariff.name}>
                      <td>{tariff.name}</td>
                      <td>{tariff.channels}</td>
                      <td>{tariff.extras}</td>
                      <td>{tariff.target}</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 className="surface-card">
            <p className="eyebrow">TV Business</p>
            <h2 className="mt-2 text-3xl font-semibold text-alpine-900">Individuell statt One-Size-Fits-All.</h2>
            <p className="mt-4 text-alpine-700">
              Unternehmen brauchen meist mehr als ein Standardpaket. Darum planen wir TV Business immer als eigene
              Loesung mit technischer Abstimmung vor Ort.
            </p>
            <ul className="mt-5 space-y-2 text-sm text-alpine-700">
              {tvTariffs.business.map((point) => (
                <li key={point}>- {point}</li>
              ))}
            </ul>
          </div>

          <figure className="overflow-hidden rounded-3xl border border-alpine-200 bg-white shadow-soft">
            <Image
              alt="TV fuer Unternehmen"
              className="h-[340px] w-full object-cover"
              src="/assets/gallery/tv-business-c3bdfb94-23310090.jpg"
              width={900}
              height={560}
            />
          </figure>
        </div>
      </section>

      <section className="section-block bg-white/65">
        <div className="container-shell grid gap-6 md:grid-cols-3">
          <article className="surface-card">
            <h3 className="text-xl font-semibold text-alpine-900">1. Bedarf klaeren</h3>
            <p className="mt-3 text-sm text-alpine-700">Wie viele Geraete, welche Inhalte, welche Standorte?</p>
          </article>
          <article className="surface-card">
            <h3 className="text-xl font-semibold text-alpine-900">2. Technik abstimmen</h3>
            <p className="mt-3 text-sm text-alpine-700">Installation, Receiver, Netzstruktur und Laufzeit transparent festlegen.</p>
          </article>
          <article className="surface-card">
            <h3 className="text-xl font-semibold text-alpine-900">3. Betrieb sichern</h3>
            <p className="mt-3 text-sm text-alpine-700">Support aus Tirol, damit Ausfaelle in Stoerungszeiten kurz bleiben.</p>
          </article>
        </div>
      </section>

      <ContactStrip />
    </>
  );
}