// Resident Portal — top header. NJ wordmark left, primary nav + "Built by GovPilot" badge right.

function PortalHeader() {
  const t = window.tokens;
  return (
    <header style={{
      borderBottom: `1px solid ${t.color.hair}`,
      background: t.color.bg,
      position: 'sticky',
      top: 0,
      zIndex: 10,
    }}>
      <div className="ph-header-inner" style={{
        maxWidth: 'none',
        margin: 0,
        padding: '14px 32px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        gap: 24,
      }}>
        <a href="Resident Portal - Home.html" style={{
          display: 'flex',
          alignItems: 'center',
          gap: 12,
          textDecoration: 'none',
          color: t.color.text,
        }}>
          <img src="assets/nj-logo.svg" alt="" width="28" height="30" style={{ display: 'block' }} />
          <span style={{ display: 'flex', flexDirection: 'column', lineHeight: 1.15, gap: 4 }}>
            <span style={{ fontSize: 14, fontWeight: 600, color: t.color.text, letterSpacing: -0.1 }}>
              State of New Jersey
            </span>
            <span style={{ fontFamily: t.font.mono, fontSize: 10, fontWeight: 500, letterSpacing: 1.4, textTransform: 'uppercase', color: t.color.muted }}>
              Resident Portal
            </span>
          </span>
        </a>

        <nav className="ph-navlinks" style={{ display: 'flex', alignItems: 'center', gap: 32 }}>
          <a href="#services" className="ph-navlink" style={navLinkStyle(t)}>Services</a>
          <a href="#track" className="ph-navlink" style={navLinkStyle(t)}>Track a request</a>
          <a href="#help" className="ph-navlink" style={navLinkStyle(t)}>Help</a>

          <a
            href="Resident Portal - Login.html"
            style={{ textDecoration: 'none', flexShrink: 0 }}
          >
            <Button variant="secondary" size="sm">Sign in</Button>
          </a>
        </nav>
      </div>
    </header>
  );
}

function navLinkStyle(t) {
  return {
    fontSize: 14,
    color: t.color.body,
    textDecoration: 'none',
    fontWeight: 400,
    letterSpacing: -0.1,
  };
}

Object.assign(window, { PortalHeader });