<script lang="ts">
  import { t } from '$lib/translations';
  import cb from '../../../assets/images/back-office/fits/cb.svg';
  import cdf from '../../../assets/images/back-office/fits/cdf.svg';
  import fx from '../../../assets/images/back-office/fits/fx.svg';
  import tp from '../../../assets/images/back-office/fits/tp.svg';
</script>

<div class="block-fits">
  <div class="container">
    <p class="block-fits__title">{$t('back-office.A perfect fit for')}</p>
    <p class="block-fits__text">
      {$t('back-office.One-stop back office solution for brokers. Simplify operations, enhance efficiency, and drive growth effortlessly. Streamline everything from client management to compliance in one powerful platform')}
    </p>
    <div class="block-fits__list">
      <div class="block-fits__listItem">
        <img src={fx} alt="" class="block-fits__listItemIcon" />
        <p class="block-fits__listItemText">{$t('back-office.Forex Brokers')}</p>
      </div>
      <div class="block-fits__listItem">
        <img src={cdf} alt="" class="block-fits__listItemIcon" />
        <p class="block-fits__listItemText">{$t('back-office.CFD Brokers')}</p>
      </div>
      <div class="block-fits__listItem">
        <img src={cb} alt="" class="block-fits__listItemIcon" />
        <p class="block-fits__listItemText">{$t('back-office.Crypto Brokers')}</p>
      </div>
      <div class="block-fits__listItem">
        <img src={tp} alt="" class="block-fits__listItemIcon" />
        <p class="block-fits__listItemText">{$t('back-office.Prop Trading Platforms')}</p>
      </div>
    </div>
  </div>
</div>

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

  .block-fits {
    background: $techBlue2;
    padding-bottom: 100px;

    @include breakpoint-down('deskL') {
      padding-bottom: 90px;
    }

    @include breakpoint-down('deskS') {
      padding-bottom: 54px;
    }

    @include breakpoint-down('tabM') {
      padding-bottom: 70px;
    }

    &__title {
      @include titleL;

      color: $techBluePrimary;
      text-align: center;
      max-width: 920px;
      margin: 0 auto 8px;

      @include breakpoint-down('deskS') {
        max-width: 530px;
      }
    }

    &__text {
      @include smallDefault;

      text-align: center;
      max-width: 790px;
      margin: 0 auto 40px;

      @include breakpoint-down('deskL') {
        max-width: 736px;
      }

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

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

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

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

      @include breakpoint-down('deskS') {
        gap: 20px;
        flex-wrap: wrap;
        justify-content: center;
      }

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

    &__listItem {
      background: $techBlue1;
      border-radius: 16px;
      width: calc((100% - 40px * 3) / 4);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      padding: 34px 30px 66px 30px;

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

      @include breakpoint-down('deskS') {
        border-radius: 8px;
        width: calc((100% - 20px * 2) / 3);
        padding: 31px 4px;
      }

      @include breakpoint-down('tabM') {
        width: 64.44%;
        min-width: 216px;
        max-width: 216px;
      }
    }

    &__listItemIcon {
      width: 195px;
      height: 100px;

      @include breakpoint-down('deskL') {
        width: 156px;
        height: 80px;
      }

      @include breakpoint-down('deskS') {
        width: 116px;
        height: 60px;
      }
    }

    &__listItemText {
      text-align: center;
      @include baseTitle;
    }
  }
</style>