<script lang="ts">
  import img from '../../../assets/images/white-label-broker/dealing/dealing.webp';
  import imgMobile from '../../../assets/images/white-label-broker/dealing/dealingMobile.webp';
  import portfolio from '../../../assets/images/white-label-broker/dealing/portfolio.svg';
  import abhbook from '../../../assets/images/white-label-broker/dealing/abhbook.svg';
  import good from '../../../assets/images/white-label-broker/dealing/good.svg';
  import comission from '../../../assets/images/white-label-broker/dealing/comission.svg';
  import antroud from '../../../assets/images/white-label-broker/dealing/antroud.svg';
  import { t } from '$lib/translations';
</script>

<div class="block-dealing">
  <div class="container">
    <p class="block-dealing__title">{@html $t('white-label-broker.Powerful dealing desk')}</p>
    <p class="block-dealing__text">{$t('white-label-broker.Set aside dealing and risk management and concentrate solely on user acquisition')}</p>
    <div class="block-dealing__wrapper">
      <div class="block-dealing__list">
        <div class="block-dealing__listItem">
          <img src={portfolio} alt="portfolio" class="block-dealing__listItemIcon" />
          <p class="block-dealing__listItemText">{$t('white-label-broker.Wide range of available instruments')}</p>
        </div>
        <div class="block-dealing__listItem">
          <img src={abhbook} alt="abhbook" class="block-dealing__listItemIcon" />
          <p class="block-dealing__listItemText">{$t('white-label-broker.A-Book, B-Book and Hybrid models of orders execution')}</p>
        </div>
        <div class="block-dealing__listItem">
          <img src={good} alt="good" class="block-dealing__listItemIcon" />
          <p class="block-dealing__listItemText">{$t('white-label-broker.Optimal trading conditions and fast processing')}</p>
        </div>
        <div class="block-dealing__listItem">
          <img src={comission} alt="comission" class="block-dealing__listItemIcon" />
          <p class="block-dealing__listItemText">{$t('white-label-broker.Flexible spreads and commissions policies')}</p>
        </div>
        <div class="block-dealing__listItem">
          <img src={antroud} alt="antroud" class="block-dealing__listItemIcon" />
          <p class="block-dealing__listItemText">{$t('white-label-broker.Fraud/Abuse detection & management')}</p>
        </div>
      </div>
        <picture>
          <source srcset={imgMobile} media="(max-width: 767px)">
          <img src={img} alt="dealing" class="block-dealing__img" loading="lazy" />
        </picture>
    </div>
  </div>
</div>

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

  .block-dealing {
    padding: 93px 0;

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

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

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

    &__title {
      @include titleXL;

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

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

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

      span {
        color: $redPrimary;
      }
    }

    &__text {
      margin-bottom: 24px;
      width: 100%;
      max-width: 920px;
      margin-inline: auto;
      text-align: center;

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

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

    &__wrapper {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 40px;
      padding-left: 120px;

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

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

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

    &__img {
      width: 100%;
      max-width: 920px;

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

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

      @include breakpoint-down('tabM') {
        width: calc(100% + 20px * 2);
        position: relative;
        left: 50%;
        transform: translateX(-50%);
      }
    }

    &__list {
      display: flex;
      flex-direction: column;
      gap: 24px;

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

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

    &__listItem {
      display: flex;
      align-items: center;
      gap: 16px;
    }

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

    &__listItemText {
      @include smallDefault;
    }
  }

  :global(.block-dealing__title span) {
    color: $redPrimary;
  }
</style>