<script lang="ts">
  import { onMount } from 'svelte';
  import global from '../../../assets/images/white-label-broker/markets/global.svg';
  import quick from '../../../assets/images/white-label-broker/markets/quick.svg';
  import markets from '../../../assets/images/white-label-broker/markets/markets.svg';
  import { t } from '$lib/translations';
</script>

<div class="block-markets">
  <div class="container">
    <div class="block-markets__animation">
      <div id="block-markets__container_animation">
        <canvas id="block-markets__canvas" width="1400" height="816" />
        <div id="block-markets__dom_overlay_container" />
      </div>
      <div class="block-markets__content">
        <p class="block-markets__title">{@html $t('white-label-broker.Full access to markets')}</p>
        <p class="block-markets__text">{$t('white-label-broker.Provide your customers with full access to markets')}</p>
        <div class="block-markets__list">
          <div class="block-markets__listItem">
            <img src={global} alt="" class="block-markets__listItemIcon" />
            <div class="block-markets__listItemText">
              {@html $t('white-label-broker.All global markets')} <br />
              {@html $t('white-label-broker.in one place')}
            </div>
          </div>
          <div class="block-markets__listItem">
            <img src={quick} alt="" class="block-markets__listItemIcon" />
            <div class="block-markets__listItemText">{$t('white-label-broker.Ultra-fast execution')}</div>
          </div>
          <div class="block-markets__listItem">
            <img src={markets} alt="" class="block-markets__listItemIcon" />
            <div class="block-markets__listItemText">{$t('white-label-broker.Deep liquidity')}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

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

  #block-markets__container_animation {
    background-color: transparent;
    width: 100% !important;
    height: auto !important;
  }

  #block-markets__canvas {
    width: 100% !important;
    height: auto !important;
    position: relative;
    display: block;
    background-color: transparent;

    @include breakpoint-down('tabM') {
      width: auto !important;
      height: 644px !important;
      left: 50%;
      transform: translateX(-50%);
    }
  }

  #block-markets__dom_overlay_container {
    pointer-events: none;
    overflow: hidden;
    width: 100% !important;
    height: auto !important;
    position: absolute;
    left: 0;
    top: 0;
    display: block;
  }

  .block-markets {
    background: $techBlue2;

    &__animation {
      position: relative;
    }

    &__content {
      position: absolute;
      width: 100%;
      max-width: 679px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);

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

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

    &__title {
      @include titleXL;

      margin-bottom: 24px;
      text-align: center;

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

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

      span {
        color: $redPrimary;
      }
    }

    &__text {
      text-align: center;
      margin-bottom: 64px;

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

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

    &__list {
      display: flex;
      align-items: flex-start;
      gap: 40px;

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

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

    &__listItem {
      flex: 1;

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

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

    &__listItemText {
      @include smallCTA;

      text-align: center;
    }
  }

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