import type { Metadata } from "next";
import Link from "next/link";

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

export const metadata: Metadata = {
  title: "Leistungen fuer Privat und Business",
  description:
    "Uebersicht aller Leistungen von TeleNetSystems: Internet, Fernsehen, Telefonie und IT-Services fuer Privatkunden und Unternehmen in Tirol."
};

const serviceBlocks = [
  {
    title: "Internet",
    text: "Kabel- und Glasfaseranschluesse fuer Zuhause sowie SLA-basierte Loesungen fuer Unternehmen.",
    href: "/internet"
  },
  {
    title: "Fernsehen",
    text: "TV Privat, Pay TV und individuelle TV Business Konzepte fuer Hotels, Gastronomie und Betriebe.",
    href: "/fernsehen"
  },
  {
    title: "Telefonie",
    text: "Festnetzpakete, SIP-Trunks und Erweiterungen fuer Teams mit mehreren Nebenstellen.",
    href: "/telefonie"
  },
  {
    title: "IT-Service",
    text: "Planung, Inbetriebnahme und Wartung von Netzwerken sowie laufender technischer Support.",
    href: "/#kontakt"
  }
];

export default function LeistungenPage() {
  return (
    <>
      <PageHero
        eyebrow="Leistungen"
        title="Alles aus einer Hand, ohne unnoetige Komplexitaet"
        intro="TeleNetSystems kombiniert Telekommunikation mit praktischem IT-Service. Das reduziert Abstimmungsaufwand und sorgt dafuer, dass Technik zusammen funktioniert."
        imageSrc="/assets/gallery/firma1-8a863d8b.jpg"
        imageAlt="Standort TeleNetSystems in Tirol"
        primaryCta={{ label: "Jetzt Bedarf klaeren", href: "/#kontakt" }}
        secondaryCta={{ label: "Ueber uns", href: "/ueber-uns" }}
      />

      <section className="section-block pt-6">
        <div className="container-shell grid gap-5 md:grid-cols-2">
          {serviceBlocks.map((service) => (
            <article className="surface-card" key={service.title}>
              <h2 className="text-2xl font-semibold text-alpine-900">{service.title}</h2>
              <p className="mt-3 text-alpine-700">{service.text}</p>
              <Link className="mt-4 inline-flex text-sm font-semibold text-copper-700 hover:text-copper-800" href={service.href}>
                Mehr dazu -&gt;
              </Link>
            </article>
          ))}
        </div>
      </section>

      <section className="section-block bg-white/70">
        <div className="container-shell grid gap-6 lg:grid-cols-2">
          <article className="surface-card border-moss-500/20 bg-gradient-to-br from-white via-white to-moss-500/5">
            <p className="eyebrow text-moss-600">Privatkunden</p>
            <h2 className="mt-2 text-2xl font-semibold text-alpine-900">Uebersichtlich und alltagstauglich</h2>
            <ul className="mt-4 space-y-2 text-sm text-alpine-700">
              <li>- Klare Pakete mit offenen Kosten</li>
              <li>- Schnelle Hilfe bei Stoerungen</li>
              <li>- Beratung ohne Fachjargon</li>
            </ul>
          </article>

          <article className="surface-card border-copper-300/40 bg-gradient-to-br from-white via-white to-copper-100/40">
            <p className="eyebrow">Geschaeftskunden</p>
            <h2 className="mt-2 text-2xl font-semibold text-alpine-900">Planbar und skalierbar</h2>
            <ul className="mt-4 space-y-2 text-sm text-alpine-700">
              <li>- Individuelle Netz- und Kommunikationskonzepte</li>
              <li>- SLA-orientierter Support</li>
              <li>- Direkte Ansprechpartner fuer Technik und Projekte</li>
            </ul>
          </article>
        </div>
      </section>

      <section className="section-block">
        <div className="container-shell">
          <p className="eyebrow">Zusammenarbeit</p>
          <h2 className="mt-2 text-3xl font-semibold text-alpine-900">Wie wir Projekte in Tirol umsetzen</h2>
          <div className="mt-7 grid gap-5 md:grid-cols-3">
            <article className="surface-card">
              <h3 className="text-xl font-semibold text-alpine-900">1. Analyse</h3>
              <p className="mt-3 text-sm text-alpine-700">Wir nehmen Ist-Situation, Anforderungen und Budget sauber auf.</p>
            </article>
            <article className="surface-card">
              <h3 className="text-xl font-semibold text-alpine-900">2. Umsetzung</h3>
              <p className="mt-3 text-sm text-alpine-700">Installation und Inbetriebnahme erfolgen abgestimmt auf Ihren Betrieb.</p>
            </article>
            <article className="surface-card">
              <h3 className="text-xl font-semibold text-alpine-900">3. Betrieb</h3>
              <p className="mt-3 text-sm text-alpine-700">Wir bleiben als Servicepartner erreichbar, auch nach dem Go-live.</p>
            </article>
          </div>
        </div>
      </section>

      <ContactStrip />
    </>
  );
}