<script lang="ts">
  import { t } from '$lib/translations';
  import best from '../../../assets/images/turnkey-solution/best.png';
  import bestMobile from '../../../assets/images/turnkey-solution/bestMobile.png';
  import Ufawards from '../Ufawards.svelte';
</script>

<div class="block-best">
  <div class="container">
    <div class="block-best__wrapper">
      <picture>
        <source srcset={bestMobile} media="(max-width: 767px)">
        <img src={best} alt="" class="block-best__img" loading="lazy" />
      </picture>
      <div class="block-best__content">
        <p class="block-best__title">{$t('turnkey-solution.The Best All-in-One Brokerage Solution 2023')}</p>
        <Ufawards />
      </div>
      <p class="block-best__text">
        {@html $t('turnkey-solution.We take pride in being acknowledged for our innovative solutions and dedication to excellence. In 2023, we were honoured with the prestigious "Best All-in-One Brokerage Solution" award, a testament to the exceptional quality of our products.')}
      </p>
    </div>
  </div>
</div>

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

  .block-best {
    .container {
      @include breakpoint-down('deskS') {
        padding: 0;
      }
    }

    &__wrapper {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: radial-gradient(24.08% 50% at 50% 50%, #ffffff 63.54%, #f2f6f9 100%);
      width: 100%;
      padding: 275px 120px;
      border-radius: 16px;
      position: relative;

      @include breakpoint-down('deskL') {
        padding: 110px 96px 120px;
      }

      @include breakpoint-down('deskS') {
        padding: 82px 40px 82px 276px;
        flex-wrap: wrap;
      }

      @include breakpoint-down('tabM') {
        padding: 70px 20px 79px;
      }
    }

    picture {
      position: absolute;
      top: 86px;
      left: 50%;
      transform: translateX(-50%);
      bottom: 86px;
      width: auto;

      @include breakpoint-down('deskL') {
        top: 18px;
        bottom: 18px;
        height: calc(100% - 36px);
      }

      @include breakpoint-down('deskS') {
        height: fit-content;
        width: 102px;
        left: 96px;
        top: 50%;
        transform: translateY(-50%);
      }

      @include breakpoint-down('tabM') {
        position: unset;
        transform: none;
        margin-inline: auto;
        margin-bottom: 69px;
      }

      img {
        width: inherit;
        height: inherit;
      }
    }

    &__content {
      width: 440px;

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

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

    &__title {
      @include titleL;

      color: $techBluePrimary;
      margin-bottom: 24px;

      @include breakpoint-down('tabM') {
        text-align: center;
        margin-bottom: 16px;
      }
    }

    &__text {
      width: 440px;
      color: $techBluePrimary;

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

      @include breakpoint-down('deskS') {
        width: 100%;
      }

      @include breakpoint-down('tabM') {
        text-align: center;
      }

      > span {
        @include baseCTA;
      }
    }

    & :global(.logo-ufawards) {
      @include breakpoint-down('tabM') {
        margin-inline: auto;
      }
    }
    & :global(.block-best__text span) {
      @include baseCTA;
    }
  }
</style>