<script lang="ts">
  import { onMount } from 'svelte';
  import { t } from '$lib/translations';
  import packageIcon from '../../../assets/images/cfd-package/banner/package.svg';
  import chevron from '../../../assets/images/cfd-package/banner/chevron-down.svg';

  onMount(() => {
    document.body.classList.add('banner-cfd');

    return () => {
      document.body.classList.remove('banner-cfd');
    };
  });
</script>

<a href="https://quadcode.com/cfd-package">
  <div class="banner-cfd">
      <div class="banner-cfd__icon">
        <img src={packageIcon} alt="">
        <span>{$t('New Package')}</span>
      </div>
      <div class="banner-cfd__text">{$t('Forex Lite Offer ')}<span>{$t('$25000')}</span>{$t(' → $17,500')}</div>
      <div class="banner-cfd__button">
        <a href="https://quadcode.com/cfd-package">{$t('Learn more')}</a>
        <img src={chevron} alt="">
      </div>
  </div>
</a>

<style lang="scss">
  @import 'src/scss/variables';
  @import 'src/scss/mixins';
  @import 'src/scss/media';

  :global(body.banner-cfd) {
    margin-top: 186px;

    @include breakpoint-down('deskM') {
      margin-top: 180px;
    }

    @include breakpoint-down('tabL') {
      margin-top: 138px;
    }

    @include breakpoint-down('tabM') {
      margin-top: 198px;
    }
  }

  :global(body.banner-cfd .menu-mobile) {
    top: 138px !important;

    @include breakpoint-down('tabM') {
      top: 198px !important;
    }
  }

  .banner-cfd {
    height: 52px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    background-color: #222126;

    @include breakpoint-down('deskM') {
      height: 46px;
    }

    @include breakpoint-down('tabM') {
      height: 106px;
      flex-direction: column;
    }

    &__icon {
      height: 34px;
      padding: 0 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 4px;
      border: 1px solid rgba(108, 233, 166, 1);
      border-radius: 8px;

      @include breakpoint-down('deskM') {
        height: 28px;
      }

      img {
        width: 20px;
        height: 20px;

        @include breakpoint-down('deskM') {
          width: 14px;
          height: 14px;
        }
      }

      span {
        font-size: 14px;
        font-weight: 500;
        line-height: 1;

        @include breakpoint-down('deskM') {
          font-size: 12px;
        }
      }
    }
    &__text {
      font-size: 14px;
      line-height: 1;
      font-weight: 500;
      margin: 0 16px 0 13px;
      padding-left: 11px;
      border-left: 1px solid #7D7D8A;

      @include breakpoint-down('tabM') {
        margin: 8px 0 8px;
        border-left: none;
        padding-left: 0;
      }

      span {
        text-decoration: line-through;
      }
    }
    &__button {
      height: 26px;
      padding: 0 4px 0 8px;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 2px;
      background-color: #33323B;
      border-radius: 24px;
      cursor: pointer;

      @include breakpoint-down('tabM') {
        width: 223px;
      }

      a {
        font-size: 12px;
        line-height: 1.2;
        text-transform: capitalize;
      }

      img {
        width: 12px;
        height: 12px;
      }
    }
  }
</style>