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

<div class="block-number">
  <div class="container">
    <div class="block-number__list">
      <div class="block-number__listItem {$t('about.Employees Label') ? 'block-number__listItemRelative' : ''}">
        {#if $t('about.Employees Label')}
          <p class="block-number__listItemLabel">{$t('about.Employees Label')}</p>
        {/if}
        <p class="block-number__listItemNumber">{$t('about.700+')}</p>
        <p class="block-number__listItemText">{$t('about.Employees')}</p>
      </div>
      <div class="block-number__listItem">
        <p class="block-number__listItemNumber">{$t('about.50')}+</p>
        <p class="block-number__listItemText">{$t('about.Brokers launched')}</p>
      </div>
      <div class="block-number__listItem">
        <p class="block-number__listItemNumber">{$t('about.12')}</p>
        <p class="block-number__listItemText">{$t('about.Years in business')}</p>
      </div>
      <div class="block-number__listItem">
        <p class="block-number__listItemNumber">{$t('about.169')}</p>
        <p class="block-number__listItemText">{$t('about.Covered countries')}</p>
      </div>
    </div>
  </div>
</div>

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

  .block-number {
    background: $techBlue2;
    padding: 150px 0;

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

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

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

    &__list {
      display: flex;
      gap: 40px;

      @include breakpoint-down('deskL') {
        gap: 32px;
      }

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

      @include breakpoint-down('tabM') {
        flex-wrap: wrap;
      }
    }

    &__listItemRelative {
      position: relative;
    }

    &__listItem {
      width: calc((100% - 40px * 3) / 4);

      @include breakpoint-down('deskL') {
        width: calc((100% - 32px * 3) / 4);
      }

      @include breakpoint-down('deskS') {
        width: calc((100% - 40px * 3) / 4);
      }

      @include breakpoint-down('tabM') {
        width: 100%;
      }
    }

    &__listItemNumber {
      font-family: $Inter;
      font-size: 80px;
      font-weight: 800;
      line-height: 1.1;
      text-align: center;

      @include breakpoint-down('deskL') {
        font-size: 64px;
        line-height: 0.9;
        margin-bottom: 18px;
      }

      @include breakpoint-down('deskS') {
        font-size: 48px;
        line-height: 1.1;
        margin-bottom: 8px;
      }
    }

    &__listItemText {
      @include titleM;

      text-align: center;
    }

    &__listItemLabel {
      position: absolute;
      left: 50%;
      top: -24px;
      transform: translate3d(-50%, 0, 0);
      text-align: center;
      font-weight: 600;
    }
  }
</style>