<script lang="ts">
  import markets from '../../../assets/images/main/liquidity/markets.svg';
  import commodities from '../../../assets/images/main/liquidity/commodities.svg';
  import quick from '../../../assets/images/main/liquidity/quick.svg';
  import { t } from '$lib/translations';
</script>

<div class="block-liquidity">
  <div class="container">
    <p class="block-liquidity__title">
      {@html $t('The Deepest Liquidity In The Market')}
    </p>
    <p class="block-liquidity__subtitle">{$t('Get connected to any pre-integrated liquidity provider')}</p>
    <div class="block-liquidity__list">
      <div class="block-liquidity__listItem">
        <img src={markets} alt="" class="block-liquidity__listItemIcon" loading="lazy" />
        <p class="block-liquidity__listItemText">
          {@html $t('6 Markets')}
        </p>
      </div>
      <div class="block-liquidity__listItem">
        <img src={commodities} alt="" class="block-liquidity__listItemIcon" loading="lazy" />
        <p class="block-liquidity__listItemText">
          {@html $t('800 Instruments')}
        </p>
      </div>
      <div class="block-liquidity__listItem">
        <img src={quick} alt="" class="block-liquidity__listItemIcon" loading="lazy" />
        <p class="block-liquidity__listItemText">
          {@html $t('Ultra-fast execution')}
        </p>
      </div>
    </div>
  </div>
</div>

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

  .block-liquidity {
    padding: 142px 0;

    @include breakpoint-down('deskL') {
      padding: 136px 0;
    }

    @include breakpoint-down('deskS') {
      padding: 69px 0;
    }

    @include breakpoint-down('tabM') {
      padding: 73px 0;
    }

    &__title {
      @include titleXL;

      text-align: center;
      max-width: 560px;
      width: 100%;
      margin-inline: auto;
      margin-bottom: 24px;

      @include breakpoint-down('deskL') {
        max-width: 500px;
        margin-bottom: 16px;
      }

      @include breakpoint-down('deskS') {
        max-width: 370px;
        margin-bottom: 8px;
      }

      > span {
        color: $redPrimary;

        @include breakpoint-down('tabM') {
          display: block;
        }
      }
    }

    &__subtitle {
      text-align: center;
      margin-bottom: 64px;

      @include breakpoint-down('deskS') {
        margin-bottom: 40px;
      }

      @include breakpoint-down('tabM') {
        margin-bottom: 24px;
      }
    }

    &__list {
      display: flex;
      align-items: flex-start;
      gap: 32px;

      max-width: 832px;
      width: 100%;
      margin-inline: auto;

      @include breakpoint-down('deskS') {
        gap: 20px;
      }
    }

    &__listItem {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    &__listItemIcon {
      width: 70px;
      height: 70px;
    }

    &__listItemText {
      text-align: center;

      > span {
        @include baseTitle;
      }
    }
  }
  :global(.block-liquidity .block-liquidity__title span) {
    color: $redPrimary;

    @include breakpoint-down('tabM') {
      display: block;
    }
  }
  :global(.block-liquidity__listItemText span) {
    @include baseTitle;
  }
</style>