<script lang="ts">
  import hero from '../../../assets/images/trading-platform/hero.webp';

  import Button from '../../button/Button.svelte';
  import { onMount } from 'svelte';
  import { loadEvent, popupForm } from '../../../store';
  import loadObserver from '$utils/loadObserver';
  import { t } from '$lib/translations';

  let width = 0;
  let height = 0;

  onMount(() => {

  });

  loadEvent.set(false);

  const onload = loadObserver(() => {
    loadEvent.set(true);
  });
</script>

<div class="block-hero">
  <div class="container">
    <div class="block-hero__wrapper">
      <h1 class="block-hero__title">{$t('trading-platform.White Label Trading Platform')}</h1>
      <p class="block-hero__subtitle">{$t('trading-platform.Primed for customization under your brand')}</p>
      <Button text={$t('trading-platform.Get in touch')} className="block-hero__button" onClick={() => popupForm.set(true)} />
      <div class="block-hero__animation">
        <div id="block-hero__animationContainer">
          <img use:onload src={hero} alt="" class="block-hero__image" />
          <canvas id="block-hero__canvas" {width} {height} />
          <div id="block-hero__dom_overlay_container" />
        </div>
      </div>
    </div>
  </div>
</div>

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

  .block-hero {
    position: relative;
    background: $blue;
    padding-top: 159px;
    padding-bottom: 109px;
    overflow: hidden;
    display: flex;
    align-items: stretch;

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

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

    @include breakpoint-down('tabM') {
      padding-top: 163px;
    }

    &__wrapper {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    &__title {
      @include titleXL;

      color: $techWhite;

      text-align: center;
      width: 100%;
      max-width: 919px;
      margin-inline: auto;
      margin-bottom: 8px;
    }

    &__subtitle {
      color: $techWhite;

      text-align: center;
      width: 100%;
      max-width: 595px;
      margin-inline: auto;
      margin-bottom: 24px;

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

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

      margin-bottom: 65px;
      margin-inline: auto;
      min-width: 260px;

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

      @include breakpoint-down('deskS') {
        min-width: 180px;
        margin-bottom: 17px;
      }

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

    &__animation {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }

    #block-hero__animationContainer {
      position: relative;
      width: 100% !important;
      max-width: 1400px;
      height: auto !important;
    }

    #block-hero__canvas {
      position: absolute;
      z-index: 2;
      top: -9%;
      left: 50%;
      transform: translateX(-50%);
      display: block;
      background-color: rgba(4, 13, 33, 0);
      width: 100% !important;
      height: calc(100% + 9%) !important;
      transition: 0.3s ease-in-out;

      @include breakpoint-down('deskL') {
        width: 83% !important;
        margin: 0 auto;
      }

      @include breakpoint-down('deskS') {
        width: 77% !important;
      }

      @include breakpoint-down('tabM') {
        width: 155% !important;
        left: 50%;
        transform: translateX(-50%);
      }
    }

    #block-hero__dom_overlay_container {
      pointer-events: none;
      overflow: hidden;
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      display: block;
    }

    &__image {
      width: 100%;
      max-width: 1440px;
      height: 100%;
      position: relative;
      z-index: -2;
      transition: 0.3s ease-in-out;
      opacity: 0;

      @include breakpoint-down('deskL') {
        width: 83%;
        margin: 0 auto;
      }

      @include breakpoint-down('deskS') {
        width: 77%;
      }

      @include breakpoint-down('tabM') {
        width: 155%;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
      }
    }

    &:after {
      content: '';
      position: absolute;
      left: 50%;
      top: calc(50% - 50px);
      transform: translate(-50%, -50%);
      width: 1700px;
      height: 1700px;
      border-radius: 1700px;
      background: radial-gradient(50% 50% at 50% 50%, #7495d4 -100%, rgba(5, 13, 33, 0) 100%);
      pointer-events: none;
      z-index: 0;
    }

    //&:before {
    //  content: "";
    //  position: absolute;
    //  left: 50%;
    //  transform: translateX(-50%);
    //  bottom: -100px;
    //  width: 75%;
    //  height: 441px;
    //  border-radius: 1801px;
    //  background: radial-gradient(50% 50% at 50% 50%, #7495D4 -50%, rgba(5, 13, 33, 0) 100%);
    //  pointer-events: none;
    //  z-index: 0;
    //
    //  @include breakpoint-down('tabM') {
    //    display: none;
    //  }
    //}
  }
</style>