<script lang="ts">
  import img1 from '../../../assets/images/trading-platform/why/secure2.svg';
  import img2 from '../../../assets/images/trading-platform/why/fast2.svg';
  import img3 from '../../../assets/images/trading-platform/why/stable2.svg';
  import img4 from '../../../assets/images/trading-platform/why/ready-to-go2.svg';
  import Button from '../../button/Button.svelte';
  import { popupForm } from '../../../store.js';
  import { t } from '$lib/translations';
</script>

<div class="block-why">
  <div class="container">
    <div class="block-why__wrapper">
      <div class="block-why__text">
        <p class="block-why__title">{$t('trading-platform.Why Quadcode?')}</p>
        <p class="block-why__description">{$t('trading-platform.Because starting your brokerage business has never been easier!')}</p>
        <Button text={$t('trading-platform.Get in touch')} className="block-why__button" onClick={() => popupForm.set(true)} />
      </div>
      <div class="block-why__grid">
        <div class="block-why__gridItem">
          <div class="block-why__gridItemIcon">
            <img src={img1} alt="" loading="lazy" />
          </div>
          <div class="block-why__gridItemTextBlock">
            <p class="block-why__gridItemTitle">{$t('trading-platform.Secure')}</p>
            <p class="block-why__gridItemText">{$t('trading-platform.We safeguard your traders from both internal and external threats.')}</p>
          </div>
        </div>
        <div class="block-why__gridItem">
          <div class="block-why__gridItemIcon">
            <img src={img2} alt="" loading="lazy" />
          </div>
          <div class="block-why__gridItemTextBlock">
            <p class="block-why__gridItemTitle">{$t('trading-platform.Fast')}</p>
            <p class="block-why__gridItemText">{$t('trading-platform.Empower your trading platform with ultra-fast execution')}</p>
          </div>
        </div>
        <div class="block-why__gridItem">
          <div class="block-why__gridItemIcon">
            <img src={img3} alt="" loading="lazy" />
          </div>
          <div class="block-why__gridItemTextBlock">
            <p class="block-why__gridItemTitle">{$t('trading-platform.Stable')}</p>
            <p class="block-why__gridItemText">{$t('trading-platform.Quadcode Brokerage Solution uptime is 99%')}</p>
          </div>
        </div>
        <div class="block-why__gridItem">
          <div class="block-why__gridItemIcon">
            <img src={img4} alt="" loading="lazy" />
          </div>
          <div class="block-why__gridItemTextBlock">
            <p class="block-why__gridItemTitle">{$t('trading-platform.Ready-to-go')}</p>
            <p class="block-why__gridItemText">{$t('trading-platform.Expertly designed product architecture')}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

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

  .block-why {
    padding: 294px 0;
    position: relative;
    background-image: url("../../../assets/images/trading-platform/why/patternBg2.png");
    @include breakpoint-down('deskL') {
      padding-top: 46px;
      padding-bottom: 46px;
    }

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

    @include breakpoint-down('tabM') {
      padding-top: 42px;
      padding-bottom: 55px;
    }
    &::before {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: url("../../../assets/images/trading-platform/why/whyBg.png");
      background-position: center;
      background-size: 100%;
      background-repeat: no-repeat;

      @include breakpoint-down('tabM') {
        background-image: url("../../../assets/images/trading-platform/why/whyBgMob.png");
      }
    }
    .container {
      width: 1248px;
      @include breakpoint-down('deskL') {
        width: 934px;
      }
      @include breakpoint-down('deskS') {
        padding: 0 74px;
      }
      @include breakpoint-down('tabM') {
        padding: 0 20px;
      }
    }

    &__wrapper {
      display: flex;
      justify-content: space-between;
      @include breakpoint-down('deskL') {
        gap: 199px;
      }
      @include breakpoint-down('tabL') {
        gap: 0px;
      }
      @include breakpoint-down('tabM') {
        flex-direction: column;
        gap: 21px;
      }
    }

    &__text {
      min-width: 469px;
      display: flex;
      flex-direction: column;
      justify-content: start;

      @include breakpoint-down('deskL') {
        min-width: 272px;
        justify-content: center;
      }
      @include breakpoint-down('deskS') {
        min-width: 250px;
      }
      @include breakpoint-down('tabM') {
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        align-items: center;
      }
    }
    &__title {
      @include titleBlock;
      margin-bottom: 18px;


      @include breakpoint-down('deskS') {
        margin-bottom: 12px;
      }
      @include breakpoint-down('tabM') {
        width: 68%;
        text-align: center;
        margin-bottom: 14px;
      }
    }
    &__description {
      @include text;
      margin-bottom: 30px;
      width: 400px;
      @include breakpoint-down('deskL') {
        width: 301px;
      }
      @include breakpoint-down('deskS') {
        margin-bottom: 20px;
        width: 210px;
      }
      @include breakpoint-down('tabM') {
        text-align: center;
        margin-bottom: 17px;
        width: 71%;
      }
    }

    &__grid {
      display: flex;
      align-items: flex-start;
      flex-wrap: wrap;
      gap: 0 12px;

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

      @include breakpoint-down('deskS') {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
      }

      @include breakpoint-down('tabM') {
        gap: 12px;

      }
    }

    &__gridItem {
      width: 373px;
      display: flex;
      gap: 12px;
      padding: 26px 55px 26px 33px;
      align-items: center;
      color: $techWhite;
      border: 2px solid transparent;
      border-radius: 20px;
      background: linear-gradient(#1d2639, #1d2639 0) padding-box, linear-gradient(125.13deg, #F96C6E 22.41%, rgba(255, 164, 165, 0.42) 80.51%) border-box;

      @include breakpoint-down('deskL') {
        padding: 16px 55px 12px 29px;
      }

      @include breakpoint-down('deskS') {
        padding: 16px 55px 12px 17px;
      }

      @include breakpoint-down('tabM') {
        padding: 19px 55px 7px 17px;
      }
    }

    &__gridItemIcon {
      width: 90px;
      min-width: 90px;
      height: 90px;
    }

    &__gridItemTitle {
      @include heading3;

      margin-bottom: 4px;

      @include breakpoint-down('deskS') {
        margin-bottom: 4px;
        font-size: 18px;
        line-height: 19.8px;
      }
    }

    &__gridItemText {
      font-size: 16px;
      line-height: 20px;
      @include breakpoint-down('deskL') {
        font-size: 14px;
        line-height: 16.8px;
      }

      @include breakpoint-down('deskS') {
        font-size: 12px;
        line-height: 14.4px;
      }
    }

    & :global(.block-why__button) {
      @include heading2;

      min-width: 253px;
      padding: 21px 10px;

      @include breakpoint-down('deskL') {
        min-width: 173px;
        padding: 16px 10px;
      }
      @include breakpoint-down('deskS') {
        min-width: 115px;
        padding: 13px 10px;
      }
      @include breakpoint-down('tabM') {
        min-width: 100%;
      }
    }
  }
</style>