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

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

export const metadata: Metadata = {
  title: "Ueber TeleNetSystems",
  description:
    "TeleNetSystems aus Reutte: Team, Werte und Arbeitsweise fuer regionale Telekommunikations- und IT-Dienstleistungen in Tirol."
};

const values = [
  {
    title: "Verlaesslichkeit",
    text: "Wir versprechen nur Leistungen, die wir technisch und organisatorisch halten koennen."
  },
  {
    title: "Nahbarkeit",
    text: "Sie sprechen mit Menschen aus der Region, nicht mit anonymen Weiterleitungen."
  },
  {
    title: "Klarheit",
    text: "Angebote und Entscheidungen bleiben nachvollziehbar, auch wenn die Technik komplex ist."
  }
];

export default function UeberUnsPage() {
  return (
    <>
      <PageHero
        eyebrow="Ueber uns"
        title="TeleNetSystems ist in Reutte zuhause"
        intro="Wir arbeiten fuer Menschen und Betriebe in Tirol, die eine stabile technische Basis und eine erreichbare Betreuung brauchen. Genau darauf ist unser Team ausgerichtet."
        imageSrc="/assets/gallery/firmenkunden-96736712-5fa99704.jpg"
        imageAlt="Teamarbeit bei TeleNetSystems"
        primaryCta={{ label: "Kontakt aufnehmen", href: "/#kontakt" }}
        secondaryCta={{ label: "Leistungen", href: "/leistungen" }}
      />

      <section className="section-block pt-6">
        <div className="container-shell grid gap-8 lg:grid-cols-[1fr_1fr]">
          <article className="surface-card">
            <p className="eyebrow">Unsere Geschichte</p>
            <h2 className="mt-2 text-3xl font-semibold text-alpine-900">Vom regionalen Anbieter zum festen IT-Partner</h2>
            <p className="mt-4 text-alpine-700">
              TeleNetSystems ist als regionales Telekom-Team gestartet und hat das Angebot schrittweise um
              IT-Dienstleistungen erweitert. Heute betreuen wir private Haushalte, Handwerksbetriebe, Hotels und
              mittelstaendische Unternehmen in ganz Tirol.
            </p>
          </article>

          <article className="surface-card bg-alpine-900 text-alpine-50">
            <p className="eyebrow text-copper-300">Regional verankert</p>
            <h2 className="mt-2 text-3xl font-semibold text-white">Reutte als Basis, Tirol als Einsatzgebiet</h2>
            <ul className="mt-4 space-y-2 text-sm text-alpine-100">
              <li>- Kurze Wege zu Kundenterminen</li>
              <li>- Schnelle Abstimmung zwischen Beratung und Technik</li>
              <li>- Langfristige Kundenbeziehungen statt kurzfristiger Abschluesse</li>
            </ul>
          </article>
        </div>
      </section>

      <section className="section-block bg-white/70">
        <div className="container-shell">
          <p className="eyebrow">Werte</p>
          <h2 className="mt-2 text-3xl font-semibold text-alpine-900">So arbeiten wir im Alltag</h2>
          <div className="mt-7 grid gap-5 md:grid-cols-3">
            {values.map((value) => (
              <article className="surface-card" key={value.title}>
                <h3 className="text-xl font-semibold text-alpine-900">{value.title}</h3>
                <p className="mt-3 text-sm text-alpine-700">{value.text}</p>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section className="section-block">
        <div className="container-shell">
          <p className="eyebrow">Team</p>
          <h2 className="mt-2 text-3xl font-semibold text-alpine-900">Ihre Ansprechpartner bei TeleNetSystems</h2>
          <div className="mt-7 grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
            {teamMembers.map((member) => (
              <article className="overflow-hidden rounded-2xl border border-alpine-200 bg-white shadow-card" key={member.name}>
                <Image
                  alt={`${member.name} von TeleNetSystems`}
                  className="h-56 w-full object-cover"
                  src={member.image}
                  width={420}
                  height={420}
                />
                <div className="p-4">
                  <h3 className="font-semibold text-alpine-900">{member.name}</h3>
                  <p className="mt-1 text-sm text-alpine-700">{member.role}</p>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      <ContactStrip />
    </>
  );
}