import { useState } from 'react';
import { Link, useLocation } from 'react-router-dom';
import Logo from './Logo';

const navItems = [
  { label: 'Home', to: '/' },
  { label: 'Referenzen', to: '/referenzen' },
  { label: 'Mietkatalog', to: '/mietkatalog' },
  { label: 'Kontakt', to: '/kontakt' }
];

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

  function isActive(to: string): boolean {
    if (to === '/') return location.pathname === '/';
    return location.pathname.startsWith(to);
  }

  return (
    <header className="hms-header" role="banner">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex items-center justify-between" style={{ height: 'var(--header-height)' }}>
          <Link to="/" className="flex items-center gap-2" style={{ color: 'var(--text)' }} aria-label="HMS Licht & Ton Startseite">
            <Logo size={40} />
            <div className="hidden sm:block leading-tight">
              <div className="font-bold text-base" style={{ color: 'var(--text)' }}>HMS Licht & Ton</div>
              <div className="text-xs" style={{ color: 'var(--secondary)' }}>Veranstaltungstechnik</div>
            </div>
          </Link>
          <nav className="hidden md:flex items-center gap-1" role="navigation" aria-label="Hauptnavigation">
            {navItems.map(item => (
              <Link key={item.to} to={item.to}
                className="hms-nav-btn px-4 py-2 rounded-lg text-sm font-medium"
                style={isActive(item.to) ? { color: 'var(--color-accent)', background: 'var(--color-accent-light)' } : { color: 'var(--text-muted)' }}
                aria-current={isActive(item.to) ? 'page' : undefined}>
                {item.label}
              </Link>
            ))}
            <Link to="/warenkorb" className="hms-btn hms-btn-primary text-sm ml-2 px-4 py-2">
              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
              Warenkorb
            </Link>
          </nav>
          <button onClick={() => setMobileMenuOpen(!mobileMenuOpen)} className="md:hidden p-2 rounded-lg" style={{ color: 'var(--text-muted)' }} aria-expanded={mobileMenuOpen} aria-label="Menü öffnen/schließen">
            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              {!mobileMenuOpen ?
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16"/> :
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12"/>
              }
            </svg>
          </button>
        </div>
      </div>
      {mobileMenuOpen && (
        <nav id="mobile-menu" className="md:hidden border-t" style={{ borderColor: 'var(--border)', background: 'var(--panel)' }} role="navigation" aria-label="Mobile Navigation">
          <div className="px-4 py-3 space-y-1">
            {navItems.map(item => (
              <Link key={item.to} to={item.to} onClick={() => setMobileMenuOpen(false)}
                className="hms-nav-btn block w-full text-left px-4 py-3 rounded-lg text-sm font-medium"
                style={isActive(item.to) ? { color: 'var(--color-accent)', background: 'var(--color-accent-light)' } : { color: 'var(--text-muted)' }}>
                {item.label}
              </Link>
            ))}
            <Link to="/warenkorb" onClick={() => setMobileMenuOpen(false)} className="block w-full text-left px-4 py-3 rounded-lg text-sm font-medium text-white" style={{ background: 'var(--color-accent)' }}>🛒 Warenkorb</Link>
          </div>
        </nav>
      )}
    </header>
  );
}
