;(function () {
/* PageHeader — sticky top header for Wallet / News / Performance screens.
   White bg, paddingTop 54, title left + frosted bell + user buttons right
   (matches the Hero's HeaderIconBtn). Icons render dark since the page bg
   here is white (vs Hero's teal where icons are white). */

const PageHeaderBell = ({ width = 40, height = 40, color }) => (
  <svg width={width} height={height} viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M17.3542 29C18.0593 29.6224 18.9856 30 20 30C21.0145 30 21.9407 29.6224 22.6458 29M26 16C26 14.4087 25.3679 12.8826 24.2427 11.7574C23.1174 10.6321 21.5913 10 20 10C18.4087 10 16.8826 10.6321 15.7574 11.7574C14.6322 12.8826 14 14.4087 14 16C14 19.0902 13.2205 21.206 12.3497 22.6054C11.6151 23.7859 11.2479 24.3761 11.2613 24.5408C11.2763 24.7231 11.3149 24.7926 11.4618 24.9016C11.5945 25 12.1926 25 13.3889 25H26.6112C27.8074 25 28.4056 25 28.5382 24.9016C28.6852 24.7926 28.7238 24.7231 28.7387 24.5408C28.7522 24.3761 28.3849 23.7859 27.6504 22.6054C26.7795 21.206 26 19.0902 26 16Z" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
    <circle cx="26" cy="14" r="4.5" fill="#F04438"/>
  </svg>
);

const PageHeaderUser = ({ width = 24, height = 24, color }) => (
  <svg width={width} height={height} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2 M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

const PageHeader = ({ title, hasBell = true, hasBadge = true, onBellPress, center }) => (
  /* paddingTop: 54px + env(safe-area-inset-top) so on mobile iOS PWA the
     white header bg extends UP into the safe-area-top zone (covering
     under the status bar with white), while the title row stays at 54px
     below the visible viewport top. Non-mobile: env() = 0, paddingTop
     stays 54px (no visual change). */
  <div style={{ backgroundColor: '#fff', paddingTop: 'calc(54px + env(safe-area-inset-top, 0px))', paddingLeft: '20px', paddingRight: '20px', paddingBottom: '16px', display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', position: 'relative' }}>
    {/* SemiBold (Gilroy 600) — softened from Heavy per design spec. */}
    <span style={{ flex: 1, fontFamily: 'Gilroy', fontWeight: 600, fontSize: '22px', color: colors.ink, textAlign: 'left' }}>{title}</span>
    {/* Optional center slot — absolutely positioned so it sits truly centered
       on the row regardless of left/right widths. The row content is 40px
       tall (HeaderIconBtn height); a 36px pill centers with top offset 2px
       inside that row, which sits at y = paddingTop (54+env) from wrap top. */}
    {/* top: calc(56px + env) keeps the centered pill aligned with the icon
       row regardless of safe-area-top. */}
    {center ? (
      <div style={{ position: 'absolute', top: 'calc(56px + env(safe-area-inset-top, 0px))', left: 0, right: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', pointerEvents: 'none' }}>
        <div style={{ pointerEvents: 'auto' }}>{center}</div>
      </div>
    ) : null}
    {hasBell ? (
      <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: '10px' }}>
        <HeaderIconBtn badge={hasBadge} onPress={onBellPress}>
          <PageHeaderBell width={40} height={40} color={colors.ink2} />
        </HeaderIconBtn>
        <HeaderIconBtn>
          <PageHeaderUser width={26} height={26} color={colors.ink2} />
        </HeaderIconBtn>
      </div>
    ) : null}
  </div>
);

Object.assign(window, { PageHeader });
})();