import { Metadata } from "next";
import Link from "next/link";
import { Section } from "@/components/layout/Section";
import { Container } from "@/components/layout/Container";
import { MapPin, Clock, Users, Heart, Shield, ArrowRight } from "lucide-react";

export const metadata: Metadata = {
    title: "Über uns",
    description:
        "Lernen Sie TeleNetSystems kennen – Ihr regionaler Telekom- und IT-Partner in Tirol seit 1976.",
};

const values = [
    {
        icon: Heart,
        title: "Persönlich",
        description: "Wir sind kein anonymer Konzern. Bei uns bekommen Sie echte Ansprechpartner.",
    },
    {
        icon: MapPin,
        title: "Regional",
        description: "In Reutte verwurzelt, für die Region da. Wir kennen Land und Leute.",
    },
    {
        icon: Shield,
        title: "Zuverlässig",
        description: "Stabile Technik, bewährte Lösungen, transparente Kommunikation.",
    },
    {
        icon: Clock,
        title: "Schnell",
        description: "Bei Problemen sind wir schnell zur Stelle – ohne lange Warteschleifen.",
    },
];

const milestones = [
    { year: "1976", text: "Gründung als regionaler Telekom-Anbieter" },
    { year: "1990er", text: "Ausbau des Kabelnetzes in Reutte und Umgebung" },
    { year: "2000er", text: "Einführung von Highspeed-Internet" },
    { year: "2010er", text: "Erweiterung um IT-Dienstleistungen" },
    { year: "Heute", text: "Ihr verlässlicher Partner für Telekom & IT" },
];

