<script lang="ts">
  import hero from '../../../assets/images/white-label-broker/hero/Hero.webp';
  import heroMobile from '../../../assets/images/white-label-broker/hero/Hero_mobile.webp';

  import img1 from '../../../assets/images/white-label-broker/hero/1.webp';
  import img2 from '../../../assets/images/white-label-broker/hero/2.webp';
  import img3 from '../../../assets/images/white-label-broker/hero/3.webp';
  import img4 from '../../../assets/images/white-label-broker/hero/4.webp';
  import img5 from '../../../assets/images/white-label-broker/hero/5.webp';

  import img1Mobile from '../../../assets/images/white-label-broker/hero/1_mobile.webp';
  import img2Mobile from '../../../assets/images/white-label-broker/hero/2_mobile.webp';
  import img3Mobile from '../../../assets/images/white-label-broker/hero/3_mobile.webp';
  import img4Mobile from '../../../assets/images/white-label-broker/hero/4_mobile.webp';
  import img5Mobile from '../../../assets/images/white-label-broker/hero/5_mobile.webp';

  import fast from '../../../assets/images/white-label-broker/hero/fast.svg';
  import palette from '../../../assets/images/white-label-broker/hero/palette.svg';
  import markets from '../../../assets/images/white-label-broker/hero/markets.svg';
  import customisable from '../../../assets/images/white-label-broker/hero/customisable.svg';
  import certificate from '../../../assets/images/white-label-broker/hero/certificate.svg';

  import Button from '../../button/Button.svelte';

  import { onMount } from 'svelte';

  import { isMobile, popupForm } from '../../../store';
  import { t } from '$lib/translations';

  onMount(async () => {

    if (!$isMobile) {
      const { gsap } = await import('gsap');
      const { ScrollTrigger } = await import('gsap/dist/ScrollTrigger');

      gsap.registerPlugin(ScrollTrigger);
      const scrollSettings = {
        trigger: '.block-hero',
        start: 'top',
        end: 'bottom bottom',
        scrub: 0.5
      };

      const animations = {
        '.block-hero__bgItem1': { y: -200 },
        '.block-hero__bgItem2': { y: -350 },
        '.block-hero__bgItem3': { y: -100 },
        '.block-hero__bgItem4': { y: -480 },
        '.block-hero__bgItem5': { y: -350 }
      };

      Object.entries(animations).forEach(([selector, props]) => {
        gsap.to(selector, {
          scrollTrigger: scrollSettings,
          ...props
        });
      });
    }
  });
</script>

