<script lang="ts">
  import { t } from '$lib/translations';

  import table from '../../../assets/images/cfd-package/functional/table.svg';
  import graph from '../../../assets/images/cfd-package/functional/graph.svg';
  import pecent from '../../../assets/images/cfd-package/functional/pecent.svg';
  import dollar from '../../../assets/images/cfd-package/functional/dollar.svg';
  import codepen from '../../../assets/images/cfd-package/functional/codepen.svg';
  import presentation from '../../../assets/images/cfd-package/functional/presentation.svg';

  import upDown from '../../../assets/images/cfd-package/functional/up-down.svg';
  import rotate from '../../../assets/images/cfd-package/functional/rotate.svg';
  import mark from '../../../assets/images/cfd-package/functional/mark.svg';
  import shield from '../../../assets/images/cfd-package/functional/shield.svg';
  import signal from '../../../assets/images/cfd-package/functional/signal.svg';
  import stack from '../../../assets/images/cfd-package/functional/stack.svg';

  import mail from '../../../assets/images/cfd-package/functional/mail.svg';
  import affiliate from '../../../assets/images/cfd-package/functional/affiliate.svg';
  import support from '../../../assets/images/cfd-package/functional/support.svg';
  import users from '../../../assets/images/cfd-package/functional/users.svg';
  import marketing from '../../../assets/images/cfd-package/functional/marketing.svg';
  import label from '../../../assets/images/cfd-package/functional/label.svg';

  import adv from '../../../assets/images/cfd-package/functional/adv.svg';
  import { popupForm } from '../../../store';

  const stats = [
    { label: $t('cfd-package.Global Assets'), value: $t('cfd-package.850+') },
    { label: $t('cfd-package.Live in'), value: $t('cfd-package.14 Days') },
    { label: $t('cfd-package.Required'), value: $t('cfd-package.No Entity') },
    { label: $t('cfd-package.Execution'), value: $t('cfd-package.Hybrid A/B') },
  ];

  const features = [
    [
      { icon: table, label: $t('cfd-package.CRM and Backoffice') },
      { icon: graph, label: $t('cfd-package.Web traderoom') },
      { icon: pecent, label: $t('cfd-package.Liquidity') },
      { icon: dollar, label: $t('cfd-package.Billing processing') },
      { icon: codepen, label: $t('cfd-package.Servers') },
      { icon: presentation, label: $t('cfd-package.Dealing desk') },
    ],
    [
      { icon: upDown, label: $t('cfd-package.Isolated Margin CFD') },
      { icon: rotate, label: $t('cfd-package.Cross-margin CFD') },
      { icon: mark, label: $t('cfd-package.KYC') },
      { icon: shield, label: $t('cfd-package.Antifraud') },
      { icon: signal, label: $t('cfd-package.OTC Assets') },
      { icon: stack, label: $t('cfd-package.Real Assets') },
    ],
    [
      { icon: mail, label: $t('cfd-package.SMS') },
      { icon: affiliate, label: $t('cfd-package.Affiliate module') },
      { icon: support, label: $t('cfd-package.B2B Technical support') },
      { icon: users, label: $t('cfd-package.User communication module') },
      { icon: marketing, label: $t('cfd-package.Personal business advisor') },
      { icon: label, label: $t('cfd-package.Pre-integrated PSPs: 170+') },
    ],
  ];

  const comparisons = {
    first: [
      { title: $t('cfd-package.CRM and Backoffice') },
      { title: $t('cfd-package.Web traderoom') },
      { title: $t('cfd-package.Dealing desk') },
      { title: $t('cfd-package.Billing processing backend') },
      { title: $t('cfd-package.Liquidity') },
      { title: $t('cfd-package.Servers') },
      { title: $t('cfd-package.Isolated Margin CFD') },
      { title: $t('cfd-package.Cross-margin CFD') },
      { title: $t('cfd-package.Antifraud') },
    ],
    second: [
      { title: $t('cfd-package.KYC') },
      { title: $t('cfd-package.Types of assets'), value: $t('cfd-package.OTC/Real') },
      { title: $t('cfd-package.SMS') },
      { title: $t('cfd-package.Number of available assets'), value: $t('cfd-package.850+') },
      { title: $t('cfd-package.Affiliate module') },
      { title: $t('cfd-package.B2B Technical support') },
      { title: $t('cfd-package.User communication module') },
      { title: $t('cfd-package.Personal business advisor') },
      { title: $t('cfd-package.Pre-integrated PSPs'), value: $t('cfd-package.170') },
    ],
  }
</script>

