<script>
import Button from '../../button/Button.svelte';
import award from '../../../assets/images/business-plan/award1.svg';
import award2 from '../../../assets/images/business-plan/award2.svg';
import award3 from '../../../assets/images/business-plan/award3.svg';
import award4 from '../../../assets/images/business-plan/award4.svg';
import bw from '../../../assets/images/business-plan/logos/bw.svg';
import businessInsider from '../../../assets/images/business-plan/logos/business-insider.svg';
import fxempire from '../../../assets/images/business-plan/logos/fxempire.svg';
import fxstreet from '../../../assets/images/business-plan/logos/fxstreet.svg';
import yahoo from '../../../assets/images/business-plan/logos/yahoo.svg';
import activeImage from '../../../assets/images/business-plan/activeimage.webp';
import activeImage2 from '../../../assets/images/business-plan/activeimage2.webp';
import { isTable } from '../../../store';
import { t, locale, defaultLocale } from '$lib/translations';

let isTablet = false;

isTable.subscribe((val) => {
  isTablet = val;
})

const handleClickButton = () => {
  const form = document.getElementById('fromAtoZ');
  if (!form) return;
  form.scrollIntoView();
}

</script>

<section class="business-plan-hero">
  <div class="container">
    <div class="business-plan-hero__text">
      <div class={`business-plan-hero__tag ${$locale !== defaultLocale ? 'locale' : ''}`}>{$t('business-plan.30+ brokers launched in 2024')}</div>
      <h1 class="business-plan-hero__title">{$t('business-plan.Save Time and Money on Your Brokerage Launch')}</h1>
      <p class="business-plan-hero__description">{@html $t('business-plan.Cut costs by up to $130,000 and launch in just 2 weeks with the Quadcode white label solution — your fast track to success.')}</p>
      <Button text="{$t('business-plan.Submit the form')}" onClick={handleClickButton} />
    </div>
    <div class="business-plan-hero__awardsLogos">
      <div class="business-plan-hero__awards">
        <img src={award} alt="award 1">
        <img src={award2} alt="award 2">
        <img src={award3} alt="award 3">
        <img src={award4} alt="award 4">
      </div>
      <div class="business-plan-hero__logosBlock">
        We’re featured in
        <div class="business-plan-hero__logos">
          <img src={yahoo} alt="yahoo">
          <img src={bw} alt="bw">
          <img src={businessInsider} alt="business insider">
          <img src={fxempire} alt="fxempire">
          <img src={fxstreet} alt="fxstreet">

        </div>
      </div>
    </div>
    <img class="business-plan-hero__activePic" src={isTablet ? activeImage2 : activeImage} alt="active picture">
  </div>
