"use client";

import Image from "next/image";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useState } from "react";

const navigation = [
  ["Start", "/"],
  ["Leistungen", "/leistungen"],
  ["Funkgeräte-Service", "/funkgeraete-service"],
  ["Reparatur", "/reparatur"],
  ["Über uns", "/ueber-uns"],
  ["Kontakt", "/kontakt"],
] as const;

export default function Header() {
  const pathname = usePathname();
  const [menuOpen, setMenuOpen] = useState(false);

  return (
    <header className="site-header">
      <div className="container header-inner">
        <Link href="/" className="brand" aria-label="Funktechnik Schubert Startseite" onClick={() => setMenuOpen(false)}>
          <Image
            src="/funktechnik_schubert_logo.jpg"
            alt="Funktechnik Schubert"
            width={1672}
            height={941}
            priority
            className="brand-logo"
          />
        </Link>
        <button
          className="menu-toggle"
          type="button"
          aria-expanded={menuOpen}
          aria-controls="site-navigation"
          onClick={() => setMenuOpen((open) => !open)}
        >
          Menü
        </button>
        <nav id="site-navigation" className={menuOpen ? "nav is-open" : "nav"} aria-label="Hauptnavigation">
          {navigation.map(([label, href]) => (
            <Link key={href} href={href} aria-current={pathname === href ? "page" : undefined} onClick={() => setMenuOpen(false)}>
              {label}
            </Link>
          ))}
        </nav>
        <Link className="header-cta" href="/reparatur">Reparatur anfragen</Link>
      </div>
    </header>
  );
}