<script lang="ts">
  import img1 from '../../../assets/images/trading-platform/why/secure.svg';
  import img2 from '../../../assets/images/trading-platform/why/fast.svg';
  import img3 from '../../../assets/images/trading-platform/why/stable.svg';
  import img4 from '../../../assets/images/trading-platform/why/ready-to-go.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">
    <p class="block-why__title">{$t('trading-platform.Why Quadcode?')}</p>
    <div class="block-why__grid">
      <div class="block-why__gridItem">
        <div class="block-why__gridItemIcon">
          <img src={img1} alt="" loading="lazy" />
        </div>
        <p class="block-why__gridItemTitle">Secure</p>
        <p class="block-why__gridItemText">{$t('trading-platform.We safeguard your traders from both internal and external threats.')}</p>
      </div>
      <div class="block-why__gridItem">
        <div class="block-why__gridItemIcon">
          <img src={img2} alt="" loading="lazy" />
        </div>
        <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 class="block-why__gridItem">
        <div class="block-why__gridItemIcon">
          <img src={img3} alt="" loading="lazy" />
        </div>
        <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 class="block-why__gridItem">
        <div class="block-why__gridItemIcon">
          <img src={img4} alt="" loading="lazy" />
        </div>
        <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>
    <Button text={$t('trading-platform.Get in touch')} className="block-why__button" onClick={() => popupForm.set(true)} />
  </div>
</div>

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

  .block-why {
    padding: 160px 0;

    @include breakpoint-down('deskL') {
      padding-top: 120px;
      padding-bottom: 124px;
    }

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

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

    &__title {
      @include titleXL;

      text-align: center;
      margin-bottom: 40px;

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

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

    &__grid {
      display: flex;
      align-items: flex-start;
      gap: 40px;
      margin-bottom: 80px;

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

      @include breakpoint-down('deskS') {
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
        row-gap: 24px;
        margin-bottom: 64px;
      }

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

    &__gridItem {
      width: calc((100% - 40px * 3) / 4);
      display: flex;
      flex-direction: column;
      align-items: center;

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

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

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

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

      @include breakpoint-down('deskS') {
        width: 70px;
        min-width: 70px;
        height: 70px;
      }
    }

    &__gridItemTitle {
      @include baseTitle;

      color: $techBluePrimary;
      text-align: center;
      margin-bottom: 8px;

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

    &__gridItemText {
      @include smallDefault;

      color: $techBluePrimary;
      text-align: center;
    }

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

      min-width: 260px;
      margin-inline: auto;

      @include breakpoint-down('deskS') {
        min-width: 180px;
      }
    }
  }
</style>