export default function UeberUnsPage() {
    return (
        <main>
            {/* Hero Section */}
            <Section variant="hero" className="bg-[var(--color-muted)]">
                <Container>
                    <div className="max-w-3xl">
                        <h1 className="mb-[var(--spacing-lg)]">
                            Wir sind
                            <span className="text-[var(--color-primary)]"> TeleNetSystems</span>
                        </h1>
                        <p className="lead mb-[var(--spacing-2xl)]">
                            Ihr regionaler Telekom- und IT-Partner in Tirol.
                            Seit 1976 verbinden wir Menschen – mit zuverlässiger Technik, ehrlicher Beratung und persönlichem Service.
                        </p>
                    </div>
                </Container>
            </Section>

            {/* Story Section */}
            <Section>
                <Container>
                    <div className="grid lg:grid-cols-2 gap-[var(--spacing-3xl)] items-center">
                        <div>
                            <span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
                                Unsere Geschichte
                            </span>
                            <h2 className="mt-[var(--spacing-sm)] mb-[var(--spacing-lg)]">
                                Fast 50 Jahre Erfahrung
                            </h2>
                            <p className="text-muted mb-[var(--spacing-lg)]">
                                1976 gegründet, sind wir heute einer der führenden regionalen Anbieter für
                                Telekommunikation und IT-Services in Tirol. Was als kleines Unternehmen begann,
                                ist heute ein verlässlicher Partner für Tausende von Privat- und Geschäftskunden.
                            </p>
                            <p className="text-muted mb-[var(--spacing-lg)]">
                                Trotz des Wachstums sind wir unseren Werten treu geblieben:
                                persönlicher Service, regionale Nähe und ehrliche Beratung.
                                Wir kennen unsere Kunden – viele seit Jahrzehnten.
                            </p>
                        </div>
                        <div className="stack-md">
                            {milestones.map((milestone) => (
                                <div key={milestone.year} className="flex items-start gap-[var(--spacing-md)]">
                                    <span className="text-[var(--color-primary)] font-bold text-lg min-w-[80px]">
                                        {milestone.year}
                                    </span>
                                    <span className="text-muted pt-0.5">{milestone.text}</span>
                                </div>
                            ))}
                        </div>
                    </div>
                </Container>
            </Section>

            {/* Values Section */}
            <Section className="bg-[var(--color-muted)]">
                <Container>
                    <div className="text-center mb-[var(--spacing-3xl)]">
                        <span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
                            Wofür wir stehen
                        </span>
                        <h2 className="mt-[var(--spacing-sm)]">Unsere Werte</h2>
                    </div>
                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-[var(--spacing-xl)]">
                        {values.map((value) => (
                            <div key={value.title} className="text-center">
                                <div className="w-14 h-14 rounded-full bg-[var(--color-primary)] flex items-center justify-center mx-auto mb-[var(--spacing-md)]">
                                    <value.icon size={24} className="text-[var(--color-background)]" />
                                </div>
                                <h3 className="heading-5 mb-[var(--spacing-sm)]">{value.title}</h3>
                                <p className="text-sm text-muted">{value.description}</p>
                            </div>
                        ))}
                    </div>
                </Container>
            </Section>

            {/* Team Section */}
            <Section>
                <Container variant="narrow">
                    <div className="text-center">
                        <span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
                            Unser Team
                        </span>
                        <h2 className="mt-[var(--spacing-sm)] mb-[var(--spacing-lg)]">
                            Menschen, die für Sie da sind
                        </h2>
                        <p className="text-muted mb-[var(--spacing-xl)]">
                            Hinter TeleNetSystems steht ein engagiertes Team aus Technikern, Beratern und
                            Service-Mitarbeitern. Wir kennen die Region, wir kennen die Technik – und wir
                            sind für Sie da, wenn Sie uns brauchen.
                        </p>
                        <div className="flex items-center justify-center gap-[var(--spacing-sm)]">
                            <Users size={20} className="text-[var(--color-primary)]" />
                            <span className="font-medium">PLACEHOLDER: Anzahl Mitarbeiter</span>
                        </div>
                    </div>
                </Container>
            </Section>

            {/* Region Section */}
            <Section className="bg-[var(--color-muted)]">
                <Container>
                    <div className="grid lg:grid-cols-2 gap-[var(--spacing-3xl)] items-center">
                        <div className="lg:order-2">
                            <span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
                                Unser Standort
                            </span>
                            <h2 className="mt-[var(--spacing-sm)] mb-[var(--spacing-lg)]">
                                Verwurzelt in Reutte
                            </h2>
                            <p className="text-muted mb-[var(--spacing-lg)]">
                                Unser Hauptsitz ist in Reutte – mitten im Herzen des Außerferns.
                                Von hier aus betreuen wir Kunden in der gesamten Region.
                            </p>
                            <p className="text-muted mb-[var(--spacing-lg)]">
                                Der Vorteil für Sie: Kurze Wege, schnelle Reaktionszeiten und
                                persönliche Betreuung vor Ort. Bei uns sind Sie keine Nummer –
                                sondern ein geschätzter Kunde.
                            </p>
                            <div className="flex items-start gap-[var(--spacing-sm)]">
                                <MapPin size={20} className="text-[var(--color-primary)] shrink-0 mt-0.5" />
                                <span className="text-muted">
                                    PLACEHOLDER: Adresse<br />
                                    6600 Reutte, Tirol
                                </span>
                            </div>
                        </div>
                        <div className="lg:order-1 bg-[var(--color-background)] rounded-[var(--radius-lg)] aspect-video flex items-center justify-center border border-[var(--color-border)]">
                            <p className="text-muted">PLACEHOLDER: Karte oder Bild</p>
                        </div>
                    </div>
                </Container>
            </Section>

            {/* CTA Section */}
            <Section className="bg-[var(--color-primary)]">
                <Container>
                    <div className="text-center text-[var(--color-background)]">
                        <h2 className="mb-[var(--spacing-md)] text-[var(--color-background)]">
                            Lernen Sie uns kennen
                        </h2>
                        <p className="text-lg opacity-90 mb-[var(--spacing-xl)] max-w-2xl mx-auto">
                            Besuchen Sie uns vor Ort oder kontaktieren Sie uns –
                            wir freuen uns auf Sie.
                        </p>
                        <Link
                            href="/kontakt"
                            className="btn bg-[var(--color-background)] text-[var(--color-primary)] hover:opacity-90"
                        >
                            Kontakt aufnehmen
                            <ArrowRight size={18} />
                        </Link>
                    </div>
                </Container>
            </Section>
        </main>
    );
}