<script lang="ts">
  import { t } from '$lib/translations';
  import img1 from '../../../assets/images/about-new/awards/img1.png';
  import logo1 from '../../../assets/images/about-new/awards/logo1.png';
  import img2 from '../../../assets/images/about-new/awards/img2.png';
  import logo2 from '../../../assets/images/about-new/awards/logo2.png';
  import img3 from '../../../assets/images/about-new/awards/img3.png';
  import logo3 from '../../../assets/images/about-new/awards/logo3.png';
  import img4 from '../../../assets/images/about-new/awards/img4.png';
  import logo4 from '../../../assets/images/about-new/awards/logo4.png';
  import img5 from '../../../assets/images/about-new/awards/img5.png';
  import logo5 from '../../../assets/images/about-new/awards/logo5.png';
</script>

<div class="block-awards">
  <div class="container">
    <h2 class="block-awards__header">5 International awards</h2>
    <div class="block-awards__wrapper">
      <div class="block-awards__desc">
        <div class="block-awards__desc-badge">Trusted Globally</div>
        <div class="block-awards__desc-text">Our solutions are globally trusted and recognized in the industry. Check our awards – proof of our hard work and innovation. </div>
      </div>
      <div class="block-awards__blocks">
        <div class="block-awards__block">
          <div class="block-awards__block-img" style="background-image: url({img1})"></div>
          <div class="block-awards__block-info">
            <img class="block-awards__block-logo" src={logo1} alt="Investing in the web logo" />
            <div class="block-awards__block-year">2026</div>
            <div class="block-awards__block-name">Best White Label Brokerage Provider</div>
          </div>
        </div>
        <div class="block-awards__block">
          <div class="block-awards__block-img" style="background-image: url({img2})"></div>
          <div class="block-awards__block-info">
            <img class="block-awards__block-logo" src={logo2} alt="Finextra logo" />
            <div class="block-awards__block-year">2026</div>
            <div class="block-awards__block-name">Best White Label Brokerage Provider</div>
          </div>
        </div>
        <div class="block-awards__block">
          <div class="block-awards__block-img" style="background-image: url({img3})"></div>
          <div class="block-awards__block-info">
            <img class="block-awards__block-logo" src={logo3} alt="Finance magnates logo" />
            <div class="block-awards__block-year">2025</div>
            <div class="block-awards__block-name">Best White Label Solution for Brokers</div>
          </div>
        </div>
        <div class="block-awards__block">
          <div class="block-awards__block-img" style="background-image: url({img4})"></div>
          <div class="block-awards__block-info">
            <img class="block-awards__block-logo" src={logo4} alt="Fxstreet logo" />
            <div class="block-awards__block-year">2025</div>
            <div class="block-awards__block-name">Best Provider for Brokers</div>
          </div>
        </div>
        <div class="block-awards__block">
          <div class="block-awards__block-img" style="background-image: url({img5})"></div>
          <div class="block-awards__block-info">
            <img class="block-awards__block-logo" src={logo5} alt="Global Forex Awards logo" />
            <div class="block-awards__block-year">2026</div>
            <div class="block-awards__block-name">Best White Label Forex Broker</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

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

  .block-awards {
    padding: 80px 0;
    background-color: #F2F5F7;

    .container {
      @include breakpoint-down('deskM') {
        max-width: 1286px;
      }

      @include breakpoint-down('tabL') {
        padding: 0 32px;
      }

      @include breakpoint-down('tabS') {
        padding: 0 24px;
      }
    }

    &__header {
      max-width: 500px;
      font-size: 64px;
      line-height: 72px;
      font-weight: 400;
      letter-spacing: -0.5px;
    }

    &__wrapper {
      display: flex;
      justify-content: space-between;
      gap: 24px;
      margin-top: 52px;
    }

    &__desc {
      width: 427px;
      display: flex;
      flex-direction: column;
      gap: 33px;
      flex-shrink: 0;

      &-badge {
        width: max-content;
        font-size: 16px;
        line-height: 20px;
        color: $textTertiaryDefault;
        padding: 6px 16px;
        border: 1px solid $fillQuaternaryDefault;
        border-radius: 48px;
      }

      &-text {
        width: 370px;
        font-size: 16px;
        line-height: 24px;
        letter-spacing: -0.1px;
      }
    }

    &__blocks {
      display: flex;
      flex-wrap: wrap;
      gap: 24px;
      position: relative;
    }

    &__block {
      width: calc(50% - 12px);
      height: 140px;
      flex-shrink: 0;
      background-color: #F9FBFC;
      border-radius: 24px;
      padding: 5px;
      display: flex;
      position: relative;

      &-img {
        width: 130px;
        height: 130px;
        flex-shrink: 0;
      }

      &-info {
        padding: 17px 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }

      &-logo {
        width: inherit;
        height: inherit;
        object-fit: contain;
        position: absolute;
        top: 26px;
        right: 23px;
      }

      &-year {
        font-size: 14px;
        line-height: 20px;
        color: $textQuaternaryDefault;
      }

      &-name {
        max-width: 164px;
        font-size: 16px;
        line-height: 20px;
      }
    }
  }

  .block-awards {
    @include breakpoint-down('deskM') {}
    @include breakpoint-down('deskS') {}
    @include breakpoint-down('tabL') {}
    @include breakpoint-down('tabS') {}
    @include breakpoint-down('mobL') {}
    @include breakpoint-down('mobM') {}
  }
</style>