<script lang="ts">
  import { t } from '$lib/translations';
  import close from '../../../assets/images/trading-platform/close.svg';
  import stick from '../../../assets/images/trading-platform/stick.svg';

  const tableOne = {
    header: [{ title: $t('trading-platform.Features') }, { title: $t('trading-platform.Quadcode Solution') }, { title: $t('trading-platform.Solution from scratch') }],
    content: [
      { title: $t('trading-platform.Liquidity providers'), colOne: { image: stick }, colTwo: { image: close } },
      {
        title: $t('trading-platform.Cross-platform trading solution (Web, Desktop, Android, iOS)'),
        colOne: { image: stick },
        colTwo: { image: close },
      },
      { title: $t('trading-platform.CRM system'), colOne: { image: stick }, colTwo: { image: close } },
      { title: $t('trading-platform.PSPs'), colOne: { image: stick }, colTwo: { image: close } },
      { title: $t('trading-platform.KYC Providers'), colOne: { image: stick }, colTwo: { image: close } },
      { title: $t('trading-platform.Risk Management'), colOne: { image: stick }, colTwo: { image: close } },
      { title: $t('trading-platform.Legal services'), colOne: { image: stick }, colTwo: { image: close } },
      { title: $t('trading-platform.Billing module'), colOne: { image: stick }, colTwo: { image: close } },
      { title: $t('trading-platform.AML'), colOne: { image: stick }, colTwo: { image: close } },
    ],
  };

  const tableTwo = {
    header: [{ title: $t('trading-platform.Features') }, { title: $t('trading-platform.Quadcode Solution') }, { title: $t('trading-platform.Solution from scratch') }],
    content: [
      { title: $t('trading-platform.Infrastructure'), colOne: { image: stick }, colTwo: { image: close } },
      { title: $t('trading-platform.Talent costs'), colOne: { image: stick }, colTwo: { image: close } },
      { title: $t('trading-platform.Talent training'), colOne: { text: $t('trading-platform.Optional') }, colTwo: { image: close } },
      {
        title: $t('trading-platform.Time to market'),
        colOne: { text: $t('trading-platform.from 2 weeks') },
        colTwo: { text: $t('trading-platform.from 6 months') },
      },
      { title: $t('trading-platform.Setup costs'), colOne: { text: $t('trading-platform.from $20k') }, colTwo: { text: $t('trading-platform.from $150k') } },
      { title: $t('trading-platform.Forex'), colOne: { text: $t('trading-platform.65+') }, colTwo: { image: close } },
      { title: $t('trading-platform.Crypto'), colOne: { text: $t('trading-platform.45+') }, colTwo: { image: close } },
      { title: $t('trading-platform.Indices'), colOne: { text: $t('trading-platform.12+') }, colTwo: { image: close } },
      { title: $t('trading-platform.Stocks'), colOne: { text: $t('trading-platform.200+') }, colTwo: { image: close } },
      { title: $t('trading-platform.Commodities'), colOne: { text: $t('trading-platform.6+') }, colTwo: { image: close } },
      { title: $t('trading-platform.Metals'), colOne: { text: $t('trading-platform.4+') }, colTwo: { image: close } },
      { title: $t('trading-platform.ETFs'), colOne: { text: $t('trading-platform.23+') }, colTwo: { image: close } },
    ],
  };
</script>

