const NsHeader = ({ activeSection = 'home', onNavigate = () => {} }) => {
  const [open, setOpen] = React.useState(false);
  const links = [
    { id: 'home', label: 'Home' },
    { id: 'about', label: 'About Us' },
  ];
  const serviceLinks = [
    { id: 'service-ipo', label: 'IPO Advisory' },
    { id: 'service-acct', label: 'Accounting Services' },
    { id: 'service-ic', label: 'Internal Control Services' },
    { id: 'service-ia', label: 'Internal Audit' },
    { id: 'service-erm', label: 'Enterprise Risk Management' },
    { id: 'service-sme-health', label: 'SMEs Health Check' },
  ];

  const go = (id) => {
    if (window.nsTrack) {
      window.nsTrack(id.startsWith('service-') ? 'click_service_nav' : 'click_nav', {
        target: id,
      });
    }
    onNavigate(id);
    setOpen(false);
  };

  return (
    <header className="ns-header">
      <div className="ns-header__rail" />
      <div className="ns-header__inner">
        <button className="ns-brand" onClick={() => go('home')} aria-label="Northstar home">
          <img
            src="assets/northstar-logo-real.png"
            className="ns-brand__logo"
            alt="Northstar Corporation"
            style={{ width: 'auto', height: 'clamp(46px, 5vw, 58px)', maxWidth: 'min(190px, 34vw)' }}
          />
        </button>

        <nav className={`ns-nav ${open ? 'is-open' : ''}`} aria-label="Primary navigation">
          {links.map(l => (
            <button
              key={l.id}
              className={`ns-nav__link ${activeSection === l.id ? 'is-active' : ''}`}
              onClick={() => go(l.id)}
            >
              {l.label}
            </button>
          ))}
          <div className="ns-nav__item ns-nav__item--services">
            <button
              className={`ns-nav__link ns-nav__link--services ${(activeSection === 'services' || activeSection.startsWith('service-')) ? 'is-active' : ''}`}
              onClick={() => go('services')}
              aria-haspopup="true"
            >
              Services <span className="ns-nav__chevron" aria-hidden="true" />
            </button>
            <div className="ns-nav__dropdown" aria-label="Services submenu">
              {serviceLinks.map((s) => (
                <button key={s.id} className="ns-nav__dropdown-link" onClick={() => go(s.id)}>
                  {s.label}
                </button>
              ))}
            </div>
          </div>
        </nav>

        <button
          className={`ns-menu ${open ? 'is-open' : ''}`}
          onClick={() => setOpen(!open)}
          aria-expanded={open}
          aria-label="Toggle menu"
        >
          <span />
          <span />
        </button>
      </div>
    </header>
  );
};

window.NsHeader = NsHeader;