<div class="block-hero">
  <div class="block-hero__image">
    <picture >
      <source srcset={heroMobile} media="(max-width: 767px)" >
      <img src={hero} alt="bg" class="block-hero__bg" loading="eager">
    </picture>

    <picture>
      <source srcset={img1Mobile} media="(max-width: 767px)">
      <img src={img1} alt="bg1" loading="lazy" class="block-hero__bgItem block-hero__bgItem1" />
    </picture>
    <picture>
      <source srcset={img2Mobile} media="(max-width: 767px)">
      <img src={img2} alt="bg2" loading="lazy" class="block-hero__bgItem block-hero__bgItem2" />
    </picture>
    <picture>
       <source srcset={img3Mobile} media="(max-width: 767px)">
      <img src={img3} alt="bg3" loading="lazy" class="block-hero__bgItem block-hero__bgItem3" />
    </picture>
    <picture>
       <source srcset={img4Mobile} media="(max-width: 767px)">
      <img src={img4} alt="bg4" loading="lazy" class="block-hero__bgItem block-hero__bgItem4" />
    </picture>
    <picture>
       <source srcset={img5Mobile} media="(max-width: 767px)">
      <img src={img5} alt="bg5" loading="lazy" class="block-hero__bgItem block-hero__bgItem5" />
    </picture>

    <div class="block-hero__content">
      <h1 class="block-hero__title">
        <span>{@html $t('white-label-broker.All-in-one white label')}</span>
        {$t('white-label-broker.Forex & CFD brokerage platform')}
      </h1>
      <p class="block-hero__text">
        {$t('white-label-broker.Quick and easy way to start your brokerage business from scratch with a complete white label solution.')}
      </p>
      <Button className="block-hero__button" text={$t("Request demo")} onClick={() => popupForm.set(true)} />
    </div>
  </div>

  <div class="block-hero__list">
    <div class="block-hero__listItem">
      <p class="block-hero__listItemCount">{$t('white-label-broker.10+')}</p>
      <p class="block-hero__listItemText">{$t('white-label-broker.Years in business')}</p>
    </div>
    <div class="block-hero__listItem">
      <p class="block-hero__listItemCount">{$t('white-label-broker.23')}</p>
      <p class="block-hero__listItemText">
        {@html $t('white-label-broker.Brokers launched')}
      </p>
    </div>
    <div class="block-hero__listItem">
      <p class="block-hero__listItemCount">{$t('white-label-broker.164')}</p>
      <p class="block-hero__listItemText">{$t('white-label-broker.Covered countries')}</p>
    </div>
    <div class="block-hero__listItem">
      <p class="block-hero__listItemCount">{$t('white-label-broker.70k+')}</p>
      <p class="block-hero__listItemText">{$t('white-label-broker.Registrations per month')}</p>
    </div>
    <div class="block-hero__listItem">
      <p class="block-hero__listItemCount">{$t('white-label-broker.350k+')}</p>
      <p class="block-hero__listItemText">{$t('white-label-broker.Monthly traders avg')}</p>
    </div>
  </div>

  <p class="block-hero__subtitle">{$t('white-label-broker.What we are offering you')}</p>

  <div class="container">
    <div class="block-hero__grid">
      <div class="block-hero__gridItem">
        <img src={fast} alt="" class="block-hero__gridItemIcon" />
        <p class="block-hero__gridItemTitle">{$t('white-label-broker.Rapid launch in 2 weeks')}</p>
        <p class="block-hero__gridItemText">
          {$t('white-label-broker.Save time and resources with a ready to go platform, enter the market quickly and start generating revenue')}
        </p>
      </div>
      <div class="block-hero__gridItem">
        <img src={palette} alt="" class="block-hero__gridItemIcon" />
        <p class="block-hero__gridItemTitle">{$t('white-label-broker.Branding freedom')}</p>
        <p class="block-hero__gridItemText">
          {$t('white-label-broker.Easily brand the platform with your logo and color scheme, creating a unique and recognizable presence in the market')}
        </p>
      </div>
      <div class="block-hero__gridItem">
        <img src={markets} alt="" class="block-hero__gridItemIcon" />
        <p class="block-hero__gridItemTitle">{$t('white-label-broker.Leading liquidity & technology')}</p>
        <p class="block-hero__gridItemText">
          {$t('white-label-broker.Empower your brokerage platform with the advanced technology and diverse range of multi-asset liquidity')}
        </p>
      </div>
      <div class="block-hero__gridItem">
        <img src={customisable} alt="" class="block-hero__gridItemIcon" />
        <p class="block-hero__gridItemTitle">{$t('white-label-broker.Customization options')}</p>
        <p class="block-hero__gridItemText">
          {$t('white-label-broker.Customize trading instruments, assets, menu options, minimum deposit and withdrawal amounts, chart types, and more')}
        </p>
      </div>
      <div class="block-hero__gridItem">
        <img src={certificate} alt="" class="block-hero__gridItemIcon" />
        <p class="block-hero__gridItemTitle">{$t('white-label-broker.Compliance with any regulatory')}</p>
        <p class="block-hero__gridItemText">
          {$t('white-label-broker.Mitigate the challenge of ensuring your platform complies with financial regulations with our KYC module included')}
        </p>
      </div>
    </div>
  </div>
