/* Header — top utility bar + sticky main nav with logo, links, lang toggle, hamburger */
(function () {
  const { LangToggle } = window.KhandelwalGasDesignSystem_68d8db;

  function Header({ lang, setLang, page, setPage, t }) {
    const [menuOpen, setMenuOpen] = React.useState(false);
    const links = [
      ['home', t.nav.home],
      ['services', t.nav.services],
      ['support', t.nav.support],
      ['contact', t.nav.contact],
    ];
    const goTo = (id) => {
      setPage(id);
      setMenuOpen(false);
    };
    return (
      <header className={menuOpen ? 'kg-site-header kg-menu-open' : 'kg-site-header'} style={{ position: 'sticky', top: 0, zIndex: 50 }}>
        {/* utility bar */}
        <div style={{ background: 'var(--navy-700)', color: 'var(--text-on-dark-muted)' }}>
          <div className="kg-container kg-container--wide" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', height: 38, fontSize: 'var(--fs-xs)' }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontFamily: t.dir === 'hi' ? 'var(--font-hindi)' : 'var(--font-body)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
              <i data-lucide="badge-check" style={{ width: 14, height: 14, color: 'var(--orange-400)' }}></i>
              {t.topbar}
            </span>
            <a href={'tel:' + window.KG_INFO.phoneRaw} style={{ color: 'var(--text-on-dark)', display: 'inline-flex', alignItems: 'center', gap: 6, fontWeight: 600, whiteSpace: 'nowrap', flex: 'none', paddingLeft: 16 }}>
              <i data-lucide="phone" style={{ width: 13, height: 13 }}></i>{window.KG_INFO.phone}
            </a>
          </div>
        </div>
        {/* main nav */}
        <div style={{ background: 'rgba(251,248,244,0.92)', backdropFilter: 'blur(10px)', borderBottom: '1px solid var(--line-200)' }}>
          <div className="kg-container kg-container--wide" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 'var(--header-h)' }}>
            <a onClick={() => goTo('home')} style={{ display: 'flex', alignItems: 'center', cursor: 'pointer', flex: 'none' }}>
              <img src="../../assets/logos/khandelwal-gas-flame-est.png" alt="Khandelwal Gas · Est. 1984" style={{ height: 60, width: 'auto' }} />
            </a>
            <nav id="kg-primary-nav" aria-label="Primary navigation" style={{ display: 'flex', alignItems: 'center', gap: 2, flex: '1 1 auto', justifyContent: 'center', minWidth: 0 }}>
              {links.map(([id, label]) => (
                <a key={id} onClick={() => goTo(id)}
                  style={{
                    padding: '9px 13px', cursor: 'pointer', borderRadius: 'var(--radius-pill)', whiteSpace: 'nowrap',
                    fontFamily: t.dir === 'hi' ? 'var(--font-hindi)' : 'var(--font-body)',
                    fontSize: 'var(--fs-sm)', fontWeight: 600,
                    color: page === id ? 'var(--navy-700)' : 'var(--ink-500)',
                    background: page === id ? 'var(--navy-50)' : 'transparent',
                  }}>{label}</a>
              ))}
            </nav>
            <div className="kg-header-actions" style={{ display: 'flex', alignItems: 'center', gap: 12, flex: 'none' }}>
              <LangToggle value={lang} onChange={(nextLang) => { setLang(nextLang); setMenuOpen(false); }} size="sm" />
              <button
                type="button"
                className="kg-menu-toggle"
                aria-label={menuOpen ? 'Close menu' : 'Open menu'}
                aria-controls="kg-primary-nav"
                aria-expanded={menuOpen}
                onClick={() => setMenuOpen((open) => !open)}
                style={{
                  display: 'none', alignItems: 'center', justifyContent: 'center', width: 42, height: 42,
                  border: '1px solid var(--line-200)', borderRadius: 'var(--radius-pill)', background: 'var(--bg-surface)',
                  color: 'var(--navy-700)', cursor: 'pointer', boxShadow: 'var(--shadow-sm)',
                }}
              >
                <i data-lucide={menuOpen ? 'x' : 'menu'} style={{ width: 20, height: 20 }}></i>
              </button>
            </div>
          </div>
        </div>
      </header>
    );
  }
  window.KGHeader = Header;
})();