<div class="block-compare">
  <div class="container">
    <div class="block-compare__wrapper">
      <div class="block-compare__table">
        <div class="block-compare__tableHeader">
          {#each tableOne.header as header}
            <div class="block-compare__tableCol">{header.title}</div>
          {/each}
        </div>
        <div class="block-compare__tableContent">
          {#each tableOne.content as content}
            <div class="block-compare__tableContentRow">
              <div class="block-compare__tableCol">{@html content.title}</div>
              <div class="block-compare__tableCol">
                {#if content.colOne?.image}
                  <img src={content.colOne?.image} alt="" loading="lazy" />
                {/if}
              </div>
              <div class="block-compare__tableCol">
                {#if content.colTwo?.image}
                  <img src={content.colTwo?.image} alt="" loading="lazy" />
                {/if}
              </div>
            </div>
          {/each}
        </div>
      </div>
      <div class="block-compare__table">
        <div class="block-compare__tableHeader">
          {#each tableTwo.header as header}
            <div class="block-compare__tableCol">{header.title}</div>
          {/each}
        </div>
        <div class="block-compare__tableContent">
          {#each tableTwo.content as content}
            <div class="block-compare__tableContentRow">
              <div class="block-compare__tableCol">{@html content.title}</div>
              <div class="block-compare__tableCol">
                {#if content.colOne?.image}
                  <img src={content.colOne?.image} alt="" loading="lazy" />
                {/if}
                {#if content.colOne?.text}
                  {content.colOne?.text}
                {/if}
              </div>
              <div class="block-compare__tableCol">
                {#if content.colTwo?.image}
                  <img src={content.colTwo?.image} alt="" loading="lazy" />
                {/if}
                {#if content.colTwo?.text}
                  {content.colTwo?.text}
                {/if}
              </div>
            </div>
          {/each}
        </div>
      </div>
    </div>
  </div>
</div>

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

  .block-compare {
    padding: 101px 0;
    background: $techBlue2;

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

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

    &__wrapper {
      display: flex;
      justify-content: center;
      gap: 40px;

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

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

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

    &__table {
      width: calc((100% - 40px) / 2);
      max-width: 560px;
      padding-top: 23px;
      padding-bottom: 17px;
      background: $techWhite;
      border-radius: 16px;

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

      @include breakpoint-down('deskS') {
        width: calc((100% - 20px) / 2);
        padding-top: 7px;
        border-radius: 8px;
      }

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

      &:first-of-type {
        @include breakpoint-down('tabM') {
          padding-bottom: 0;
          border-radius: 16px 16px 0 0;
        }
      }

      &:last-of-type {
        @include breakpoint-down('tabM') {
          padding-top: 0;
          border-radius: 0 0 16px 16px;
        }
        .block-compare__tableHeader {
          @include breakpoint-down('tabM') {
            display: none;
          }
        }
      }
    }

    &__tableHeader {
      display: flex;
      align-items: center;
      border-bottom: 1px solid rgba(242, 246, 249, 1);

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

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

      .block-compare__tableCol {
        @include smallCTA;
      }
    }

    &__tableContent {
    }

    &__tableContentRow {
      display: flex;
      align-items: center;

      .block-compare__tableCol {
        @include smallDefault;

        &:nth-child(1) {
          @include breakpoint-down('deskL') {
            padding: 8px 0 8px 40px;
          }

          @include breakpoint-down('deskS') {
            padding-left: 24px;
          }
        }

        &:nth-child(2) {
          @include breakpoint-down('deskL') {
            padding: 8px 24px;
          }

          @include breakpoint-down('deskS') {
            padding-right: 8px;
            padding-left: 8px;
          }
        }

        &:nth-child(3) {
          @include breakpoint-down('deskL') {
            padding: 8px 40px 8px 8px;
          }

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

    &__tableCol {
      &:nth-child(1) {
        width: 242px;
        padding: 16px 0 16px 40px;

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

        @include breakpoint-down('deskS') {
          width: 130px;
        }

        @include breakpoint-down('tabM') {
          flex: 1.15;
        }
      }

      &:nth-child(2) {
        width: 159px;
        padding: 16px 24px 16px 24px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;

        @include breakpoint-down('deskL') {
          width: 151px;
          padding: 12px 24px;
        }

        @include breakpoint-down('deskS') {
          width: 102px;
          padding-left: 8px;
          padding-right: 8px;
        }

        @include breakpoint-down('tabM') {
          flex: 0.9;
        }
      }

      &:nth-child(3) {
        width: 159px;
        padding: 16px 40px 16px 8px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;

        @include breakpoint-down('deskL') {
          width: 151px;
          padding: 12px 40px 12px 8px;
        }

        @include breakpoint-down('deskS') {
          width: 102px;
          padding-right: 16px;
          padding-left: 16px;
        }

        @include breakpoint-down('tabM') {
          flex: 0.9;
        }
      }

      & :global(br) {
        @include breakpoint-down('deskL') {
          display: none;
        }
      }

      > img {
        width: 30px;
        min-width: 30px;
        height: 30px;
      }
    }
  }
</style>