<script lang="ts">
  import img1 from '../../../assets/images/trading-platform/set-up/idea.svg';
  import img2 from '../../../assets/images/trading-platform/set-up/configuration.svg';
  import img3 from '../../../assets/images/trading-platform/set-up/traffic.svg';
  import img4 from '../../../assets/images/trading-platform/set-up/profit.svg';
  import img5 from '../../../assets/images/trading-platform/set-up/unboxing.svg';
  import img6 from '../../../assets/images/trading-platform/set-up/maintenance.svg';

  import Button from '../../button/Button.svelte';
  import { popupForm } from '../../../store.js';
  import { t } from '$lib/translations';
</script>

<div class="block-set-up">
  <div class="container">
    <div class="block-set-up__wrapper">
      <p class="block-set-up__title">{$t('trading-platform.Set up your broker today')}</p>
      <div class="block-set-up__table">
        <div class="block-set-up__tableHeader">
          <div class="block-set-up__tableHeaderCol block-set-up__tableHeaderCol1">{$t('trading-platform.You')}</div>
          <div class="block-set-up__tableHeaderCol block-set-up__tableHeaderCol2">{$t('trading-platform.Quadcode team')}</div>
        </div>
        <div class="block-set-up__list">
          <div class="block-set-up__listItem" />
          <div class="block-set-up__listItem" />
          <div class="block-set-up__listItem" />
          <div class="block-set-up__listItem" />
        </div>
        <div class="block-set-up__tableRow block-set-up__tableRowOne">
          <div class="block-set-up__tableCol" style="border-left: 1px solid rgba(230, 35, 52, 1)">
            <div class="block-set-up__tableColIcon">
              <img src={img1} alt="" loading="lazy" />
            </div>
            <p class="block-set-up__tableColText">{$t('trading-platform.Define your business model')}</p>
          </div>
          <div class="block-set-up__tableCol" style="border-left: 1px solid rgba(230, 35, 52, 1)">
            <div class="block-set-up__tableColIcon">
              <img src={img2} alt="" loading="lazy" />
            </div>
            <p class="block-set-up__tableColText">{$t('trading-platform.Configure your white label specs')}</p>
          </div>
          <div class="block-set-up__tableCol" style="border-left: 1px solid rgba(230, 35, 52, 1)">
            <div class="block-set-up__tableColIcon">
              <img src={img3} alt="" loading="lazy" />
            </div>
            <p class="block-set-up__tableColText">{$t('trading-platform.Define traffic acquisition methods')}</p>
          </div>
          <div class="block-set-up__tableCol" style="border-left: 1px solid rgba(230, 35, 52, 1)">
            <div class="block-set-up__tableColIcon">
              <img src={img4} alt="" loading="lazy" />
            </div>
            <p class="block-set-up__tableColText">{$t('trading-platform.Get profit')}</p>
          </div>
        </div>
        <div class="block-set-up__tableRow block-set-up__tableRowTwo">
          <div class="block-set-up__tableCol" />
          <div class="block-set-up__tableCol" style="border-left: 1px solid rgba(230, 35, 52, 1)">
            <div class="block-set-up__tableColIcon">
              <img src={img5} alt="" loading="lazy" />
            </div>
            <p class="block-set-up__tableColText">{$t('trading-platform.Assemble your broker')}</p>
          </div>
          <div class="block-set-up__tableCol" style="border-left: 1px solid rgba(230, 35, 52, 1)">
            <div class="block-set-up__tableColIcon">
              <img src={img6} alt="" loading="lazy" />
            </div>
            <p class="block-set-up__tableColText">{$t('trading-platform.24/7 maintenance')}</p>
          </div>
          <div class="block-set-up__tableCol" />
        </div>
      </div>
      <Button text={$t("trading-platform.Start now")} className="block-set-up__button" onClick={() => popupForm.set(true)} />
    </div>
  </div>
