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

  // Payment logos
  import visaLogo from '../../../assets/images/main/we-cover-it-all/visa.svg';
  import mastercardLogo from '../../../assets/images/main/we-cover-it-all/master-card.svg';
  import gpayLogo from '../../../assets/images/main/we-cover-it-all/pay.svg';
  import bitcoinLogo from '../../../assets/images/main/we-cover-it-all/b.svg';
  import pixLogo from '../../../assets/images/main/we-cover-it-all/pix.svg';

  // KYC logos
  import veriffLogo from '../../../assets/images/main/we-cover-it-all/veriff.svg';
  import shuftiproLogo from '../../../assets/images/main/we-cover-it-all/shufti.svg';
  import sumsubLogo from '../../../assets/images/main/we-cover-it-all/sumsub.svg';

  interface Logo {
    src: string;
    alt: string;
  }

  interface Section {
    title: string;
    columns: {
      title: string;
      items: string[];
    }[];
    logos: Logo[];
    hasCard?: boolean;
    logoStyle?: 'billing' | 'compliance';
  }

  const sections: Section[] = [
    {
      title: $t('main.Dealing & Liquidity'),
      hasCard: true,
      columns: [
        {
          title: $t('main.Dealing'),
          items: [
            $t('main.Fraud/Abuse detection and management'),
            $t('main.Flexible spreads and commissions policies'),
            $t('main.Optimal trading conditions and fast processing'),
          ],
        },
        {
          title: $t('main.Liquidity'),
          items: [$t('main.Pre-integrated liquidity providers'), $t('main.Pre-integrated quotes providers')],
        },
      ],
      logos: [],
    },
    {
      title: $t('main.Platform & Applications'),
      columns: [
        {
          title: $t('main.Trading Platform'),
          items: [$t('main.Best-in-class UI/UX'), $t('main.Fully customizable'), $t('main.Wide range of features')],
        },
        {
          title: $t('main.Client Applications'),
          items: [$t('main.Web'), $t('main.Desktop'), $t('main.iOS/Android'), $t('main.PWA (Progressive Web App)')],
        },
      ],
      logos: [],
    },
    {
      title: $t('main.Billing'),
      hasCard: true,
      logoStyle: 'billing',
      columns: [
        {
          title: $t('main.Billing'),
          items: [
            $t('main.170+ PSPs out of the box'),
            $t('main.Integrate payment methods'),
            $t('main.Restrict payment methods'),
          ],
        },
        {
          title: '',
          items: [],
        },
      ],
      logos: [
        { src: visaLogo, alt: 'Visa' },
        { src: mastercardLogo, alt: 'Mastercard' },
        { src: gpayLogo, alt: 'Google Pay' },
        { src: bitcoinLogo, alt: 'Bitcoin' },
        { src: pixLogo, alt: 'Pix' },
      ],
    },
    {
      title: $t('main.Compliance & Security'),
      logoStyle: 'compliance',
      columns: [
        {
          title: $t('main.KYC/AML'),
          items: [
            $t('main.Multi-level KYC'),
            $t('main.Documents constructor'),
            $t('main.Integrated with leading providers'),
          ],
        },
        {
          title: $t('main.Security'),
          items: [
            $t('main.Monitoring & Intrusion Detection'),
            $t('main.Third-Party Risk Management'),
            $t('main.Data Backups & Disaster Recovery'),
          ],
        },
      ],
      logos: [
        { src: veriffLogo, alt: 'Veriff' },
        { src: shuftiproLogo, alt: 'Shufti Pro' },
        { src: sumsubLogo, alt: 'Sumsub' },
      ],
    },
    {
      title: $t('main.Sales & Communication'),
      hasCard: true,
      columns: [
        {
          title: $t('main.Sales Module'),
          items: [
            $t('main.Modern telephony'),
            $t('main.Custom triggers configuration'),
            $t('main.Web and mobile tracking system'),
          ],
        },
        {
          title: $t('main.User Communication'),
          items: [$t('main.Chats'), $t('main.Incoming calls'), $t('main.Ticket system')],
        },
      ],
      logos: [],
    },
    {
      title: $t('main.Analytics & Affiliate'),
      columns: [
        {
          title: $t('main.Reports'),
          items: [$t('main.Trading history'), $t('main.User cards'), $t('main.In/Out summary')],
        },
        {
          title: $t('main.Affiliate System'),
          items: [$t('main.CPA'), $t('main.Revenue share'), $t('main.Spread share'), $t('main.Lot offer')],
        },
      ],
      logos: [],
    },
  ];
</script>