</div>

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

  .block-hero {
    background: rgba(244, 246, 250, 1);
    padding-bottom: 176px;
    margin-top: -90px;

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

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

    @include breakpoint-down('tabM') {
      padding-top: 0;
      padding-bottom: 54px;
      margin-top: -50px;
    }

    &__bg {
      @include breakpoint-down('tabM') {
        padding-top: 191px;
        width: 724px;
        height: 734px;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
      }
    }

    &__image {
      overflow: hidden;
      position: relative;

      @include breakpoint-down('tabL') {
        height: 708px;
      }
    }

    &__bgItem {
      position: absolute;
    }

    &__bgItem1 {
      width: 22%;
      top: 19%;
      left: -11%;

      @include breakpoint-down('deskL') {
        width: 22.468%;
        top: 18.4%;
        left: -12.6%;
      }

      @include breakpoint-down('deskS') {
        width: 21.88%;
        top: 3.4%;
        left: -12.6%;
      }

      @include breakpoint-down('tabM') {
        width: 32.88%;
        top: 3.4%;
        left: -16.6%;
      }
    }

    &__bgItem2 {
      width: 22.5%;
      top: 28%;
      right: -12%;

      @include breakpoint-down('deskL') {
        width: 22.9%;
        top: 33.13%;
        right: -14.4%;
      }

      @include breakpoint-down('deskS') {
        width: 22.4%;
        top: 6.13%;
        right: -10.4%;
      }

      @include breakpoint-down('tabM') {
        width: 33.4%;
        top: 27.13%;
        right: -19.4%;
      }
    }

    &__bgItem3 {
      width: 20%;
      top: 46%;
      left: 8%;

      @include breakpoint-down('deskL') {
        width: 20.346%;
        top: 53.65%;
        left: 6.7%;
      }

      @include breakpoint-down('deskS') {
        width: 20%;
        top: 54.65%;
        left: 7.7%;
      }

      @include breakpoint-down('tabM') {
        width: 30%;
        top: 79.65%;
        left: -11.3%;
      }
    }

    &__bgItem4 {
      width: 18%;
      top: 54.5%;
      right: 13%;

      @include breakpoint-down('deskL') {
        width: 18.74%;
        top: 55.5%;
        right: 10.6%;
      }

      @include breakpoint-down('deskS') {
        width: 18.4%;
        top: 64.5%;
        right: 11.6%;
      }

      @include breakpoint-down('tabM') {
        width: 27.4%;
        top: 76.5%;
        right: -13.4%;
      }
    }

    &__bgItem5 {
      width: 15.4%;
      bottom: 2%;
      right: 31%;

      @include breakpoint-down('deskL') {
        width: 15.74%;
        bottom: 0;
        right: 31%;
      }

      @include breakpoint-down('deskS') {
        width: 15.1%;
        bottom: -6.5%;
        right: 34%;
      }

      @include breakpoint-down('tabM') {
        width: 22.1%;
        bottom: -0.5%;
        right: 23%;
      }
    }

    &__content {
      position: absolute;
      top: 205px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 5;
      width: 100%;
      max-width: 940px;

      @include breakpoint-down('deskL') {
        top: 160px;
        max-width: 840px;
      }

      @include breakpoint-down('deskS') {
        top: 54px;
        max-width: 616px;
      }

      @include breakpoint-down('tabM') {
        top: 80px;
        max-width: 90%;
      }
    }

    &__title {
      @include titleXL;

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

      span {
        display: block;
        color: $redPrimary;

        @include breakpoint-down('tabM') {
          display: inline;
        }
      }
    }

    &__text {
      text-align: center;
      max-width: 600px;
      margin-inline: auto;
      margin-bottom: 40px;

      @include breakpoint-down('deskL') {
        max-width: none;
        margin-bottom: 24px;
      }

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

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

    & :global(.block-hero__button) {
      @include baseCTA;

      margin-inline: auto;
    }

    &__list {
      max-width: 1526px;
      margin-inline: auto;
      margin-bottom: 93px;
      background: $techWhite;
      padding: 91px 63px;
      border-radius: 16px;
      display: flex;
      gap: 48px;

      @include breakpoint-down('deskL') {
        max-width: 1220px;
        padding: 61px 51px;
        margin-bottom: 61px;
      }

      @include breakpoint-down('deskS') {
        max-width: 688px;
        padding: 52px 73px;
        margin-top: 50px;
        margin-bottom: 64px;
        flex-wrap: wrap;
        column-gap: 20px;
        row-gap: 24px;
        justify-content: center;
      }

      @include breakpoint-down('tabM') {
        margin-top: 24px;
        margin-bottom: 45px;
        padding: 39px;
        gap: 40px;
      }
    }

    &__listItem {
      flex: 1;

      @include breakpoint-down('deskS') {
        flex: none;
        width: calc((100% - 20px * 2) / 3);
      }

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

    &__listItemCount {
      font-family: $Inter;
      text-align: center;
      font-size: 48px;
      font-weight: 800;
      line-height: 52.8px;
      margin-bottom: -3px;

      @include breakpoint-down('deskL') {
        font-size: 36px;
        line-height: 40px;
        margin-bottom: 8px;
      }

      @include breakpoint-down('deskS') {
        font-size: 28px;
        line-height: 31px;
        margin-bottom: 2px;
      }
    }

    &__listItemText {
      text-align: center;

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

    &__subtitle {
      @include titleXL;

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

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

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

      @include breakpoint-down('tabM') {
        width: 100%;
        max-width: 90%;
        margin-inline: auto;
      }
    }

    &__grid {
      display: flex;
      flex-wrap: wrap;
      row-gap: 113px;
      column-gap: 40px;

      @include breakpoint-down('deskL') {
        column-gap: 32px;
        row-gap: 24px;
      }

      @include breakpoint-down('deskS') {
        column-gap: 40px;
        row-gap: 24px;
        width: 100%;
        max-width: 530px;
        margin-inline: auto;
      }

      @include breakpoint-down('tabM') {
        gap: 40px;
      }
    }

    &__gridItem {
      width: calc((100% - 40px * 2) / 3);

      @include breakpoint-down('deskL') {
        width: calc((100% - 32px * 2) / 3);
      }

      @include breakpoint-down('deskS') {
        width: calc((100% - 40px) / 2);
      }

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

    &__gridItemIcon {
      width: 70px;
      min-width: 70px;
      height: 70px;
      margin-bottom: 16px;

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

    &__gridItemTitle {
      @include titleM;

      margin-bottom: 16px;

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

    &__gridItemText {
      @include smallDefault;

      color: $techBluePrimary;
    }
  }
</style>