import Link from "next/link";
import { Container } from "@/components/layout/Container";
import { Section } from "@/components/layout/Section";

export const metadata = {
    title: "Über uns | TeleNetSystems",
    description: "TeleNetSystems GmbH - Ihr regionaler Telekommunikationsanbieter in Reutte seit 1976.",
};

export default function UeberUnsPage() {
    return (
        <main>
            <Section variant="hero" className="bg-[var(--color-muted)] text-center">
                <Container>
                    <h1 className="mb-[var(--spacing-md)]">
                        Regional. Persönlich. <span className="text-[color:var(--color-primary)]">Verlässlich.</span>
                    </h1>
                    <p className="lead max-w-2xl mx-auto">
                        Seit 1976 verbinden wir Menschen in der Region Reutte.
                    </p>
                </Container>
            </Section>

            <Section>
                <Container>
                    <div className="grid md:grid-cols-2 gap-[var(--spacing-2xl)] items-center mb-[var(--spacing-2xl)]">
                        <div className="order-2 md:order-1">
                            <div className="aspect-square bg-[var(--color-muted)] rounded-[var(--radius-lg)] flex items-center justify-center text-[color:var(--color-muted-foreground)]">
                                PLACEHOLDER: Historic Image / Company Building
                            </div>
                        </div>
                        <div className="order-1 md:order-2">
                            <h2 className="mb-[var(--spacing-md)]">Unsere Geschichte</h2>
                            <p className="mb-[var(--spacing-md)]">
                                Die Telenet Systems GmbH blickt auf eine lange Tradition zurück. Gegründet 1976, haben wir uns von einem lokalen Anbieter für
                                Antennen- und Kabelfernsehen zu einem modernen Full-Service-Provider entwickelt.
                            </p>
                            <p className="mb-[var(--spacing-md)]">
                                In einer Zeit, in der Technologie immer komplexer wurde, war unser Ziel immer einfach: Technik verständlich und nutzbar zu machen.
                                Heute versorgen wir Haushalte und Unternehmen im gesamten Bezirk Reutte mit Highspeed-Internet, digitalem Fernsehen und
                                Telefonie.
                            </p>
                        </div>
                    </div>

                    <div className="grid md:grid-cols-2 gap-[var(--spacing-2xl)] items-center">
                        <div>
                            <h2 className="mb-[var(--spacing-md)]">Unsere Philosophie</h2>
                            <p className="mb-[var(--spacing-md)]">
                                Wir sind kein anonymer Konzern mit Call-Center im Ausland. Wir sind Ihre Nachbarn.
                                Unsere Mitarbeiter leben in der Region und kennen die Anforderungen vor Ort.
                            </p>
                            <ul className="space-y-[var(--spacing-sm)]">
                                <li className="flex items-center gap-[var(--spacing-sm)]">✅ Echte Ansprechpartner</li>
                                <li className="flex items-center gap-[var(--spacing-sm)]">✅ Schnelle Reaktionszeiten</li>
                                <li className="flex items-center gap-[var(--spacing-sm)]">✅ Handschlagqualität</li>
                            </ul>
                        </div>
                        <div>
                            <div className="aspect-video bg-[var(--color-muted)] rounded-[var(--radius-lg)] flex items-center justify-center text-[color:var(--color-muted-foreground)]">
                                PLACEHOLDER: Team Image
                            </div>
                        </div>
                    </div>
                </Container>
            </Section>

            {/* Contact Anchor */}
            <Section id="kontakt" className="bg-[var(--color-primary)] text-white text-center">
                <Container>
                    <h2 className="text-white mb-[var(--spacing-md)]">Werden Sie Teil unseres Netzes</h2>
                    <div className="flex flex-col sm:flex-row justify-center gap-[var(--spacing-md)]">
                        <a href="tel:PLACEHOLDER" className="btn btn-ghost bg-white text-[color:var(--color-primary)] hover:bg-[var(--color-muted)]">
                            📞 Kontakt aufnehmen
                        </a>
                    </div>
                </Container>
            </Section>
        </main>
    );
}