import Link from "next/link";
import { Container } from "./Container";

export function Footer() {
    const currentYear = new Date().getFullYear();

    return (
        <footer className="bg-[var(--color-muted)] border-t border-[color:var(--color-border)] py-[var(--spacing-xl)] mt-auto">
            <Container>
                <div className="grid grid-cols-1 md:grid-cols-4 gap-[var(--spacing-xl)] mb-[var(--spacing-xl)]">
                    <div className="md:col-span-1">
                        <Link href="/" className="font-heading text-lg font-bold text-[color:var(--color-primary)] mb-[var(--spacing-sm)] block">
                            TeleNetSystems
                        </Link>
                        <p className="text-sm text-[color:var(--color-muted-foreground)]">
                            Ihr regionaler Partner für Internet, TV und Telefonie in Reutte & Umgebung.
                        </p>
                    </div>

                    <div>
                        <h4 className="font-bold mb-[var(--spacing-md)]">Produkte</h4>
                        <ul className="space-y-[var(--spacing-xs)] text-sm">
                            <li><Link href="/fernsehen" className="hover:text-[color:var(--color-primary)]">Fernsehen</Link></li>
                            <li><Link href="/internet" className="hover:text-[color:var(--color-primary)]">Internet</Link></li>
                            <li><Link href="/telefonie" className="hover:text-[color:var(--color-primary)]">Telefonie</Link></li>
                        </ul>
                    </div>

                    <div>
                        <h4 className="font-bold mb-[var(--spacing-md)]">Unternehmen</h4>
                        <ul className="space-y-[var(--spacing-xs)] text-sm">
                            <li><Link href="/ueber-uns" className="hover:text-[color:var(--color-primary)]">Über uns</Link></li>
                            <li><Link href="/leistungen" className="hover:text-[color:var(--color-primary)]">Leistungen</Link></li>
                            <li><Link href="#kontakt" className="hover:text-[color:var(--color-primary)]">Kontakt</Link></li>
                        </ul>
                    </div>

                    <div>
                        <h4 className="font-bold mb-[var(--spacing-md)]">Rechtliches</h4>
                        <ul className="space-y-[var(--spacing-xs)] text-sm">
                            <li><Link href="/impressum" className="hover:text-[color:var(--color-primary)]">Impressum</Link></li>
                            <li><Link href="/datenschutz" className="hover:text-[color:var(--color-primary)]">Datenschutz</Link></li>
                        </ul>
                    </div>
                </div>

                <div className="border-t border-[color:var(--color-border)] pt-[var(--spacing-md)] text-center text-sm text-[color:var(--color-muted-foreground)]">
                    &copy; {currentYear} TeleNetSystems GmbH. Alle Rechte vorbehalten.
                </div>
            </Container>
        </footer>
    );
}