<script lang="ts">
  import img from '../../../assets/images/white-label-broker/affiliate-module/affiliate.webp';
  import imgMobile from '../../../assets/images/white-label-broker/affiliate-module/affiliateMobile.webp';
  import ibmodule from '../../../assets/images/white-label-broker/affiliate-module/ibmodule.svg';
  import cpa from '../../../assets/images/white-label-broker/affiliate-module/cpa.svg';
  import share from '../../../assets/images/white-label-broker/affiliate-module/share.svg';
  import percentage from '../../../assets/images/white-label-broker/affiliate-module/percentage.svg';
  import { t } from '$lib/translations';
</script>

<div class="block-affiliate-module">
  <div class="container">
    <p class="block-affiliate-module__title">
      {$t('white-label-broker.Boost your business with')} <br />
      <span>{$t('white-label-broker.affiliate module')}</span>
    </p>
    <p class="block-affiliate-module__text">
      {$t('white-label-broker.Unlock the potential for revenue growth with our powerful affiliate modules')}
    </p>
    <div class="block-affiliate-module__list">
      <div class="block-affiliate-module__listItem">
        <img src={ibmodule} alt="ibmodule" class="block-affiliate-module__listItemIcon" />
        <p class="block-affiliate-module__listItemText">{$t('white-label-broker.IB Module')}</p>
      </div>
      <div class="block-affiliate-module__listItem">
        <img src={cpa} alt="cpa" class="block-affiliate-module__listItemIcon" />
        <p class="block-affiliate-module__listItemText">{$t('white-label-broker.CPA')}</p>
      </div>
      <div class="block-affiliate-module__listItem">
        <img src={share} alt="share" class="block-affiliate-module__listItemIcon" />
        <p class="block-affiliate-module__listItemText">{$t('white-label-broker.RevShare')}</p>
      </div>
      <div class="block-affiliate-module__listItem">
        <img src={percentage} alt="percentage" class="block-affiliate-module__listItemIcon" />
        <p class="block-affiliate-module__listItemText">{$t('white-label-broker.SpreadShare')}</p>
      </div>
    </div>
    <picture>
      <source srcset={imgMobile} media="(max-width: 767px)">
      <img src={img} alt="affiliate module" class="block-affiliate-module__image" loading="lazy" />
    </picture>

  </div>
</div>

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

  .block-affiliate-module {
    &__title {
      @include titleXL;

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

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

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

      > span {
        color: $redPrimary;
      }

      br {
        @include breakpoint-down('deskS') {
          display: none;
        }
      }
    }

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

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

    &__list {
      display: flex;
      gap: 40px;
      width: 100%;
      max-width: 920px;
      margin-inline: auto;
      margin-bottom: 24px;

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

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

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

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

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

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

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

    &__listItemText {
      @include smallDefault;

      text-align: center;
    }

    &__image {
      margin-inline: auto;
      width: 100%;
      max-width: 1160px;

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

      @include breakpoint-down('deskS') {
        max-width: none;
        width: 132.3%;
        left: 50%;
        position: relative;
        transform: translateX(-50%);
      }

      @include breakpoint-down('tabM') {
        width: 136%;
      }
    }
  }
</style>