<section class="we-cover-all">
  <div class="container">
    <div class="we-cover-all__tag">{$t('main.We cover it all')}</div>

    <div class="we-cover-all__sections">
      {#each sections as section}
        <div class="we-cover-all__section {section.hasCard ? 'we-cover-all__section--card' : ''}">
          <div class="we-cover-all__left">
            <div class="we-cover-all__title-inner">
              <h3 class="we-cover-all__section-title">{section.title}</h3>
            </div>

            {#if section.logos.length > 0}
              <div class="we-cover-all__logos we-cover-all__logos--{section.logoStyle || 'default'}">
                {#each section.logos as logo}
                  <div class="we-cover-all__logo-wrapper">
                    <img src={logo.src} alt={logo.alt} class="we-cover-all__logo" loading="lazy" />
                  </div>
                {/each}
              </div>
            {/if}
          </div>

          <div class="we-cover-all__content">
            <div class="we-cover-all__columns">
              {#each section.columns as column}
                <div class="we-cover-all__column">
                  {#if column.title}
                    <h4 class="we-cover-all__column-title">{column.title}</h4>
                  {/if}
                  {#if column.items.length > 0}
                    <ul class="we-cover-all__list">
                      {#each column.items as item}
                        <li class="we-cover-all__item">{item}</li>
                      {/each}
                    </ul>
                  {/if}
                </div>
              {/each}
            </div>
          </div>
        </div>
      {/each}
    </div>
  </div>
</section>

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

  .we-cover-all {
    padding: 80px 0 90px 0;
    background: #f2f5f7;
    overflow: hidden;

    .container {
      padding: 0 56px;
      max-width: 1440px;
      width: 100%;

      @media (max-width: 1366px) {
        padding: 0 40px;
      }
      @media (max-width: 1024px) {
        padding: 0 32px;
      }

      @media (max-width: 480px) {
        padding: 0 24px;
      }
      @media (max-width: 393px) {
        padding: 0 20px;
      }
    }

    &__tag {
      display: inline-block;
      padding: 5px 15.5px;
      border: 1px solid $techBlue3;
      border-radius: 100px;
      font-size: 16px;
      line-height: 20px;
      color: $techBluePrimary;
      margin-bottom: 44px;

      @media (max-width: 720px) {
        font-size: 14px;
      }
    }

    &__sections {
      display: flex;
      flex-direction: column;
      gap: 27px;
    }

    &__section {
      display: flex;
      gap: 24px;
      padding: 40px 32px;

      @media (max-width: 925px) {
        flex-direction: column;
      }

      &--card {
        background: $techWhite;
        border-radius: 32px;
      }

      &:nth-child(1) {
        @media (max-width: 1023px) {
          margin-bottom: 2px;

          h3 {
            margin-top: 1px;
            margin-bottom: -1px;
          }

          h4 {
            margin-bottom: 11px;
          }
        }

        @media (max-width: 479px) {
          .we-cover-all__columns {
            gap: 55px;
          }

          h3 {
            margin-top: 0;
          }
          h4 {
            margin-bottom: 10px;
          }
        }
      }

      &:nth-child(2) {
        margin-bottom: 2px;

        @media (max-width: 1365px) {
          margin-bottom: 6px;
        }

        @media (max-width: 1023px) {
          margin-bottom: 2px;
          h3 {
            margin-bottom: -1px;
          }
        }

        @media (max-width: 719px) {
          margin-bottom: 6px;
        }

        h4 {
          margin-bottom: 15px;

          @media (max-width: 1365px) {
            margin-bottom: 14px;
          }
        }

        .we-cover-all {
          &__list {
            gap: 16px;
          }
        }

        @media (max-width: 479px) {
          margin-bottom: 0;

          h3 {
            margin-top: -1px;
            margin-bottom: -1px;
          }
        }
      }

      &:nth-child(3) {
        margin-bottom: 1px;

        @media (max-width: 1439px) {
          gap: 67px;
        }
        @media (max-width: 1024px) {
          > div:nth-child(1) {
            width: 55%;
            flex: 55 45;
          }
        }
        @media (max-width: 1023px) {
          gap: 24px;

          h3 {
            margin-top: 1px;
            margin-bottom: -1px;
          }

          h4 {
            margin-bottom: 11px;
          }

          > div:nth-child(1) {
            width: 100%;
          }
        }
        @media (max-width: 479px) {
          h3 {
            margin-top: 0;
            margin-bottom: 0;
          }

          h4 {
            margin-top: 0;
            margin-bottom: 10px;
          }
        }
      }

      &:nth-child(4) {
        margin-bottom: 1px;

        @media (max-width: 1439px) {
          gap: 67px;
        }

        .we-cover-all {
          &__columns {
            gap: 41px;

            @media (max-width: 1439px) {
              gap: 82px;
            }

            @media (max-width: 1365px) {
              gap: 40px;
            }
          }
        }

        @media (max-width: 1023px) {
          gap: 23px;

          h3 {
            margin-top: 1px;
            margin-bottom: 23px;
            width: 70%;
          }

          h4 {
            margin-bottom: 11px;
          }
        }

        @media (max-width: 719px) {
          h3 {
            width: 90%;
          }
        }
        @media (max-width: 479px) {
          gap: 22px;
          padding: 40px 22px 40px 32px;

          h3 {
            margin-top: 0;
            margin-bottom: 24px;
          }
          h4 {
            margin-bottom: 10px;
          }
          .we-cover-all {
            &__columns {
              flex-direction: row;
              gap: 45px;
            }
            &__column {
              width: 40%;
            }
          }
        }
      }

      &:nth-child(5) {
        margin-bottom: 1px;
        .we-cover-all {
          &__columns {
            gap: 40px;
          }
        }

        @media (max-width: 1365px) {
          margin-bottom: 0;
        }

        @media (max-width: 1023px) {
          h3 {
            margin-top: 1px;
            margin-bottom: -1px;
          }

          h4 {
            margin-bottom: 11px;
          }
        }

        @media (max-width: 479px) {
          h3 {
            margin-top: 0;
          }

          .we-cover-all__columns {
            gap: 39px;
          }

          h4 {
            margin-bottom: 10px;
          }
        }
      }

      &:nth-child(6) {
        margin-bottom: -1px;

        .we-cover-all {
          &__columns {
            gap: 40px;
          }
        }

        @media (max-width: 1023px) {
          h3 {
            margin-top: 2px;
            margin-bottom: -1px;
          }

          h4 {
            margin-bottom: 11px;
          }
        }

        @media (max-width: 479px) {
          h3 {
            margin-top: 1px;
          }

          .we-cover-all {
            &__columns {
              flex-direction: row;
              gap: 49px;
            }
            &__column {
              width: 40%;
            }
          }

          h4 {
            margin-bottom: 10px;
          }
        }
      }
    }

    &__left {
      display: flex;
      flex-direction: column;
      gap: 48px;
      flex: 1 1 0;
      min-width: 0;

      @media (max-width: 720px) {
        gap: 24px;
        width: 100%;
        flex: 0 0 100%;
      }
    }

    &__title-inner {
      max-width: 480px;
      min-width: 0;

      @media (max-width: 720px) {
        max-width: 100%;
      }
    }

    &__section-title {
      color: $fontPrimary;
      font-size: 56px;
      line-height: 68px;
      font-weight: 400;

      @media (max-width: 1024px) {
        font-size: 52px;
        line-height: 64px;
      }

      @media (max-width: 720px) {
        font-size: 44px;
        line-height: 54px;
      }

      @media (max-width: 393px) {
        font-size: 36px;
        line-height: 44px;

        :global(body.ru) & {
          font-size: 34px;
        }
      }
    }

    &__content {
      flex: 1 1 0;
      display: flex;
      flex-direction: column;
      gap: 24px;

      @media (max-width: 720px) {
        width: 100%;
        flex: 0 0 100%;
      }
    }

    &__columns {
      display: flex;
      align-self: flex-end;
      gap: 56px;
      min-width: 0;
      flex-wrap: nowrap;
      width: 100%;

      @media (max-width: 1024px) {
        width: 436px;
      }

      @media (max-width: 1010px) {
        flex-direction: column;
        width: 100%;
        align-self: flex-start;
      }

      @media (max-width: 720px) {
        flex-direction: row;
        align-self: flex-start;
        gap: 56px;
        width: 100%;
      }

      @media (max-width: 393px) {
        flex-direction: column;
      }
    }

    &__section:has(.we-cover-all__logos--billing) {
      @media (max-width: 1024px) {
        .we-cover-all__columns {
          width: 251px;
          align-self: flex-end;
        }

        .we-cover-all__column {
          width: 100%;
          flex: none;
        }
      }

      @media (max-width: 925px) {
        .we-cover-all__columns {
          align-self: flex-start;
        }
      }
    }

    &__column {
      width: 50%;
      flex: 1 1 0;
      min-width: 0;
      max-width: 100%;

      @media (max-width: 1010px) {
        width: 100%;
      }

      @media (max-width: 393px) {
        width: 100%;
        flex: none;
      }

      &:not(:has(h4)):not(:has(ul)) {
        display: none;
      }
    }

    &__column-title {
      color: $fontPrimary;
      margin-bottom: 13px;
      font-weight: 400;
      font-size: 20px;
      line-height: 26px;
      @media (max-width: 1365px) {
        margin-top: 1px;
        margin-bottom: 12px;
      }

      @media (max-width: 1024px) {
        font-size: 18px;
        line-height: 26px;
      }
    }

    &__list {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    &__item {
      line-height: 20px;
      color: $techBluePrimary;
      word-wrap: break-word;
      font-size: 16px;
      overflow-wrap: break-word;

      @media (max-width: 720px) {
        font-size: 14px;
        line-height: 20px;
      }
    }

    &__logos {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;

      &--billing {
        .we-cover-all__logo-wrapper {
          background: #f2f5f7;
          border-radius: 16px;
          padding: 12px;
        }
      }

      &--compliance {
        .we-cover-all__logo-wrapper {
          background: $techWhite;
          border-radius: 16px;
          padding: 12px;
        }
      }
    }

    &__logo-wrapper {
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    &__logo {
      height: 100%;
      width: auto;
    }
  }
</style>