import type { Metadata } from "next";
import { Heart, Target, Users, Zap } from "lucide-react";
import PageHero from "@/components/sections/PageHero";
import TeamGrid from "@/components/sections/TeamGrid";
import ContactSection from "@/components/sections/ContactSection";
import Container from "@/components/ui/Container";
import SectionHeading from "@/components/ui/SectionHeading";

export const metadata: Metadata = {
  title: "Über uns",
  description:
    "Lernen Sie das Team hinter TeleNetSystems kennen. Regional verwurzelt in Reutte, Tirol. Persönlicher Service seit über 20 Jahren.",
};

const companyValues = [
  {
    icon: Heart,
    title: "Ehrliche Beratung",
    description: "Wir empfehlen, was sinnvoll ist — nicht, was die höchste Marge bringt.",
  },
  {
    icon: Target,
    title: "Klare Kommunikation",
    description: "Was wir versprechen, halten wir. Ohne Sternchen im Kleingedruckten.",
  },
  {
    icon: Users,
    title: "Regionale Verantwortung",
    description: "Wir leben und arbeiten hier. Was wir tun, hat direkten Einfluss auf unsere Nachbarn.",
  },
  {
    icon: Zap,
    title: "Schnelles Handeln",
    description: "Wenn es brennt, sind wir da. Nicht morgen, sondern heute.",
  },
];

export default function UeberUnsPage() {
  return (
    <>
      <PageHero
        title="Wir sind TeleNetSystems"
        description="Ein Team aus Reutte, das Technik versteht und Menschen ernst nimmt."
        backgroundImage="/images/team/team-telenet.jpg"
      />

      {/* Company Story */}
      <section className="py-20 lg:py-24" aria-labelledby="story-heading">
        <Container>
          <div className="grid grid-cols-1 items-center gap-12 lg:grid-cols-2">
            <div>
              <h2 id="story-heading" className="text-title font-bold text-neutral-900">
                Aus der Region, für die Region
              </h2>
              <div className="mt-6 space-y-4 text-neutral-600 leading-relaxed">
                <p>
                  TeleNetSystems gibt es nicht erst seit gestern. Seit über zwei Jahrzehnten
                  versorgen wir Reutte und das Außerfern mit Internet, Fernsehen und Telefonie.
                  Angefangen hat alles mit ein paar Kabelanschlüssen. Heute betreuen wir
                  über tausend Kunden — privat und gewerblich.
                </p>
                <p>
                  Was sich nicht geändert hat: Wir sitzen hier. In Reutte, nicht in Wien oder
                  München. Wenn Sie anrufen, heben wir ab. Wenn etwas nicht funktioniert,
                  kommen wir vorbei. Das klingt selbstverständlich, ist es aber bei den
                  Großen der Branche längst nicht mehr.
                </p>
                <p>
                  Uns geht es nicht darum, die meisten Kunden zu haben. Es geht darum,
                  die Kunden, die wir haben, gut zu betreuen. Daran messen wir uns selbst.
                </p>
              </div>
            </div>
            <div className="overflow-hidden rounded-card">
              <img
                src="/images/gallery/firma1.jpg"
                alt="TeleNetSystems Firmengebäude in Reutte"
                className="w-full object-cover"
                loading="lazy"
                width={600}
                height={400}
              />
            </div>
          </div>
        </Container>
      </section>

      {/* Values */}
      <section className="bg-neutral-50 py-20 lg:py-24" aria-labelledby="values-heading">
        <Container>
          <SectionHeading
            title="Wofür wir stehen"
            subtitle="Vier Grundsätze, an denen wir uns im Alltag messen."
          />
          <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4" id="values-heading">
            {companyValues.map((value) => {
              const Icon = value.icon;
              return (
                <div key={value.title} className="rounded-card bg-white p-6 shadow-sm border border-neutral-200">
                  <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-primary-100">
                    <Icon className="h-6 w-6 text-primary-700" aria-hidden="true" />
                  </div>
                  <h3 className="mt-4 text-base font-semibold text-neutral-900">{value.title}</h3>
                  <p className="mt-2 text-sm leading-relaxed text-neutral-600">{value.description}</p>
                </div>
              );
            })}
          </div>
        </Container>
      </section>

      <TeamGrid />

      <ContactSection />
    </>
  );
}