</section>

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

  .business-plan-hero {
    overflow: hidden;
    padding-top: 209px;
    padding-bottom: 87px;

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

    @include breakpoint-down('tabL') {
      padding-top: 98px;
      padding-bottom: 0;
    }

    .container {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      gap: 132px;

      @include breakpoint-down('deskL') {
        gap: 103px;
      }
      @include breakpoint-down('tabL') {
        align-items: center;
        gap: 27px;
      }
    }

    &__activePic {
      position: absolute;
      z-index: -1;
      top: 50px;
      right: -40%;
      transform: rotate(4deg);
      @include breakpoint-down('deskL') {
        height: 600px;
        width: auto;
        top: 81px;
        right: -28%;
        transform: rotate(2deg);
      }
      @include breakpoint-down('tabL') {
        position: static;
        height: 474px;
        width: 739px;
        transform: none;
      }
      @include breakpoint-down('mobM') {
        height: 287.35px;
        width: 448px;
      }
    }

    &__text {
      width: 867px;
      display: flex;
      flex-direction: column;
      gap: 18px;
      position: relative;

      @include breakpoint-down('deskL') {
        width: 571px;
      }
      @include breakpoint-down('tabL') {
        align-items: center;
        text-align: center;
        gap: 12px;
      }
      @include breakpoint-down('tabM') {
        width: 100%;
        gap: 18px;
      }

      :global(.button) {
        font-size: 30px;
        line-height: 30px;
        font-weight: 700;
        padding: 20px 42px;

        @include breakpoint-down('deskL') {
          font-size: 18px;
          line-height: 19.8px;
          padding: 16px 76px;
          margin-top: 12px;
        }
        @include breakpoint-down('tabL') {
          font-size: 12px;
          line-height: 15px;
          padding: 12px 24px;
          margin-top: 0;
        }
        @include breakpoint-down('tabM') {
          font-size: 12px;
          line-height: 14.4px;
          padding: 12px 24px;
          width: 100%;
          margin-top: 2px;
        }
      }
    }

    &__tag {
      position: absolute;
      right: -43%;
      top: 14px;
      background: $techBluePrimary;
      padding: 13px 24px;
      border-radius: 20px;
      transform: rotate(-3deg);
      font-size: 24px;
      line-height: 30px;
      font-weight: 700;
      color: $fontWhite;

      &.locale {
        right: -78%;
      }

      @include breakpoint-down('deskL') {
        top: 9px;
        font-size: 18px;
        line-height: 25.2px;
      }
      @include breakpoint-down('tabL') {
        font-size: 18px;
        line-height: 19.8px;
        position: static;
        width: fit-content;
        margin-bottom: 20px;
      }
      @include breakpoint-down('tabM') {
        font-size: 12px;
        line-height: 14.4px;
        margin-bottom: 12px;
      }
    }

    &__title {
      font-size: 72px;
      line-height: 72px;
      font-weight: 700;

      @include breakpoint-down('deskL') {
        font-size: 42px;
        line-height: 46.2px;
      }
      @include breakpoint-down('tabL') {
        font-size: 36px;
        line-height: 36px;
      }
      @include breakpoint-down('tabM') {
        font-size: 31px;
        line-height: 31px;
      }
    }
    &__description {
      font-size: 24px;
      line-height: 30px;
      font-weight: 400;
      width: 357px;
      @include breakpoint-down('deskL') {
        font-size: 18px;
        line-height: 25.2px;
      }
      @include breakpoint-down('tabL') {
        font-size: 16px;
        line-height: 19.49px;
      }
      @include breakpoint-down('tabM') {
        font-size: 12px;
        line-height: 14.4px;
        width: fit-content;
        padding-inline: 30px;
      }

      :global(span) {
        font-weight: 700;
        color: $fontWhite;
        position: relative;
        z-index: 1;
        margin: 0 4px;
        &::before {
          content: '';
          position: absolute;
          background: $redPrimary;
          top: -1px;
          border-radius: 4px;
          left: -4px;
          height: 108%;
          z-index: -1;
          width: calc(100% + 8px);
        }
      }
    }

    &__awardsLogos {
      display: flex;
      flex-direction: column;
      gap: 35px;
      font-size: 20px;
      line-height: 24px;
      font-weight: 700;
      color: $redPrimary;

      @include breakpoint-down('deskL') {
        gap: 29px;
      }
    }
    &__awards {
      display: flex;
      @include breakpoint-down('tabL') {
        justify-content: center;
      }
      @include breakpoint-down('tabM') {
        flex-wrap: wrap;
        gap: 30px 7px;
      }
      img {
        width: auto;
        height: 59px;

        @include breakpoint-down('deskL') {
          height: 41px;
        }
        @include breakpoint-down('tabM') {
          height: 59px;
        }
      }
    }
    &__logosBlock {
      display: flex;
      flex-direction: column;
      gap: 20px;
      @include breakpoint-down('tabL') {
        align-items: center;
        font-size: 18px;
        line-height: 19.8px;
        margin-top: -10px;
      }
      @include breakpoint-down('mobM') {
        margin-top: 2px;
      }
    }
    &__logos {
      display: flex;
      gap: 25px;

      @include breakpoint-down('tabM') {
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 25px 45px;
      }
      img {
        height: 33px;
        width: auto;

        @include breakpoint-down('deskL') {
          height: 25px;
        }
        @include breakpoint-down('tabM') {
          height: 25px;
          gap: 20px;
        }

        &:nth-child(4), &:nth-child(5) {
          height: 21px;
          width: auto;

          @include breakpoint-down('deskL') {
            height: 16px;
          }
        }
      }
    }

  }
</style>