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

  import block1 from '../../../assets/images/main/brokeragemanagement/block1.svg';
  import block21 from '../../../assets/images/main/brokeragemanagement/block2.svg';
  import block22 from '../../../assets/images/main/brokeragemanagement/block2_2.svg';
  import block31 from '../../../assets/images/main/brokeragemanagement/block3_1.svg';
  import block32 from '../../../assets/images/main/brokeragemanagement/block3_2.svg';
  import block33 from '../../../assets/images/main/brokeragemanagement/block3_3.svg';
  import block34 from '../../../assets/images/main/brokeragemanagement/block3_4.svg';
</script>

<section class="brokerageManagement">
  <div class="container">
    <h1 class="brokerageManagement__title">{@html $t('Brokerage management made easy')}</h1>
    <div class="brokerageManagement__header">
      <div class="brokerageManagement__left">
        <div class="brokerageManagement__left-item">
          <div class="brokerageManagement__left-item-label">+22%</div>
          <p>{$t("Second deposit conversion is higher if there's at least one tournament")}</p>
        </div>
        <div class="brokerageManagement__left-item">
          <div class="brokerageManagement__left-item-label">+29%</div>
          <p>{$t('No deposit bonus boosts reactivation rate')}</p>
        </div>
      </div>
      <div class="brokerageManagement__right">
        <div class="brokerageManagement__right__description">
          {$t(
            'Run tournaments, launch promo campaigns and manage your clients, admins, and affiliates all in one place. Track your performance and scale your business with field-tested tools'
          )}
        </div>
      </div>
    </div>
    <div class="brokerageManagement__body">
      <div class="brokerageManagement__body-cell">
        <div class="brokerageManagement__body-cell__title">{$t('Gamification')}</div>
        <div class="brokerageManagement__body-cell__image">
          <img src={block1} alt={$t('Gamification')} />
        </div>
        <div class="brokerageManagement__body-cell__list">
          <ul>
            <li>{$t('Tournaments & Leaderboards')}</li>
            <li>{$t('Bonuses')}</li>
          </ul>
        </div>
      </div>
      <div class="brokerageManagement__body-cell">
        <div class="brokerageManagement__body-cell__title">{$t('Marketing')}</div>
        <div class="brokerageManagement__body-cell__image">
          <img src={block21} alt={$t('Marketing - 1')} />
          <img src={block22} alt={$t('Marketing - 2')} />
        </div>
        <div class="brokerageManagement__body-cell__list">
          <ul>
            <li>{$t('Utilize email, push and pop-up notifications')}</li>
            <li>{$t('Grow with a 20% CR using proven tactics')}</li>
          </ul>
        </div>
      </div>
      <div class="brokerageManagement__body-cell">
        <div class="brokerageManagement__body-cell__title">{$t('Back Office')}</div>
        <div class="brokerageManagement__body-cell__image">
          <img src={block31} alt={$t('Back Office - 1')} />
          <img src={block32} alt={$t('Back Office - 2')} />
          <img src={block33} alt={$t('Back Office - 3')} />
          <img src={block34} alt={$t('Back Office - 4')} />
        </div>
        <div class="brokerageManagement__body-cell__list">
          <ul>
            <li>{$t('Customers, admins, and IBs management')}</li>
            <li>{$t('Powerful CRM for marketing and sales')}</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</section>

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

  .brokerageManagement {
    background: $headerDark;
    padding: 132px 56px 120px;
    overflow-x: hidden;

    @media (max-width: 1799px) {
      padding: 117px 40px 120px;
    }

    @media (max-width: 1365px) {
      padding: 120px 32px;
    }

    @media (max-width: 1365px) {
      padding: 109px 0 120px;
    }

    @media (max-width: 1023px) {
      padding: 109px 12px 119px;
    }

    @media (max-width: 719px) {
      padding: 33px 4px 120px;
      margin-top: -1px;
    }

    @media (max-width: 479px) {
      padding: 24px 0 90px;
    }

    .container {
      &:before {
        background: #353539;
        content: '';
        height: 1px;
        width: 100%;
        position: absolute;
        top: -113px;

        @media (max-width: 1365px) {
          top: -109px;
        }

        @media (max-width: 480px) {
          top: -76px;
          width: calc(100% - 40px);
        }

        @media (max-width: 479px) {
          top: -56px;
        }
      }
    }

    &__title {
      flex: 1;
      font-weight: 400;
      font-size: 64px;
      line-height: 72px;
      max-width: 60%;
      background: linear-gradient(180deg, #f9fbfc 0%, #adb1b7 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
      margin-bottom: 64px;

      @media (max-width: 1365px) {
        font-size: 56px;
        line-height: 68px;
        max-width: 100%;
      }

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

      @media (max-width: 480px) {
        margin-bottom: 48px;
      }

      @media (max-width: 479px) {
        font-size: 36px;
        line-height: 44px;
      }
    }
    &__header {
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      margin-bottom: 64px;

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

      @media (max-width: 480px) {
        margin-bottom: 48px;
      }
    }
    &__left {
      display: flex;
      gap: 24px;

      @media (max-width: 1023px) {
        order: 2;
      }

      &-item {
        &:nth-child(1) {
          width: 201px;

          @media (max-width: 479px) {
            width: 164px;
          }

          @media (max-width: 393px) {
            width: 50%;
          }
        }
        &:nth-child(2) {
          width: 201px;

          @media (max-width: 479px) {
            width: auto;
          }

          @media (max-width: 393px) {
            width: 50%;
          }
        }

        &-label {
          min-width: 1px;
          max-width: 78px;
          height: 30px;
          display: flex;
          align-items: center;
          justify-content: center;
          border: 2px solid #6ce9a6;
          color: #6ce9a6;
          padding: 0 10px;
          border-radius: 12px;
          margin-bottom: 12px;

          @media (max-width: 1023px) {
            font-size: 20px;
            line-height: 150%;
          }
        }
        p {
          color: #f9fbfc;
          font-size: 14px;
          line-height: 20px;
        }
      }
    }
    &__right {
      width: 502px;
      margin-left: auto;
      padding-top: 1px;

      @media (max-width: 1366px) {
        width: 460px;
      }

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

      @media (max-width: 1023px) {
        order: 1;
        width: 100%;
        margin-bottom: 32px;
      }

      &__description {
        color: #adb1b7;
        font-size: 16px;
        line-height: 24px;
      }
    }
    &__body {
      display: grid;
      gap: 24px;
      grid-template-columns: 1fr 1fr;

      @media (max-width: 1023px) {
        grid-template-columns: 1fr;
      }

      &-cell {
        background: #28282c;
        display: flex;
        flex-direction: column;
        gap: 32px;
        padding: 40px 28px;
        border-radius: 24px;

        @media (max-width: 479px) {
          padding: 32px 20px;
        }

        &__title {
          color: #f9fbfc;
          font-size: 24px;
          line-height: 32px;

          @media (max-width: 479px) {
            font-size: 20px;
            line-height: 26px;
          }
        }
        &__image {
          border-radius: 20px;
          height: 400px;
          overflow: hidden;

          @media (max-width: 479px) {
            height: 334px;
          }
        }
        &__list {
          ul {
            li {
              color: #f9fbfc;
              font-size: 16px;
              line-height: 24px;
              position: relative;
              margin-left: 28px;
              display: flex;
              align-items: center;

              &:not(:last-child) {
                margin-bottom: 12px;
              }

              &:before {
                position: absolute;
                content: '';
                background: url('../../../assets/images/main/brokeragemanagement/tick.svg');
                width: 24px;
                height: 24px;
                left: -28px;
              }
            }
          }
        }

        &:nth-child(1) {
          width: 100%;
          overflow: hidden;

          img {
            @media (max-width: 1366px) {
              width: 596px;
            }

            @media (max-width: 1365px) {
              transform: translateX(-89px);
            }

            @media (max-width: 1023px) {
              width: 600px;
              transform: translateX(0);
            }

            @media (max-width: 479px) {
              width: 500px;
            }
          }
        }

        &:nth-child(2) {
          .brokerageManagement__body-cell__image {
            position: relative;
            @media (max-width: 479px) {
              height: 400px;
            }

            img {
              position: absolute;

              @media (max-width: 1366px) {
                width: 596px;
              }

              @media (max-width: 1023px) {
                width: 600px;
              }

              &:nth-child(2) {
                width: 443px;
                right: 0;

                @media (max-width: 1365px) {
                  right: -107px;
                }

                @media (max-width: 1023px) {
                  display: none;
                }

                @media (max-width: 480px) {
                  display: block;
                  right: -98px;
                }

                @media (max-width: 479px) {
                  right: -146px;
                }
              }
            }
          }
        }

        &:nth-child(3) {
          grid-column-start: 1;
          grid-column-end: 3;

          @media (max-width: 1023px) {
            grid-column-end: 2;
          }

          .brokerageManagement__body-cell__image {
            background: #18181c;
            height: 446px;
            position: relative;
            img {
              position: absolute;

              &:nth-child(1) {
                width: 719px;
                left: 25px;
                top: 25px;
                z-index: 10;
              }

              &:nth-child(2) {
                width: 1007px;
                left: 0;
                z-index: 11;

                @media (max-width: 480px) {
                  left: -25px;
                }

                @media (max-width: 479px) {
                  left: -75px;
                  top: -10px;
                }
              }

              &:nth-child(3) {
                width: 574px;
                left: 568px;
                z-index: 12;
                top: 8px;

                @media (max-width: 1366px) {
                  left: 526px;
                }

                @media (max-width: 1365px) {
                  left: auto;
                  right: 130px;
                }

                @media (max-width: 480px) {
                  right: 161px;
                }

                @media (max-width: 479px) {
                  right: 114px;
                  top: 6px;
                }
              }

              &:nth-child(4) {
                width: 400px;
                right: 0;
                z-index: 11;

                @media (max-width: 480px) {
                  right: -280px;
                }
              }
            }
          }
        }
      }
    }
  }
</style>