var React = window.React;
var { Logo } = window.NobleHealthDesignSystem_07bcfa;
var I = window.NobleIcons;

var track = function (event, params) {
  try { if (window.nhTrack) window.nhTrack(event, params); } catch (e) { /* never break the header */ }
};

/* Each nav item points at a real section on the home page. */
var NAV_LINKS = [
  { label: 'Services', id: 'services', track: 'nav_services' },
  { label: 'Our care', id: 'our-care', track: 'nav_our_care' },
  { label: 'Programs', id: 'programs', track: 'nav_programs' },
  { label: 'About', id: 'about', track: 'nav_about' },
];

function scrollToSection(id) {
  var el = document.getElementById(id);
  if (!el) return false;
  el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  return true;
}

function SiteHeader({ onNav }) {
  /* From the request-care flow the sections aren't mounted, so go home first and
     scroll once React has rendered the home page. */
  var goToSection = (e, item) => {
    e.preventDefault();
    track('nav_click', { location: item.track });
    if (scrollToSection(item.id)) return;
    onNav('home');
    requestAnimationFrame(() => {
      if (!scrollToSection(item.id)) setTimeout(() => scrollToSection(item.id), 80);
    });
  };

  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: 'rgba(250,248,243,0.92)', backdropFilter: 'blur(12px)',
      borderBottom: '1px solid var(--border-subtle)',
    }}>
      <div style={{
        maxWidth: 'var(--container-xl)', margin: '0 auto', padding: '0 var(--space-8)',
        height: 76, display: 'grid', gridTemplateColumns: '1fr auto 1fr', alignItems: 'center',
      }} className="nh-header-inner">
        <nav className="nh-header-nav" style={{ display: 'flex', gap: 'var(--space-6)' }}>
          {NAV_LINKS.map((item) => (
            <a
              key={item.id}
              href={'/#' + item.id}
              onClick={(e) => goToSection(e, item)}
              style={{
                cursor: 'pointer', fontSize: 'var(--text-sm)', fontWeight: 'var(--fw-semibold)',
                color: 'var(--text-body)', textDecoration: 'none', letterSpacing: '0.01em',
              }}
            >
              {item.label}
            </a>
          ))}
        </nav>
        <span className="nh-logo" style={{ justifySelf: 'center', '--nh-tagline-size': '11px' }}>
          <Logo size={48} onClick={() => onNav('home')} />
        </span>
        <div style={{ display: 'flex', gap: 'var(--space-4)', alignItems: 'center', justifyContent: 'flex-end' }}>
          {/* Phone removed deliberately: every enquiry is routed through the care request
              so it lands in AxisCare rather than arriving as an untracked (often spam) call. */}
          <button onClick={() => { track('cta_click', { location: 'header' }); onNav('request'); }} style={{
            height: 42, padding: '0 20px', borderRadius: 'var(--radius-pill)', border: 'none',
            background: 'var(--brand-primary)', color: '#fff', fontFamily: 'var(--font-body)',
            fontWeight: 'var(--fw-bold)', fontSize: 'var(--text-sm)', cursor: 'pointer',
          }}>Request care</button>
        </div>
      </div>
    </header>
  );
}
window.SiteHeader = SiteHeader;