</div>

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

  .block-set-up {
    padding: 138px 0;
    background: url("../../../assets/images/trading-platform/why/patternBg2.png");

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

    @include breakpoint-down('deskS') {
      padding-top: 49px;
      padding-bottom: 58px;
    }

    @include breakpoint-down('tabM') {
      padding-top: 0;
      background: none;
      padding-bottom: 40px;
    }

    .container {
      max-width: 1533px;
      @include breakpoint-down('deskL') {
        max-width: 1126px;
      }
      @include breakpoint-down('tabL') {
        padding: 0 17px;
      }
      @include breakpoint-down('tabM') {
        padding: 0;
      }
    }

    &__wrapper {
      @include breakpoint-down('tabM') {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
    }

    &__title {
      @include titleBlock;

      text-align: center;
      margin-bottom: 47px;

      @include breakpoint-down('deskL') {
        margin-bottom: 52px;
      }

      @include breakpoint-down('deskS') {
        margin-bottom: 16px;
      }

      @include breakpoint-down('tabM') {
        margin-bottom: 44px;
        width: 66%;
        text-align: center;
      }
    }

    &__table {
      margin-bottom: 50px;
      position: relative;
      border: 2px solid transparent;
      border-radius: 30px;
      overflow: hidden;
      padding: 62px 49px 52px 81px;
      background: linear-gradient(0deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1)) padding-box, linear-gradient(125.13deg, #F96C6E 22.41%, rgba(255, 164, 165, 0.42) 80.51%) border-box;

      @include breakpoint-down('deskL') {
        margin-bottom: 52px;
        padding: 71px 18px 34px 45px;
      }

      @include breakpoint-down('deskS') {
        padding: 42px 14px 6px 31px;
        margin-bottom: 17px;
      }

      @include breakpoint-down('tabM') {
        display: flex;
        flex-wrap: wrap;
        border-radius: 20px;
        margin-bottom: 30px;
        padding: 0;
      }
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(0deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05)),
        linear-gradient(180deg, rgba(230, 35, 52, 0) 54.59%, rgba(230, 35, 52, 0.2) 100%);
        //backdrop-filter: blur(20px);
      }
    }


    &__tableHeader {
      @include breakpoint-down('tabM') {
        display: flex;
        flex-direction: row-reverse;
        width: 100%;
        order: 1;
        margin-bottom: 20px;
        position: sticky;
        top: 0;
      }
    }

    &__tableHeaderCol {

      font-size: 42px;
      line-height: 42px;
      font-weight: 700;

      @include breakpoint-down('deskL') {
        font-size: 25px;
        line-height: 27.5px;
      }
      @include breakpoint-down('deskS') {
        font-size: 18px;
        line-height: 19.8px;
      }

      @include breakpoint-down('tabM') {
        width: calc(100% / 2);
        height: 90px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 16px;
      }

      &1 {
        position: absolute;
        top: 66px;
        left: 50%;
        transform: translateX(-50%);

        @include breakpoint-down('deskL') {
          top: 74px;
        }
        @include breakpoint-down('tabL') {
          top: 43px;
        }
        @include breakpoint-down('tabM') {
          position: unset;
          transform: none;
        }
      }

      &2 {
        position: absolute;
        bottom: 61px;
        left: 50%;
        transform: translateX(-50%);
        color: $redPrimary;

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

        @include breakpoint-down('deskS') {
          bottom: 40px;
        }

        @include breakpoint-down('tabM') {
          position: unset;
          transform: none;
        }
      }
    }

    &__list {
      display: flex;
      align-items: center;
      counter-reset: list;

      position: absolute;
      top: 51%;
      transform: translateY(-50%);
      left: 83px;
      right: 48px;

      @include breakpoint-down('deskL') {
        transform: none;
        top: 51%;
        left: 4%;
        right: 2%;
      }


      @include breakpoint-down('tabM') {
        flex-direction: column;
        left: 50%;
        transform: translateX(-50%);
        top: 90px;
        bottom: 29px;
        right: auto;
      }
    }

    &__listItem {
      position: relative;
      height: 7px;
      flex: 1;
      background-image: url("data:image/svg+xml,%3Csvg width='241' height='6' viewBox='0 0 241 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 2.5C0.723858 2.5 0.5 2.72386 0.5 3C0.5 3.27614 0.723858 3.5 1 3.5V2.5ZM241 3L236 0.113249V5.88675L241 3ZM1 3.5H236.5V2.5H1V3.5Z' fill='%23445667'/%3E%3C/svg%3E%0A");
      background-repeat: no-repeat;
      background-size: 67% 6px;
      background-position: 60px;

      @include breakpoint-down('deskL') {
        background-position: 44px;
        background-size: 69% 6px;
      }

      @include breakpoint-down('deskS') {
        background-image: url("data:image/svg+xml,%3Csvg width='98' height='6' viewBox='0 0 98 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 2.5C0.723858 2.5 0.5 2.72386 0.5 3C0.5 3.27614 0.723858 3.5 1 3.5V2.5ZM98 3L93 0.113249V5.88675L98 3ZM1 3.5H93.5V2.5H1V3.5Z' fill='%23445667'/%3E%3C/svg%3E%0A");
        background-position: 40px;
        background-size: 56% 6px;
      }

      @include breakpoint-down('tabM') {
        background-image: url("data:image/svg+xml,%3Csvg width='6' height='143' viewBox='0 0 6 143' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.5 1C3.5 0.723858 3.27614 0.5 3 0.5C2.72386 0.5 2.5 0.723858 2.5 1L3.5 1ZM2.99999 143L5.88675 138L0.113243 138L2.99999 143ZM2.5 1L2.49999 138.5L3.49999 138.5L3.5 1L2.5 1Z' fill='%23445667'/%3E%3C/svg%3E%0A");
        background-position: -1px 65px;
        background-size: 9px 62%;
        width: 6px;
      }

      &:after {
        @include baseCTA;

        counter-increment: list;
        content: counter(list);
        position: absolute;
        left: -20px;
        top: 50%;
        transform: translateY(-50%);
        border-radius: 40px;
        background: $techBlue2;
        border: 1px solid rgba(207, 218, 225, 1);
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;

        @include breakpoint-down('tabM') {
          top: 0;
          left: -17px;
          transform: none;
        }
      }

      &:last-of-type {
        flex: 0.89;
      }
    }

    &__tableRow {
      display: flex;

      padding-top: 92px;

      @include breakpoint-down('deskL') {
        padding-top: 52px;
      }

      @include breakpoint-down('tabM') {
        width: calc(100% / 2);
        display: flex;
        flex-direction: column;
        padding-top: 0;
      }

      &One {
        @include breakpoint-down('tabM') {
          order: 3;
        }

        .block-set-up__tableCol {
          //@include breakpoint-down('tabM') {
          //  padding-right: 30px;
          //  padding-left: 11px;
          //}

          &:nth-child(1) {
            @include breakpoint-down('tabM') {
              border-top: 1px solid rgba(207, 218, 225, 1);
            }
          }

          &:nth-child(2) {
            @include breakpoint-down('tabM') {
              border-top: 1px solid rgba(207, 218, 225, 1);
            }
          }

          &:nth-child(3) {
            @include breakpoint-down('tabM') {
              border-top: 1px solid rgba(207, 218, 225, 1);
            }
          }

          &:nth-child(4) {
            @include breakpoint-down('tabM') {
              border-top: 1px solid rgba(207, 218, 225, 1);
            }
          }
        }
      }

      &Two {
        padding-top: 0;
        padding-bottom: 98px;

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

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

        @include breakpoint-down('tabM') {
          order: 2;
          padding-bottom: 0;
        }

        .block-set-up__tableCol {
          @include breakpoint-down('tabM') {
            padding-left: 30px;
            padding-right: 11px;
          }

          &:nth-child(2) {
            @include breakpoint-down('tabM') {
              border-top: 1px solid rgba(207, 218, 225, 1);
            }
          }

          &:nth-child(3) {
            @include breakpoint-down('tabM') {
              border-top: 1px solid rgba(207, 218, 225, 1);
            }
          }
        }
      }
    }

    &__tableCol {
      flex: 1;
      display: flex;
      align-items: center;
      padding: 18px 40px 18px 30px;

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

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

      @include breakpoint-down('tabM') {
        height: 230px;
        min-height: 230px;
        flex-direction: column;
        border-left: none !important;
        justify-content: center;
        padding: 8px 3px 14px 14px;
      }

      &:last-of-type {
        flex: 0.85;

        @include breakpoint-down('deskL') {
          flex: 0.87;
        }
        @include breakpoint-down('tabM') {
          height: 214px;
          min-height: 214px;
          padding: 0;
        }
      }
    }

    &__tableColIcon {
      width: 90px;
      min-width: 90px;
      height: 90px;

      @include breakpoint-down('deskS') {
        width: 70px;
        min-width: 70px;
        height: 70px;
      }

      @include breakpoint-down('tabM') {
        width: 90px;
        min-width: 90px;
        height: 90px;
      }
    }

    &__tableColText {
      @include text;
      max-width: 200px;

      @include breakpoint-down('tabM') {
        text-align: center;
        font-size: 16px;
        line-height: 22.4px;
      }
    }

    & :global(.block-set-up__button) {
      @include heading2;
      padding: 21px 20px;
      min-width: 556px;
      margin: 0 auto;

      @include breakpoint-down('deskL') {
        padding: 16px 20px;
        min-width: 217px;
      }

      @include breakpoint-down('deskS') {
        min-width: 143px;
        padding: 12px 20px;
      }
      @include breakpoint-down('tabM') {
        min-width: 90%;
      }
    }
  }
</style>