import Link from "next/link";
import { usePathname } from "next/navigation";
import { Container } from "./Container";
import { Button } from "../ui/Button";

const navLinks = [
    { href: "/fernsehen", label: "Fernsehen" },
    { href: "/internet", label: "Internet" },
    { href: "/telefonie", label: "Telefonie" },
    { href: "/leistungen", label: "Leistungen" },
    { href: "/ueber-uns", label: "Über uns" },
];

export function Header() {
    return (
        <header className="border-b border-[color:var(--color-border)] sticky top-0 z-50 bg-[var(--color-background)]/80 backdrop-blur-md">
            <Container className="flex h-16 items-center justify-between">
                <Link href="/" className="font-heading text-xl font-bold text-[color:var(--color-primary)]">
                    TeleNetSystems
                </Link>
                <nav className="hidden md:flex gap-6">
                    {navLinks.map((link) => (
                        <Link
                            key={link.href}
                            href={link.href}
                            className="text-sm font-medium hover:text-[color:var(--color-primary)] transition-colors"
                        >
                            {link.label}
                        </Link>
                    ))}
                </nav>
                <div className="flex items-center gap-4">
                    <Link href="#kontakt" className="btn btn-primary btn-sm">
                        Jetzt beraten lassen
                    </Link>
                </div>
            </Container>
        </header>
    );
}