<script lang="ts">
  import { t } from '$lib/translations';
  import tag1 from '$assets/images/cfd-package/hero/slide4-tag1.svg';
  import tag2 from '$assets/images/cfd-package/hero/slide4-tag2.svg';
  import tag3 from '$assets/images/cfd-package/hero/slide4-tag3.svg';
  import tag4 from '$assets/images/cfd-package/hero/slide4-tag4.svg';
  import slide1 from '$assets/images/cfd-package/hero/slide4.webp';
</script>

<div class="block-hero__slider-slide4">
  <h2>{$t('cfd-package.Unrivalled Back Office')}</h2>
  <div class="tags">
    <div class="tag">
      <div class="icon" style="background-image: url({tag1})"></div>
      <span>{$t('cfd-package.Customers, admins, and IBs management with ease')}</span>
    </div>
    <div class="tag">
      <div class="icon" style="background-image: url({tag2})"></div>
      <span>{$t('cfd-package.Integrated with leading global KYC providers')}</span>
    </div>
    <div class="tag">
      <div class="icon" style="background-image: url({tag3})"></div>
      <span>{$t('cfd-package.Powerful CRM for marketing and sales')}</span>
    </div>
    <div class="tag">
      <div class="icon" style="background-image: url({tag4})"></div>
      <span>{$t('cfd-package.Comprehensive ticket support system')}</span>
    </div>
  </div>
  <div class="slide1" style="background-image: url({slide1})"></div>
</div>

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

  .block-hero__slider-slide4 {
    width: 917px;
    height: 524px;
    overflow: hidden;
    padding: 35px 35px 45px;

    @include breakpoint-down('deskM') {
      width: 522px;
      height: 296px;
      padding: 14px 15px 0;
    }

    @include breakpoint-down('tabM') {
      width: 100%;
      height: 160px;
      padding: 0;
    }

    h2 {
      font-size: 35.66px;
      line-height: 43.3px;
      font-weight: 400;
      letter-spacing: -0.3px;

      @include breakpoint-down('deskM') {
        font-size: 20.73px;
        line-height: 25.17px;
      }

      @include breakpoint-down('tabM') {
        font-size: 14.08px;
        line-height: 17.1px;
        text-align: center;
      }
    }

    .tags {
      max-width: 649px;
      display: flex;
      flex-wrap: wrap;
      gap: 7.64px;
      margin: 15.28px 0 21.61px;

      @include breakpoint-down('deskM') {
        max-width: 410px;
        gap: 4.09px;
        margin: 8.18px 0 10.77px;
      }

      @include breakpoint-down('tabM') {
        max-width: 300px;
        gap: 2.02px;
        margin: 5.29px 0 5.8px;
      }
    }

    .tag {
      width: max-content;
      height: 25.64px;
      background-color: #28282C;
      border: 0.64px solid #525659;
      border-radius: 7.64px;
      padding: 0 12.74px 0 7.64px;
      display: flex;
      align-items: center;
      gap: 2.55px;

      @include breakpoint-down('deskM') {
        height: 15.44px;
        border: 0.37px solid #525659;
        border-radius: 4.44px;
        padding: 0 7.4px 0 4.44px;
      }

      @include breakpoint-down('tabM') {
        height: 11.02px;
        border: 0.25px solid #525659;
        border-radius: 3.02px;
        padding: 0 5.03px 0 3.02px;
      }

      .icon {
        width: 15.28px;
        height: 15.28px;
        background-size: contain;
        background-position: 50% 50%;
        background-repeat: no-repeat;

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

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

      span {
        font-size: 12.74px;
        line-height: 17px;
        letter-spacing: -0.2px;

        @include breakpoint-down('deskM') {
          font-size: 7.4px;
          line-height: 10.37px;
        }

        @include breakpoint-down('tabM') {
          font-size: 5.03px;
          line-height: 7.04px;
        }
      }
    }

    .slide1 {
      width: 872px;
      height: inherit;
      background-size: contain;
      background-repeat: no-repeat;
      transform: translate(-10px, -8px);

      @include breakpoint-down('deskM') {
        width: 512px;
        height: inherit;
        transform: translate(-6px, -8px);
      }

      @include breakpoint-down('tabM') {
        width: 100%;
        height: 100%;
        background-size: cover;
      }
    }
  }
</style>