<div class="block-functional">
  <div class="container">

    <h2 class="block-functional__title">
      <strong>{$t('cfd-package.All-inclusive')}</strong>
      {$t('cfd-package.Forex brokerage platform')}
      <strong>{$t('cfd-package.under your own brand')}</strong>
    </h2>

    <div class="block-functional__stats">
      {#each stats as stat, i}
        {#if i > 0}
          <div class="block-functional__stats-divider"></div>
        {/if}
        <div class="block-functional__stat">
          <span class="block-functional__stat-label">{stat.label}</span>
          <span class="block-functional__stat-value">{stat.value}</span>
        </div>
      {/each}
    </div>

    <div class="block-functional__features">
      {#each features as column, i}
        {#if i > 0}
          <div class="block-functional__features-divider"></div>
        {/if}
        <ul class="block-functional__feature-list">
          {#each column as item}
            <li class="block-functional__feature-item">
              <img src={item.icon} alt="" class="block-functional__feature-icon" />
              <span class="block-functional__feature-label">{item.label}</span>
            </li>
          {/each}
        </ul>
      {/each}
    </div>

    <div class="block-functional__comparison">
      <div class="block-functional__comparison-first">
        {#each comparisons.first as row}
          <div class="block-functional__comparison-line">
            <div class="block-functional__comparison-title">{row.title}</div>
              <div class="block-functional__comparison-value">
                {#if row.value}
                  {row.value}
                {:else}
                  <img src={adv} alt="" class="block-functional__comparison-icon" />
                {/if}
              </div>
          </div>
        {/each}
      </div>

      <div class="block-functional__comparison-second">
        {#each comparisons.second as row}
          <div class="block-functional__comparison-line">
            <div class="block-functional__comparison-title">{row.title}</div>
              <div class="block-functional__comparison-value">
                {#if row.value}
                  {row.value}
                {:else}
                  <img src={adv} alt="" class="block-functional__comparison-icon" />
                {/if}
              </div>
            </div>
        {/each}
      </div>
    </div>

    <div class="block-functional__cta">
      <div on:click={() => popupForm.set(true)} class="block-functional__btn">{$t('cfd-package.Learn More')}</div>
    </div>
  </div>
</div>

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

  .block-functional {
    padding: 90px 0;

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

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

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

    .container {
      max-width: 1180px;

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

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

    &__title {
      width: 950px;
      font-size: 56px;
      font-weight: 400;
      line-height: 68px;
      text-align: center;
      margin: 0 auto;
      letter-spacing: -0.6px;

      @include breakpoint-down('deskM') {
        width: 470px;
        font-size: 26px;
        line-height: 32px;
      }

      @include breakpoint-down('tabM') {
        width: 100%;
        font-size: 18px;
        line-height: 26px;
      }

      strong {
        font-weight: 500;
      }
    }

    &__stats {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: rgba(241, 241, 241, 0.66);
      border-radius: 32px;
      padding: 40px 60px;
      margin: 50px 13px;

      @include breakpoint-down('deskM') {
        display: none;
      }

      &-divider {
        width: 2px;
        height: 41px;
        background: rgba(0, 0, 0, 0.33);
      }
    }

    &__stat {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
    }

    &__stat-label {
      font-size: 24px;
      font-weight: 500;
      line-height: 32px;
      text-align: center;
      color: #FF282B;
    }

    &__stat-value {
      font-size: 36px;
      font-weight: 500;
      line-height: 48px;
      text-align: center;
    }

    &__features {
      display: flex;
      justify-content: space-between;
      padding: 5px 15px;

      @include breakpoint-down('deskM') {
        display: none;
      }

      &-divider {
        width: 2px;
        height: 335px;
        background: rgba(241, 241, 241, 0.66);
        margin: 0 25px;
      }
    }

    &__feature-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    &__feature-item {
      height: 44px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    &__feature-icon {
      width: 44px;
      height: 44px;
      flex-shrink: 0;
    }

    &__feature-label {
      font-size: 24px;
      font-weight: 500;
      letter-spacing: -0.3px;
    }

    &__comparison {
      width: 100%;
      display: none;
      border: 1px solid rgba(231, 236, 240, 1);
      border-radius: 20px;
      margin: 40px auto 0;
      overflow: hidden;

      & > div {
        width: calc(100% / 2);

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

      @include breakpoint-down('deskM') {
        display: flex;
        margin: 37px auto 0;
        font-family: $Inter;
      }

      @include breakpoint-down('tabM') {
        width: 100%;
        flex-direction: column;
        margin: 21px auto 0;
      }
    }

    &__comparison-first {
      border-right: 1px solid rgba(231, 236, 240, 1);

      @include breakpoint-down('tabM') {
        border-right: none;
      }

      & > div {
        &:nth-child(even) {
          background-color: rgba(241, 244, 246, 1);
        }
      }
    }

    &__comparison-second {
      & > div {
        &:nth-child(even) {
          background-color: rgba(241, 244, 246, 1);
        }

        @include breakpoint-down('tabM') {
          &:nth-child(even) {
            background-color: transparent;
          }

          &:nth-child(odd) {
            background-color: rgba(241, 244, 246, 1);
          }
        }
      }
    }

    &__comparison-line {
      width: 100%;
      height: 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 59px 0 20px;

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

    &__comparison-title {
      font-size: 14px;
      font-weight: 500;
      line-height: 14px;
    }

    &__comparison-value {
      width: 32px;
      height: 36px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      font-weight: 400;
      line-height: 14px;
      text-align: center;
    }

    &__comparison-icon {
      width: 32px;
      height: 36px;
    }

    &__cta {
      display: flex;
      justify-content: center;
      margin-top: 40px;

      @include breakpoint-down('tabM') {
        margin-top: 24px;
      }
    }

    &__btn {
      font-size: 16px;
      line-height: 24px;
      font-weight: 450;
      padding: 14px 60px;
      background-color: rgba(255, 40, 43, 1);
      color: $textPrimaryDefault;
      border-radius: 52px;
      cursor: pointer;

      @include breakpoint-down('deskM') {
        font-size: 14px;
        line-height: 18px;
        font-weight: 400;
        padding: 12px 63px;
      }

      @include breakpoint-down('tabM') {
        width: 100%;
        text-align: center;
        padding: 12px 0;
      }

      &:hover {
        background-color: $redHover;
      }
    }
  }
</style>