/** @jsx React.createElement */
/* AppTopbar — the navy strip that spans the whole app.
   Logo (left), notifications bell with badge + user dropdown (right). */

function AppTopbar({ user = { initials: 'MC', name: 'Mary Chen' }, notifications = 28, collapsed = false }) {
  return (
    <header style={{
      display: 'flex', alignItems: 'center',
      height: 56,
      background: '#3F507B',
      color: '#fff',
      flexShrink: 0,
      zIndex: 4,
    }}>
      <div style={{
        width: collapsed ? 64 : 240, flexShrink: 0,
        padding: collapsed ? 0 : '0 22px',
        display: 'flex', alignItems: 'center',
        justifyContent: collapsed ? 'center' : 'flex-start',
        boxSizing: 'border-box',
        transition: 'width 200ms var(--ab-ease)',
      }} title="allianceboard">
        <div style={{
          fontFamily: 'var(--ab-font-sans)',
          fontSize: 27, fontWeight: 500,
          color: '#fff', letterSpacing: '-0.03em',
          lineHeight: 1,
        }}>a</div>
      </div>

      <div style={{ flex: 1 }} />

      {/* Co-brand — customer logo (Ipsen). */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 14, paddingRight: 4 }}>
        <img src={(window.__resources && window.__resources.ipsenLogo) || 'assets/logos/ipsen-logo-white.png'} alt="Ipsen" style={{ height: 22, width: 'auto', display: 'block' }} />
        <span style={{ width: 1, height: 26, background: 'rgba(255,255,255,.22)' }} />
      </div>

      <div style={{
        display: 'flex', alignItems: 'center', gap: 8,
        padding: '0 16px',
      }}>
        <button
          aria-label="Notifications"
          title="Notifications"
          style={{
            position: 'relative',
            width: 40, height: 40, padding: 0,
            border: 'none', background: 'transparent',
            color: '#fff', borderRadius: 8, cursor: 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            transition: 'background 120ms var(--ab-ease)',
          }}
          onMouseEnter={(e) => e.currentTarget.style.background = 'rgba(255,255,255,.08)'}
          onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}
        >
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
            <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/>
            <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/>
          </svg>
          {notifications > 0 && (
            <span style={{
              position: 'absolute',
              bottom: 4, right: 0,
              minWidth: 22, height: 18, padding: '0 5px',
              background: '#fff', color: '#3F507B',
              fontSize: 12, fontWeight: 700, lineHeight: 1,
              borderRadius: 4,
              border: '1px solid rgba(15,23,42,.12)',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              boxSizing: 'border-box',
            }}>{notifications > 99 ? '99+' : notifications}</span>
          )}
        </button>

        <button
          aria-label="Account menu"
          style={{
            display: 'inline-flex', alignItems: 'center', gap: 10,
            height: 40, padding: '0 14px',
            background: '#fff',
            border: '1px solid rgba(255,255,255,.3)',
            borderRadius: 6,
            color: '#3F507B', fontFamily: 'inherit',
            fontSize: 15, fontWeight: 600,
            cursor: 'pointer', whiteSpace: 'nowrap',
            transition: 'background 120ms var(--ab-ease)',
          }}
          onMouseEnter={(e) => e.currentTarget.style.background = 'var(--ab-slate-50)'}
          onMouseLeave={(e) => e.currentTarget.style.background = '#fff'}
        >
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
            <circle cx="12" cy="12" r="9"/>
            <circle cx="12" cy="10" r="3"/>
            <path d="M6 19a6.5 6.5 0 0 1 12 0"/>
          </svg>
          <span>{user.name}</span>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M6 9l6 6 6-6"/>
          </svg>
        </button>
      </div>
    </header>
  );
}

Object.assign(window, { AppTopbar });