<script lang="ts">
  import { t } from '$lib/translations';
  import img1 from '../../../assets/images/trading-platform/integrations/API.webp';
  import img2 from '../../../assets/images/trading-platform/integrations/IFrame.webp';
</script>

<div class="block-integrations">
  <div class="container">
    <div class="block-integrations__wrapper">
      <div class="block-integrations__item">
        <img src={img1} alt="" class="block-integrations__itemBg" loading="lazy" />
        <div class="block-integrations__itemContent">
          <p class="block-integrations__itemTitle">{$t('trading-platform.API integrations')}</p>
          <p class="block-integrations__itemText">{$t("Plug our widgets' data into your system in just a click")}</p>
        </div>
      </div>
      <div class="block-integrations__item">
        <img src={img2} alt="" class="block-integrations__itemBg" loading="lazy" />
        <div class="block-integrations__itemContent">
          <p class="block-integrations__itemTitle">{$t('trading-platform.iFrame')}</p>
          <p class="block-integrations__itemText">
            {$t('trading-platform.Effortlessly integrate Quadcode traderoom into your product line-up')}
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

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

  .block-integrations {
    padding: 99px 0;
    background: $techBlue2;

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

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

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

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

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

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

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

    &__item {
      width: calc((100% - 40px) / 2);
      overflow: hidden;
      position: relative;

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

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

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

      &:after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 50%;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 59.37%);
        border-radius: 0 0 8px 8px;
      }

      &:last-of-type {
        .block-integrations__itemContent {
          @include breakpoint-down('deskL') {
            bottom: 32px;
          }

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

    &__itemBg {
      border-radius: 16px;
      background: $techGrey;

      @include breakpoint-down('deskS') {
        min-height: 400px;
        object-fit: cover;
        object-position: left;
        border-radius: 8px;
      }

      @include breakpoint-down('tabM') {
        min-height: 328px;
      }
    }

    &__itemContent {
      position: absolute;
      z-index: 1;
      bottom: 56px;
      left: 80px;
      max-width: 360px;

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

      @include breakpoint-down('deskS') {
        left: 39px;
        bottom: 50px;
        max-width: 255px;
      }

      @include breakpoint-down('tabM') {
        bottom: 24px !important;
        left: 31px;
      }
    }

    &__itemTitle {
      @include titleL;

      margin-bottom: 8px;

      @include breakpoint-down('deskS') {
        margin-bottom: 4px;
      }
    }
  }
</style>