<Boxel::OrgHeader
  class="merchant-payment-request-header"
  @iconURL={{this.cardPayLogo}}
  @title="Card Pay"
  style={{css-var
    boxel-org-header-logo-size="var(--card-pay-logo-size)"
    boxel-org-header-logo-position="var(--card-pay-logo-position)"
    boxel-org-header-padding="0"
  }}
>
  <div class="merchant-payment-request-header__links-container">
    <ul class="merchant-payment-request-header__links">
      <li>
        <a href={{this.aboutURL}}>
          About
        </a>
      </li>
      <li>
        <a href={{this.supportURL}}>
          Help
        </a>
      </li>
    </ul>
    <CardPay::HamburgerMenu
      class="merchant-payment-request-header__hamburger"
      @headerIconURL={{this.cardPayLogo}}
      @headerTitle="Card Pay"
      @open={{this.hamburgerMenuOpen}}
      @onOpen={{fn (mut this.hamburgerMenuOpen) true}}
      @onClose={{fn (mut this.hamburgerMenuOpen) false}}
    >
      <:body as |MenuItem|>
        <MenuItem @url={{this.aboutURL}}>
          About
        </MenuItem>
        <MenuItem @url={{this.supportURL}}>
          Help
        </MenuItem>
      </:body>
    </CardPay::HamburgerMenu>
  </div>
</Boxel::OrgHeader>