<script lang="ts">
  import { t } from '$lib/translations';

  import tag1 from '../../../../assets/images/cfd-package/hero/slide1-tag1.svg';
  import tag2 from '../../../../assets/images/cfd-package/hero/slide1-tag2.svg';
  import tag3 from '../../../../assets/images/cfd-package/hero/slide1-tag3.svg';
  import tag4 from '../../../../assets/images/cfd-package/hero/slide1-tag4.svg';
  import tag5 from '../../../../assets/images/cfd-package/hero/slide1-tag5.svg';
  import tag6 from '../../../../assets/images/cfd-package/hero/slide1-tag6.svg';
  import tag7 from '../../../../assets/images/cfd-package/hero/slide1-tag7.svg';
  import tag8 from '../../../../assets/images/cfd-package/hero/slide1-tag8.svg';
  import tag9 from '../../../../assets/images/cfd-package/hero/slide1-tag9.svg';
  import tag10 from '../../../../assets/images/cfd-package/hero/slide1-tag10.svg';

  import slide1 from '../../../../assets/images/cfd-package/hero/slide1.webp';
</script>

<div class="block-hero__slider-slide1">
  <h2>{$t('cfd-package.All your traders need in one single platform')}</h2>
  <div class="block-hero__slide-content">
    <div class="tags">
      <div class="tag">
        <div class="icon" style="background-image: url({tag1})"></div>
        <span>{$t('cfd-package.Market orders, limits orders, TPSL')}</span>
      </div>
      <div class="tag">
        <div class="icon" style="background-image: url({tag2})"></div>
        <span>{$t('cfd-package.Risk management')}</span>
      </div>
      <div class="tag">
        <div class="icon" style="background-image: url({tag3})"></div>
        <span>{$t('cfd-package.7 timeframes')}</span>
      </div>
      <div class="tag">
        <div class="icon" style="background-image: url({tag4})"></div>
        <span>{$t('cfd-package.9 charts to display')}</span>
      </div>
      <div class="tag">
        <div class="icon" style="background-image: url({tag5})"></div>
        <span>{$t('cfd-package.Negative balance protection')}</span>
      </div>
      <div class="tag">
        <div class="icon" style="background-image: url({tag6})"></div>
        <span>{$t('cfd-package.Asset selector')}</span>
      </div>
      <div class="tag">
        <div class="icon" style="background-image: url({tag7})"></div>
        <span>{$t('cfd-package.One-click trading')}</span>
      </div>
      <div class="tag">
        <div class="icon" style="background-image: url({tag8})"></div>
        <span>{$t('cfd-package.Hedging')}</span>
      </div>
      <div class="tag">
        <div class="icon" style="background-image: url({tag9})"></div>
        <span>{$t('cfd-package.Making short positions')}</span>
      </div>
      <div class="tag">
        <div class="icon" style="background-image: url({tag10})"></div>
        <span>{$t('cfd-package.Leveraged trading')}</span>
      </div>
    </div>
    <div class="slide1" style="background-image: url({slide1})"></div>
  </div>
</div>

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

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

    @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;
      }
    }

    .block-hero__slide-content {
      display: flex;
      justify-content: space-between;
      margin-top: 22.29px;

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

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

    .tags {
      display: flex;
      flex-direction: column;
      gap: 5px;

      @include breakpoint-down('deskM') {
        gap: 3px;
      }

      @include breakpoint-down('tabM') {
        gap: 2.02px;
      }
    }

    .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: 598px;
      height: 375px;
      background-size: contain;
      background-repeat: no-repeat;

      @include breakpoint-down('deskL') {
        width: 588px;
        height: 369px;
        transform: translate(-1px, 1px);
      }

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

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