"use client";

import { useState } from "react";
import Link from "next/link";
import { Menu, X, Phone } from "lucide-react";

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

export function Header() {
    const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

    return (
        <header className="sticky top-0 z-50 bg-[var(--color-background)] border-b border-[var(--color-border)]">
            <div className="container">
                <nav className="flex items-center justify-between h-16 md:h-20">
                    {/* Logo */}
                    <Link
                        href="/"
                        className="text-xl font-semibold text-[var(--color-foreground)] hover:no-underline"
                    >
                        <span className="text-[var(--color-primary)]">Tele</span>NetSystems
                    </Link>

                    {/* Desktop Navigation */}
                    <div className="hidden lg:flex items-center gap-[var(--spacing-lg)]">
                        {navigation.map((item) => (
                            <Link
                                key={item.name}
                                href={item.href}
                                className="text-[var(--color-foreground)] hover:text-[var(--color-primary)] hover:no-underline transition-colors"
                            >
                                {item.name}
                            </Link>
                        ))}
                    </div>

                    {/* Desktop CTAs */}
                    <div className="hidden lg:flex items-center gap-[var(--spacing-md)]">
                        <a
                            href="tel:+43567612345"
                            className="flex items-center gap-[var(--spacing-xs)] text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)] hover:no-underline transition-colors"
                        >
                            <Phone size={18} />
                            <span className="text-sm">PLACEHOLDER: Telefon</span>
                        </a>
                        <Link href="/kontakt" className="btn btn-primary">
                            Jetzt beraten lassen
                        </Link>
                    </div>

                    {/* Mobile Menu Button */}
                    <button
                        type="button"
                        className="lg:hidden p-2 text-[var(--color-foreground)]"
                        onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
                        aria-label={mobileMenuOpen ? "Menü schließen" : "Menü öffnen"}
                    >
                        {mobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
                    </button>
                </nav>

                {/* Mobile Navigation */}
                {mobileMenuOpen && (
                    <div className="lg:hidden border-t border-[var(--color-border)] pb-[var(--spacing-lg)]">
                        <div className="stack-sm pt-[var(--spacing-md)]">
                            {navigation.map((item) => (
                                <Link
                                    key={item.name}
                                    href={item.href}
                                    className="block py-[var(--spacing-sm)] text-[var(--color-foreground)] hover:text-[var(--color-primary)] hover:no-underline"
                                    onClick={() => setMobileMenuOpen(false)}
                                >
                                    {item.name}
                                </Link>
                            ))}
                            <div className="pt-[var(--spacing-md)] border-t border-[var(--color-border)] mt-[var(--spacing-md)]">
                                <Link
                                    href="/kontakt"
                                    className="btn btn-primary w-full"
                                    onClick={() => setMobileMenuOpen(false)}
                                >
                                    Jetzt beraten lassen
                                </Link>
                            </div>
                        </div>
                    </div>
                )}
            </div>
        </header>
    );
}