1  <script lang="ts">
  2      import AppleArcadeLogo from '~/components/icons/AppleArcadeLogo.svg';
  3      import { getI18n } from '~/stores/i18n';
  4  
  5      const i18n = getI18n();
  6  </script>
  7  
  8  <article>
  9      <div class="metadata-container">
 10          <div class="logo-container">
 11              <AppleArcadeLogo />
 12          </div>
 13  
 14          <h2>
 15              {$i18n.t('ASE.Web.AppStore.Arcade.UpsellFooter.LineOne')}
 16              <br />
 17              {$i18n.t('ASE.Web.AppStore.Arcade.UpsellFooter.LineTwo')}
 18              <br />
 19              {$i18n.t('ASE.Web.AppStore.Arcade.UpsellFooter.LineThree')}
 20          </h2>
 21  
 22          <a href="https://www.apple.com/apple-arcade/" target="_blank">
 23              <span>
 24                  {$i18n.t(
 25                      'ASE.Web.AppStore.Arcade.UpsellFooter.CallToActionText',
 26                  )}
 27              </span>
 28              {$i18n.t(
 29                  'ASE.Web.AppStore.Arcade.UpsellFooter.CallToActionDisclaimerMark',
 30              )}
 31          </a>
 32      </div>
 33  </article>
 34  
 35  <style lang="scss">
 36      @use '@amp/web-shared-styles/sasskit-stylekit/ac-sasskit-config';
 37      @use 'ac-sasskit/core/locale' as *;
 38      @use 'ac-sasskit/modules/viewportcontent/core' as *;
 39      @use 'amp/stylekit/core/viewports' as *;
 40  
 41      .logo-container {
 42          width: 72px;
 43          margin-bottom: 20px;
 44          line-height: 0;
 45  
 46          @media (--range-xsmall-only) {
 47              width: 62px;
 48              margin-bottom: 16px;
 49          }
 50      }
 51  
 52      .logo-container :global(path) {
 53          color: var(--systemPrimary-onDark);
 54      }
 55  
 56      .metadata-container {
 57          display: flex;
 58          flex-direction: column;
 59          justify-content: center;
 60          width: 60%;
 61          height: 100%;
 62          padding: 40px;
 63  
 64          @media (--range-xsmall-only) {
 65              align-items: center;
 66              justify-content: end;
 67              width: unset;
 68              text-align: center;
 69          }
 70      }
 71  
 72      h2 {
 73          margin-bottom: 20px;
 74          font: var(--header-emphasized);
 75          line-height: 54px;
 76  
 77          @media (--range-xsmall-only) {
 78              font: var(--title-1-emphasized);
 79          }
 80      }
 81  
 82      a {
 83          display: flex;
 84          font: var(--title-3-emphasized);
 85      }
 86  
 87      a::after {
 88          content: '↗';
 89          font-weight: normal;
 90          margin-inline-start: 4px;
 91      }
 92  
 93      a:hover {
 94          text-decoration: none;
 95      }
 96  
 97      a:hover span {
 98          text-decoration: underline;
 99      }
100  
101      article {
102          flex-grow: 1;
103          width: 100%;
104          max-width: calc(viewport-content-for(xlarge) - var(--bodyGutter) * 2);
105          aspect-ratio: 2.55;
106          margin: 0 auto;
107          color: var(--systemPrimary-onDark);
108          background: #000;
109          background-size: cover;
110  
111          @media (--range-xsmall-only) {
112              max-width: 338px;
113              aspect-ratio: 35/48;
114              border-radius: var(--global-border-radius-medium);
115              background-image: url('/assets/images/arcade/upsell/footer-280@1x.png');
116  
117              @media (resolution >= 192dpi) {
118                  background-image: url('/assets/images/arcade/upsell/footer-280@2x.png');
119              }
120          }
121  
122          @media (--range-small-only) {
123              aspect-ratio: 173/96;
124              background-image: url('/assets/images/arcade/upsell/footer-692@1x_LTR.png');
125  
126              @include rtl {
127                  background-image: url('/assets/images/arcade/upsell/footer-692@1x_RTL.png');
128              }
129  
130              @media (resolution >= 192dpi) {
131                  background-image: url('/assets/images/arcade/upsell/footer-692@2x_LTR.png');
132  
133                  @include rtl {
134                      background-image: url('/assets/images/arcade/upsell/footer-692@2x_RTL.png');
135                  }
136              }
137          }
138  
139          @media (--range-medium-up) {
140              background-image: url('/assets/images/arcade/upsell/footer-980@1x_LTR.png');
141  
142              @include rtl {
143                  background-image: url('/assets/images/arcade/upsell/footer-980@1x_RTL.png');
144              }
145  
146              @media (resolution >= 192dpi) {
147                  background-image: url('/assets/images/arcade/upsell/footer-980@2x_LTR.png');
148  
149                  @include rtl {
150                      background-image: url('/assets/images/arcade/upsell/footer-980@2x_RTL.png');
151                  }
152              }
153          }
154  
155          @media (--range-xlarge-up) {
156              border-radius: var(--global-border-radius-medium);
157          }
158      }
159  </style>