"use client";

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

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

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 py-[var(--spacing-md)]">
          {/* Logo */}
          <Link href="/" className="flex-shrink-0">
            <Image
              src="/images/brand/logo-systems-9fd0db14.png"
              alt="Telenet Systems GmbH"
              width={180}
              height={57}
              priority
              className="h-10 w-auto md:h-12"
            />
          </Link>

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

          {/* CTA & Phone (Desktop) */}
          <div className="hidden lg:flex lg:items-center lg:gap-[var(--spacing-md)]">
            <a
              href="tel:+4356725000"
              className="flex items-center gap-[var(--spacing-xs)] text-sm font-medium text-[var(--color-muted-foreground)] hover:text-[var(--color-primary)] transition-colors"
              aria-label="Anrufen: +43 5672 5000"
            >
              <Phone className="h-4 w-4" aria-hidden="true" />
              <span>+43 5672 5000</span>
            </a>
            <Link href="/kontakt" className="btn btn-primary">
              Jetzt beraten lassen
            </Link>
          </div>

          {/* Mobile Menu Button */}
          <button
            type="button"
            className="lg:hidden p-[var(--spacing-sm)] -mr-[var(--spacing-sm)] text-[var(--color-foreground)]"
            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
            aria-expanded={mobileMenuOpen}
            aria-label={mobileMenuOpen ? "Menü schließen" : "Menü öffnen"}
          >
            {mobileMenuOpen ? (
              <X className="h-6 w-6" aria-hidden="true" />
            ) : (
              <Menu className="h-6 w-6" aria-hidden="true" />
            )}
          </button>
        </nav>

        {/* Mobile Navigation */}
        {mobileMenuOpen && (
          <div className="lg:hidden border-t border-[var(--color-border)] py-[var(--spacing-md)]">
            <div className="flex flex-col gap-[var(--spacing-sm)]">
              {navigation.map((item) => (
                <Link
                  key={item.name}
                  href={item.href}
                  className="py-[var(--spacing-sm)] text-base font-medium text-[var(--color-foreground)] hover:text-[var(--color-primary)] transition-colors"
                  onClick={() => setMobileMenuOpen(false)}
                >
                  {item.name}
                </Link>
              ))}
              <hr className="border-[var(--color-border)] my-[var(--spacing-sm)]" />
              <a
                href="tel:+4356725000"
                className="flex items-center gap-[var(--spacing-sm)] py-[var(--spacing-sm)] text-base font-medium text-[var(--color-muted-foreground)]"
              >
                <Phone className="h-5 w-5" aria-hidden="true" />
                <span>+43 5672 5000</span>
              </a>
              <Link
                href="/kontakt"
                className="btn btn-primary mt-[var(--spacing-sm)]"
                onClick={() => setMobileMenuOpen(false)}
              >
                Jetzt beraten lassen
              </Link>
            </div>
          </div>
        )}
      </div>
    </header>
  );
}
