<script lang="ts">
  import img from '../../../assets/images/white-label-broker/back-office/backoffice.webp';
  import imgMobile from '../../../assets/images/white-label-broker/back-office/backofficeMobile.webp';
  import management from '../../../assets/images/white-label-broker/back-office/management.svg';
  import kyc from '../../../assets/images/white-label-broker/back-office/kyc.svg';
  import chats from '../../../assets/images/white-label-broker/back-office/chats.svg';
  import marketing from '../../../assets/images/white-label-broker/back-office/marketing.svg';
  import { t } from '$lib/translations';
</script>

<div class="block-back-office">
  <div class="container">
    <p class="block-back-office__title">{@html $t('white-label-broker.Unrivalled back-office')}</p>
    <p class="block-back-office__text">{$t('white-label-broker.Manage every aspect of your CFD brokerage business.')}</p>
    <div class="block-back-office__wrapper">
      <div class="block-back-office__list">
        <div class="block-back-office__listItem">
          <img src={management} alt="management" class="block-back-office__listItemIcon" />
          <p class="block-back-office__listItemText">{$t('white-label-broker.Customers, admins, and IBs management with ease')}</p>
        </div>
        <div class="block-back-office__listItem">
          <img src={kyc} alt="kyc" class="block-back-office__listItemIcon" />
          <p class="block-back-office__listItemText">{$t('white-label-broker.Integrated with leading global KYC providers')}</p>
        </div>
        <div class="block-back-office__listItem">
          <img src={chats} alt="chats" class="block-back-office__listItemIcon" />
          <p class="block-back-office__listItemText">{$t('white-label-broker.Comprehensive ticket support system')}</p>
        </div>
        <div class="block-back-office__listItem">
          <img src={marketing} alt="marketing" class="block-back-office__listItemIcon" />
          <p class="block-back-office__listItemText">{$t('white-label-broker.Powerful CRM for marketing and sales')}</p>
        </div>
      </div>
      <picture>
        <source srcset={imgMobile} media="(max-width: 767px)">
        <img src={img} alt="back office" class="block-back-office__img" loading="lazy" />
      </picture>
    </div>
  </div>
</div>

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

  .block-back-office {
    padding: 93px 0;

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

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

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

    &__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;
      }

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

      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;
      }
    }

    &__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') {
        gap: 40px;
        flex-wrap: wrap;
      }
    }

    &__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-back-office__title span) {
    color: $redPrimary;
  }
</style>