import React, { useState, useEffect } from 'react';
import { Menu, X } from 'lucide-react';

const navItems = [
  { href: '#/', label: 'Home' },
  { href: '#/diagnostics', label: 'Diagnostics' },
  { href: '#/incidents', label: 'Incidents' },
  { href: '#/system', label: 'System' },
];

export const Header: React.FC = () => {
  const [open, setOpen] = useState(false);

  useEffect(() => {
    const handleKey = (e: KeyboardEvent) => {
      if (e.key === 'Escape') setOpen(false);
    };
    if (open) {
      document.addEventListener('keydown', handleKey);
      document.body.style.overflow = 'hidden';
    } else {
      document.body.style.overflow = '';
    }
    return () => {
      document.removeEventListener('keydown', handleKey);
      document.body.style.overflow = '';
    };
  }, [open]);

  return (
    <header className="fixed top-0 left-0 w-full z-50 backdrop-blur-md bg-[var(--bg)]/70 border-b border-[var(--border)]">
      <div className="container mx-auto flex items-center justify-between h-16 px-4">
        <a href="#/" className="text-xl font-display font-bold text-[var(--ink)] tracking-tight">
          NEPAL 360 RECOVERY
        </a>
        <nav className="hidden md:flex gap-6">
          {navItems.map((item) => (
            <a
              key={item.href}
              href={item.href}
              className="text-sm font-medium text-[var(--ink-muted)] hover:text-[var(--ink)] transition"
            >
              {item.label}
            </a>
          ))}
        </nav>
        <button
          className="md:hidden p-2"
          onClick={() => setOpen(!open)}
          aria-label={open ? 'Close menu' : 'Open menu'}
        >
          {open ? <X /> : <Menu />}
        </button>
      </div>
      {open && (
        <div className="md:hidden bg-[var(--surface)] border-t border-[var(--border)]" role="dialog" aria-modal="true">
          <nav className="flex flex-col p-4 gap-4">
            {navItems.map((item) => (
              <a
                key={item.href}
                href={item.href}
                className="text-lg font-medium text-[var(--ink)]"
                onClick={() => setOpen(false)}
              >
                {item.label}
              </a>
            ))}
          </nav>
        </div>
      )}
    </header>
  );
};