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

import { ContactStrip } from "@/components/contact-strip";
import { PageHero } from "@/components/page-hero";
import { company, faqItems, serviceHighlights, testimonials } from "@/lib/site-content";

export const metadata: Metadata = {
  title: "Regionaler Telekom- und IT-Service in Reutte",
  description:
    "TeleNetSystems praesentiert Internet, Fernsehen und Telefonie fuer Privat- und Geschaeftskunden in Tirol. Mit klaren Tarifen und direktem Support aus Reutte."
};

const localBusinessSchema = {
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  name: company.name,
  areaServed: "Tirol",
  address: {
    "@type": "PostalAddress",
    streetAddress: "Untermarkt 12",
    postalCode: "6600",
    addressLocality: "Reutte",
    addressCountry: "AT"
  },
  telephone: company.phone,
  email: company.email,
  openingHours: ["Mo-Fr 08:00-17:30"],
  sameAs: []
};

export default function HomePage() {
  return (
    <>
      <PageHero
        eyebrow="TeleNetSystems Reutte"
        title="Technik, die laeuft. Support, der erreichbar bleibt."
        intro="TeleNetSystems verbindet in Tirol private Haushalte und Betriebe mit stabilem Internet, Fernsehen und Telefonie. Sie bekommen transparente Angebote und ein Team aus der Region, das sich kuemmert."
        imageSrc="/assets/hero/internet-header-431619ac.jpg"
        imageAlt="Netzwerktechnik von TeleNetSystems"
        primaryCta={{ label: "Beratung starten", href: "#kontakt" }}
        secondaryCta={{ label: "Leistungen ansehen", href: "/leistungen" }}
      />

      <section className="section-block pt-6">
        <div className="container-shell">
          <div className="mb-8 flex flex-wrap items-end justify-between gap-4">
            <div>
              <p className="eyebrow">Leistungsuebersicht</p>
              <h2 className="mt-2 text-3xl font-semibold text-alpine-900">Drei Bereiche, klar getrennt aufgebaut.</h2>
            </div>
            <p className="max-w-xl text-alpine-700">
              Erst Internet, dann Fernsehen, danach Telefonie: Die Reihenfolge folgt den haeufigsten Fragen in der
              Beratung und macht die Entscheidung schneller.
            </p>
          </div>

          <div className="grid gap-5 md:grid-cols-3">
            {serviceHighlights.map((item) => (
              <article className="surface-card flex h-full flex-col" key={item.title}>
                <h3 className="text-xl font-semibold text-alpine-900">{item.title}</h3>
                <p className="mt-3 flex-1 text-alpine-700">{item.text}</p>
                <Link className="mt-5 inline-flex items-center text-sm font-semibold text-copper-700 hover:text-copper-800" href={item.href}>
                  Details ansehen -&gt;
                </Link>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section className="section-block">
        <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">Wenn Technik einfach funktionieren soll.</h2>
            <ul className="mt-4 space-y-2 text-alpine-700">
              <li>Klare Monatspreise ohne Tarifdschungel</li>
              <li>TV-, Internet- und Telefoniepakete fuer den Alltag</li>
              <li>Schnelle Hilfe bei Stoerungen, ohne Umwege</li>
            </ul>
          </article>

          <article className="surface-card border-copper-300/40 bg-gradient-to-br from-white via-white to-copper-100/30">
            <p className="eyebrow">Geschaeftskunden</p>
            <h2 className="mt-2 text-2xl font-semibold text-alpine-900">Wenn Ausfaelle sofort Geld kosten.</h2>
            <ul className="mt-4 space-y-2 text-alpine-700">
              <li>Skalierbare Business-Leitungen mit SLA</li>
              <li>Standortvernetzung und SIP-Telefonie aus einer Hand</li>
              <li>Direkter Kontakt zu Technik und Projektleitung</li>
            </ul>
          </article>
        </div>
      </section>

      <section className="section-block bg-white/65">
        <div className="container-shell">
          <p className="eyebrow">Stimmen aus Tirol</p>
          <h2 className="mt-2 text-3xl font-semibold text-alpine-900">Vertrauen entsteht im Tagesgeschaeft.</h2>
          <div className="mt-8 grid gap-5 md:grid-cols-3">
            {testimonials.map((item) => (
              <blockquote className="surface-card" key={item.author}>
                <p className="text-alpine-700">{item.quote}</p>
                <footer className="mt-4 text-sm text-alpine-600">
                  <span className="font-semibold text-alpine-800">{item.author}</span> | {item.context}
                </footer>
              </blockquote>
            ))}
          </div>
        </div>
      </section>

      <section className="section-block">
        <div className="container-shell grid gap-8 lg:grid-cols-[0.9fr_1.1fr] lg:items-start">
          <div>
            <p className="eyebrow">Hauefige Fragen</p>
            <h2 className="mt-2 text-3xl font-semibold text-alpine-900">Was vor einem Wechsel oft unklar ist.</h2>
            <p className="mt-4 text-alpine-700">
              Diese Fragen kommen in der Erstberatung am haeufigsten. Wenn Ihr Punkt nicht dabei ist, klaeren wir ihn
              telefonisch in wenigen Minuten.
            </p>
          </div>
          <div className="space-y-3">
            {faqItems.map((item) => (
              <details className="surface-card p-0" key={item.question}>
                <summary className="cursor-pointer list-none px-5 py-4 font-semibold text-alpine-900">{item.question}</summary>
                <p className="border-t border-alpine-100 px-5 py-4 text-sm text-alpine-700">{item.answer}</p>
              </details>
            ))}
          </div>
        </div>
      </section>

      <ContactStrip />

      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(localBusinessSchema) }}
      />
    </>
  );
}