<script lang="ts">
  import image1 from '../../../assets/images/white-label-broker/solution/solution1.png';
  import image2 from '../../../assets/images/white-label-broker/solution/solution2.png';
  import { t } from '$lib/translations';
</script>

<div class="block-solution">
  <div class="container">
    <p class="block-solution__title">{@html $t('white-label-broker.Universal and all-inclusive solution for brokerage business')}</p>
    <p class="block-solution__text">{$t('white-label-broker.Launch a trading platform with a smooth and seamless trading experience')}</p>
    <div class="block-solution__grid">
      <div class="block-solution__gridItem">
        <div class="block-solution__card">
          <div class="block-solution__cardHeader">
            <img src={image1} alt="" class="block-solution__cardImage" loading="lazy" />
          </div>
          <div class="block-solution__cardBody">
            <p class="block-solution__cardTitle">
              {$t('white-label-broker.Access to 100+ PSPs')}<br/>
              {$t('white-label-broker.out of the box')}
            </p>
            <p class="block-solution__cardText">
              {$t('white-label-broker.Obtain everything with our billing system, which is crafted to be flexible and hassle-free')}
            </p>
          </div>
        </div>
      </div>
      <div class="block-solution__gridItem">
        <div class="block-solution__card">
          <div class="block-solution__cardHeader">
            <img src={image2} alt="" class="block-solution__cardImage" loading="lazy" />
          </div>
          <div class="block-solution__cardBody">
            <p class="block-solution__cardTitle">{$t('white-label-broker.Pre-connected top-tier liquidity providers')}</p>
            <p class="block-solution__cardText">
              {$t('white-label-broker.Harness the full potential of the pre-integrated upper echelon liquidity providers')}
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

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

  .block-solution {
    padding: 100px 0 162px;
    background: linear-gradient(0deg, #101318 0%, #1e232a 100%);

    @include breakpoint-down('deskL') {
      padding: 139px 0;
    }

    @include breakpoint-down('deskS') {
      padding: 77px 0;
    }

    @include breakpoint-down('tabM') {
      padding-top: 46px;
      padding-bottom: 61px;
    }

    &__title {
      @include titleXL;

      width: 100%;
      max-width: 920px;
      margin-inline: auto;
      text-align: center;
      color: $techWhite;
      margin-bottom: 24px;

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

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

      span {
        color: $redPrimary;
      }
    }

    &__text {
      width: 100%;
      max-width: 920px;
      margin-inline: auto;
      text-align: center;
      color: $techWhite;
      margin-bottom: 64px;

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

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

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

    &__grid {
      display: flex;
      width: 100%;
      max-width: 1160px;
      margin-inline: auto;
      gap: 40px;

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

      @include breakpoint-down('deskS') {
        gap: 40px;
      }

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

    &__gridItem {
      width: calc((100% - 40px) / 2);

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

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

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

    &__card {
      width: 100%;
      height: 100%;
      border-radius: 16px;
      background: linear-gradient(180deg, rgba(248, 251, 253, 0.1) 0%, rgba(248, 251, 253, 0.02) 100%);
      backdrop-filter: blur(20px);
      overflow: hidden;
    }

    &__cardHeader {
      height: 330px;

      @include breakpoint-down('deskL') {
        height: 261px;
      }

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

    &__cardImage {
      height: 100%;
      object-fit: cover;
      object-position: center;
    }

    &__cardBody {
      padding: 58px 85px 58px 40px;

      @include breakpoint-down('deskL') {
        padding: 42px 40px;
      }

      @include breakpoint-down('deskS') {
        padding: 29px 24px;
      }
    }

    &__cardTitle {
      @include titleM;

      color: $techWhite;
      margin-bottom: 16px;

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

    &__cardText {
      color: $techWhite;
    }
  }
  :global(.block-solution__title span) {
    color: $redPrimary;
  }
</style>