<script lang="ts">
  import bestInClass from '../../../assets/images/prop-firm/bestInClass.webp';
  import bestInClass2x from '../../../assets/images/prop-firm/bestInClass2x.webp';
  import bestInClassDeskL from '../../../assets/images/prop-firm/bestInClassDeskL.webp';
  import bestInClassDeskL2x from '../../../assets/images/prop-firm/bestInClassDeskL2x.webp';
  import bestInClassTabL from '../../../assets/images/prop-firm/bestInClassTabL.webp';
  import bestInClassTabL2x from '../../../assets/images/prop-firm/bestInClassTabL2x.webp';
  import bestInClassMobile from '../../../assets/images/prop-firm/bestInClassMobile.webp';
  import bestInClassMoblie2x from '../../../assets/images/prop-firm/bestInClassMoblie2x.webp';
  import { t } from '$lib/translations';
</script>

<div class="bestInClass">
  <div class="container">
    <h2>{@html $t('prop-firm.Best-in-class UI/UX for your traders')}</h2>
    <picture>
      <source srcset="{bestInClassMobile} 1x, {bestInClassMoblie2x} 2x" media="(max-width: 767px)" >
      <source srcset="{bestInClassTabL} 1x, {bestInClassTabL2x} 2x" media="(max-width: 1024px)" >
      <source srcset="{bestInClassDeskL} 1x, {bestInClassDeskL2x} 2x" media="(max-width: 1799px)" >
      <img src="{bestInClass}" srcset="{bestInClass} 1x, {bestInClass2x} 2x" loading="lazy" alt="best in class">
    </picture>
  </div>
</div>

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

  .bestInClass {
    padding: 90px 0 72px 0;
    background: linear-gradient(180deg, #D9EAFF 0%, #F1FBFF 100%);

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

    @include breakpoint-down('tabL') {
      padding: 50px 0 42px 0;
    }

    @include breakpoint-down('tabM') {
      padding: 40px 0 35px 0;
    }

    .container {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 36px;

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

      @include breakpoint-down('tabL') {
        gap: 20px;
      }
      @include breakpoint-down('tabM') {
        gap: 16px;
      }
    }

    h2 {
      text-align: center;
      @include H1;
      @include breakpoint-down('tabM') {
        width: 315px;
      }
    }

    img {
      width: 1400px;
      height: 100%;

      @include breakpoint-down('deskL') {
        width: 1062px;
      }

      @include breakpoint-down('tabL') {
        width: 598px;
      }
      @include breakpoint-down('tabM') {
        width: 359px;
      }
    }
    :global(h2 span) {
      color: $redPrimary;
    }
 }
</style>