// Header.jsx — KPI6 top navigation.
// Sticky, paper background, hairline bottom border.
// Logo: color version on paper. Switches to white when scrolled over navy.

const NAV_ITEMS = [
  { id: 'what',     label: 'What we do', href: '#what-we-do' },
  { id: 'research', label: 'Research',   href: '#research' },
  { id: 'products', label: 'Products',   href: '#products' },
  { id: 'training', label: 'Training',   href: '#training' },
  { id: 'contact',  label: 'Contact',    href: '#contact' },
];

function KpiLogo({ variant = 'color', className = '' }) {
  const src = variant === 'white'
    ? 'assets/kpi6-logo-white.png'
    : 'assets/kpi6-logo-color.png';
  return (
    <a href="#top" className={`kpi-logo ${className}`} aria-label="KPI6 home">
      <img src={src} alt="KPI6" />
    </a>
  );
}

function Header() {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <header className={`kpi-header ${scrolled ? 'is-scrolled' : ''}`}>
      <div className="kpi-container kpi-header-inner">
        <KpiLogo />
        <nav className="kpi-nav" aria-label="Primary">
          {NAV_ITEMS.map(item => (
            <a key={item.id} href={item.href} className="kpi-nav-link">
              {item.label}
            </a>
          ))}
        </nav>
        <div className="kpi-header-cta">
          <a href="#contact" className="kpi-btn kpi-btn-primary kpi-btn-sm">
            Talk to us
          </a>
        </div>
        <button
          className="kpi-burger"
          aria-label="Toggle menu"
          aria-expanded={open}
          onClick={() => setOpen(o => !o)}
        >
          <span></span><span></span><span></span>
        </button>
      </div>
      {open && (
        <div className="kpi-mobile-menu">
          {NAV_ITEMS.map(item => (
            <a key={item.id} href={item.href} className="kpi-nav-link" onClick={() => setOpen(false)}>
              {item.label}
            </a>
          ))}
          <a href="#contact" className="kpi-btn kpi-btn-primary" onClick={() => setOpen(false)}>Talk to us</a>
        </div>
      )}
    </header>
  );
}

Object.assign(window, { Header, KpiLogo });