<script lang="ts">
  import chats from '../../../assets/images/main/full-scale/chats.svg';
  import kyc from '../../../assets/images/main/full-scale/kyc.svg';
  import marketing from '../../../assets/images/main/full-scale/marketing.svg';
  import management from '../../../assets/images/main/full-scale/management.svg';
  import Backoffice from '../../../assets/images/back-office/hero/Backoffice_1st3.webp';
  import BackofficeMob from '../../../assets/images/back-office/hero/Backoffice_1st3_forMob.webp';

  import Button from '../../button/Button.svelte';
  import { localeLink, t } from '$lib/translations';
</script>

<div class="block-full-scale">
  <div class="container">
    <p class="block-full-scale__title">{@html $t('Full-Scale Back Office')}</p>
    <p class="block-full-scale__subtitle">
      {@html $t('Seize complete control over your brokerage with one-stop back office solution')}
    </p>
    <div class="block-full-scale__list">
      <div class="block-full-scale__listItem">
        <img src={management} alt="" class="block-full-scale__listItemIcon" loading="lazy" />
        <p class="block-full-scale__listItemText">
          {@html $t('Customers, admins, and IBs management with ease')}
        </p>
      </div>
      <div class="block-full-scale__listItem">
        <img src={kyc} alt="" class="block-full-scale__listItemIcon" loading="lazy" />
        <p class="block-full-scale__listItemText">
          {@html $t('Integrated with leading global KYC providers')}
        </p>
      </div>
      <div class="block-full-scale__listItem">
        <img src={chats} alt="" class="block-full-scale__listItemIcon" loading="lazy" />
        <p class="block-full-scale__listItemText">
          {@html $t('Comprehensive ticket support system')}
        </p>
      </div>
      <div class="block-full-scale__listItem">
        <img src={marketing} alt="" class="block-full-scale__listItemIcon" loading="lazy" />
        <p class="block-full-scale__listItemText">
          {@html $t('Powerful CRM for marketing and sales')}
        </p>
      </div>
    </div>
    <Button text={$t('Learn more')} className="block-full-scale__button" link="{localeLink()}/back-office" />
    <picture>
      <source srcset="{BackofficeMob}" media="(max-width: 767px)">
      <img src={Backoffice} alt="back office" class="block-full-scale__image" loading="lazy" />
    </picture>

  </div>
</div>

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

  .block-full-scale {
    padding: 160px 0 0;
    background: $techBlue2;

    @include breakpoint-down('deskL') {
      padding-top: 100px;
    }

    @include breakpoint-down('deskS') {
      padding-top: 58px;
    }

    @include breakpoint-down('tabM') {
      overflow: hidden;
    }

    &__title {
      @include titleXL;

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

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

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

      > span {
        color: $redPrimary;

        @include breakpoint-down('tabM') {
          display: block;
        }
      }
    }

    &__subtitle {
      width: 100%;
      max-width: 400px;
      margin-inline: auto;
      text-align: center;
      margin-bottom: 40px;

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

    &__list {
      width: 100%;
      display: flex;
      align-items: flex-start;
      gap: 40px;
      margin-bottom: 80px;

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

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

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

    &__listItem {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;

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

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

    &__listItemIcon {
      width: 90px;
      height: 90px;

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

    &__listItemText {
      text-align: center;
      color: $techBluePrimary;

      > span {
        font-weight: 700;
      }

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

    & :global(.block-full-scale__button) {
      @include baseCTA;

      margin-inline: auto;
      padding: 12px 50px;
    }

    &__image {
      @include breakpoint-down('deskS') {
        width: calc(100% + 40px * 2);
        margin-left: -40px;
      }

      @include breakpoint-down('tabM') {
        width: calc(100% + 52px * 2);
        margin-left: -52px;
      }
    }
  }
  :global(.block-full-scale__listItemText span){
    font-weight: 700;
  }
  :global(.block-full-scale__title span){
    color: $redPrimary;

@include breakpoint-down('tabM') {
  display: block;
}
  }
</style>