<script lang="ts">
  import img1 from '../../../assets/images/turnkey-solution/perfect/zoo.svg';
  import img2 from '../../../assets/images/turnkey-solution/perfect/brokers.svg';
  import img3 from '../../../assets/images/turnkey-solution/perfect/entrepreneurs.svg';
  import { t } from '$lib/translations';
</script>

<div class="block-perfect">
  <div class="container">
    <div class="block-perfect__wrapper">
      <p class="block-perfect__title">{$t('turnkey-solution.A perfect fit for')}</p>
      <div class="block-perfect__items">
        <div class="block-perfect__item">
          <div class="block-perfect__itemIcon">
            <img src={img1} alt="" loading="lazy" />
          </div>
          <p class="block-perfect__itemTitle">{$t('turnkey-solution.Entrepreneurs')}</p>
          <p class="block-perfect__itemText">
            {$t('turnkey-solution.Discover how our comprehensive all-in-one solution allows you to start your brokerage business from scratch in a matter of weeks.')}
          </p>
        </div>
        <div class="block-perfect__item">
          <div class="block-perfect__itemIcon">
            <img src={img2} alt="" loading="lazy" />
          </div>
          <p class="block-perfect__itemTitle">{$t('turnkey-solution.Professional traders')}</p>
          <p class="block-perfect__itemText">
            {$t('turnkey-solution.Unlock your full potential by embarking on the journey of launching your own trading platform')}
          </p>
        </div>
        <div class="block-perfect__item">
          <div class="block-perfect__itemIcon">
            <img src={img3} alt="" loading="lazy" />
          </div>
          <p class="block-perfect__itemTitle">{$t('turnkey-solution.Affiliates')}</p>
          <p class="block-perfect__itemText">
            {$t('turnkey-solution.Learn how our product can assist entrepreneurs in converting clients into profitable ventures, driving revenue growth and unlocking new opportunities.')}
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

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

  .block-perfect {
    background: $techBlue2;
    padding: 105px 0 175px 0;

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

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

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

    &__wrapper {
      width: 100%;
    }

    &__title {
      @include titleL;

      width: max-content;
      margin-inline: auto;
      margin-bottom: 77px;

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

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

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

    &__items {
      display: flex;
      gap: 41px;

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

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

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

    &__item {
      width: calc((100% - 41px * 2) / 3);
      box-shadow: 0 4px 10px 4px rgba(235, 240, 244, 1);
      background: $techWhite;
      padding: 40px 32px 37px 32px;
      border-radius: 16px;

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

      @include breakpoint-down('deskS') {
        width: calc((100% - 20px * 2) / 3);
        padding: 24px;
      }

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

    &__itemIcon {
      height: 80px;
      margin-bottom: 16px;

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

      > img {
        width: auto;
        height: 100%;
      }
    }

    &__itemTitle {
      @include titleM;

      color: $techBluePrimary;
      margin-bottom: 16px;
    }
  }
</style>