<script lang="ts">
  import { t, locale, defaultLocale } from '$lib/translations';
  import graphics from '../../../assets/images/prop-firm/graphics.webp';
  import graphicsTablet from '../../../assets/images/prop-firm/graphicsTablet.webp';
  import graphicsMobile from '../../../assets/images/prop-firm/graphicsMobile.webp';
</script>

<section class={`back-office ${$locale !== defaultLocale ? 'lang': ''} ${$locale}`}>
  <div class="container">
    <h2 class="back-office__title"><span>{$t('prop-firm.Unrivalled back-office')}</span><br /> {$t('prop-firm.for your prop trading business')}</h2>
    <div class="back-office__graphic">
      <div class="back-office__rows">
        <div class="back-office__row">
          <div class="back-office__textBlock">
            <div class="back-office__textBlockTitle">{$t('prop-firm.Contests and leaderboard')}</div>
            <div class="back-office__textBlockDescription">{$t('prop-firm.Create custom trading tournaments, establish leaderboards, and closely monitor the performance of traders.')}</div>
          </div>
          <div class="back-office__textBlock">
            <div class="back-office__textBlockTitle">{$t('prop-firm.Trading overview')}</div>
            <div class="back-office__textBlockDescription">{$t('prop-firm.Grant your clients the ability to review their trading activity and analyze essential metrics within the platform.')}</div>
          </div>
          <div class="back-office__textBlock">
            <div class="back-office__textBlockTitle">{$t('prop-firm.Notifications')}</div>
            <div class="back-office__textBlockDescription">{$t('prop-firm.Boost user engagement through a comprehensive notification system that offers a wide range of interaction options.')}</div>
          </div>
        </div>
        <div class="back-office__row">
          <div class="back-office__textBlock">
            <div class="back-office__textBlockTitle">{$t('prop-firm.Education')}</div>
            <div class="back-office__textBlockDescription">{$t('prop-firm.Enhance your customer lifetime value by providing educational resources and materials to your clients.')}</div>
          </div>
          <div class="back-office__textBlock">
            <div class="back-office__textBlockTitle">{$t('prop-firm.Certificates')}</div>
            <div class="back-office__textBlockDescription">{$t("prop-firm.Recognize your traders' achievements by awarding them certificates to highlight their success.")}</div>
          </div>
          <div class="back-office__textBlock">
            <div class="back-office__textBlockTitle">{$t('prop-firm.Account overview')}</div>
            <div class="back-office__textBlockDescription">{$t('prop-firm.Explore a highly customizable account overview dashboard with a cutting-edge user interface.')}</div>
          </div>
        </div>
      </div>
      <picture >
        <source srcset={graphicsMobile} media="(max-width: 765px)" >
        <source srcset={graphicsTablet} media="(max-width: 1024px)" >
        <img src={graphics} alt="" class="back-office__image" loading="eager">
      </picture>
    </div>
  </div>
</section>

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

  .back-office {
    padding: 90px 0;
    overflow: hidden;
    background: $techBlue1;

    @include breakpoint-down('deskL') {
      padding: 60px 0 93px 0;
    }
    @include breakpoint-down('tabL') {
      padding: 50px 0;
    }
    @include breakpoint-down('tabM') {
      padding: 40px 0 46px 0;
    }

    .container {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 60px;

      @include breakpoint-down('deskL') {
        gap: 70px;
      }
      @include breakpoint-down('tabL') {
        gap: 30px;
      }
      @include breakpoint-down('tabM') {
        gap: 19px;
      }
    }

    &__title {
      @include H1;
      text-align: center;
      width: 1200px;

      @include breakpoint-down('tabM') {
        width: 311px;
      }

      span {
        color: $redPrimary;
      }
    }

    &__rows {
      display: flex;
      flex-direction: column;
      gap: 331px;
      @include breakpoint-down('deskL') {
        gap: 310px;
      }
      @include breakpoint-down('tabL') {
        gap: 271px;
      }
      @include breakpoint-down('tabM') {
        gap: 286px;
      }
    }
    &__graphic {
      position: relative;
      margin-left: 20px;
      z-index: 1;

      @include breakpoint-down('deskL') {
        margin: 0;
      }
    }
    &__image {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      width: 1178px;
      height: 505px;
      z-index: -1;

      @include breakpoint-down('deskL') {
        width: 932.89px;
        height: 417.11px;
      }
      @include breakpoint-down('tabL') {
        width: 599.34px;
        height: 256.93px;
      }
      @include breakpoint-down('tabM') {
        width: 339px;
        height: 859px;
        top: 25px;
        left: -60px;
      }
    }
    &__row {
      display: flex;
      justify-content: center;
      gap: 40px;
      @include breakpoint-down('deskL') {
        gap: 90px;
      }
      @include breakpoint-down('tabL') {
        gap: 12px;
        align-items: center;
      }
      @include breakpoint-down('tabM') {
        flex-direction: column;
        gap: 30px
      }
    }
    &__textBlock {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 12px;
      width: 410px;

      @include breakpoint-down('deskL') {
        width: 277px;
        gap: 8px;
      }

      @include breakpoint-down('tabL') {
        width: 217px;
      }
    }
    &__textBlockTitle {
      @include H3;

      @include breakpoint-down('deskL') {
        @include H2;
        text-wrap: nowrap;
      }
    }
    &__textBlockDescription {
      @include subtext;
      width: 312px;

      @include breakpoint-down('deskL') {
        width: 277px;
      }
      @include breakpoint-down('tabL') {
        @include table;
        font-weight: 400;
        width: 161px;
      }
    }

    &.lang {
      .back-office__title {
        @include breakpoint-down('tabM') {
          width: 320px;
        }
      }
      .back-office__textBlock {
        @include breakpoint-down('tabM') {
          width: 200px;
        }
      }
      .back-office__image {
        @include breakpoint-down('tabM') {
          top: 52px;
          left: -74px;
        }
      }
      .back-office__textBlockTitle {
        @include breakpoint-down('tabL') {
          width: 194px;
          text-wrap: wrap;
        }
        @include breakpoint-down('tabM') {
          width: 100%;
        }
      }
      .back-office__textBlockDescription {
        width: 322px;

        @include breakpoint-down('tabL') {
          width: 210px;
        }
        @include breakpoint-down('tabM') {
          width: 100%;
        }
      }

      &.ru {
        .back-office__rows {
          gap: 343px;
        }
        .back-office__image {
          @include breakpoint-down('tabM') {
            top: 5px;
            left: -74px;
          }
        }
      }
      &.th {
        .back-office__rows {
          @include breakpoint-down('tabM') {
            gap: 358px;
          }
        }
        .back-office__image {
          @include breakpoint-down('tabM') {
            top: -6px;
            left: -74px;
          }
        }
      }
      &.vi {
        .back-office__rows {
          @include breakpoint-down('tabM') {
            gap: 360px;
          }
        }
        .back-office__image {
          @include breakpoint-down('tabM') {
            top: -15px;
            left: -74px;
          }
        }

      }
    }
  }

</style>