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

  import preview1 from '../../../assets/images/cfd-package/hero/preview1.webp';
  import preview2 from '../../../assets/images/cfd-package/hero/preview2.webp';
  import preview3 from '../../../assets/images/cfd-package/hero/preview3.webp';
  import preview4 from '../../../assets/images/cfd-package/hero/preview4.webp';

  import Slide1 from './slides/Slide1.svelte';
  import Slide2 from './slides/Slide2.svelte';
  import Slide3 from './slides/Slide3.svelte';
  import Slide4 from './slides/Slide4.svelte';
  import { popupForm } from '../../../store';

  const slides = [Slide1, Slide2, Slide3, Slide4];

  const previews = [preview1, preview2, preview3, preview4];
  const THUMB_COUNT = previews.length;

  let activeIndex = 0;

  function goTo(index: number) {
    activeIndex = ((index % THUMB_COUNT) + THUMB_COUNT) % THUMB_COUNT;
  }

  function prev() {
    goTo(activeIndex - 1);
  }

  function next() {
    goTo(activeIndex + 1);
  }
</script>

<div class="block-hero">
  <div class="container">
    <p class="block-hero__badge">{$t('cfd-package.New package')}</p>
    <div class="block-hero__content">
      <div class="block-hero__content-left">
        <h1>{$t('cfd-package.Launch Your Own Forex/')}&#8203;{$t('cfd-package.CFD Brokerage Platform')} <br /><span>{$t('cfd-package.Faster Than Ever')}</span></h1>
      </div>
      <div class="block-hero__content-right">
        <div class="redSignal" />
        <p class="block-hero__content-subtitle">{$t('cfd-package.A powerful, cost-efficient entry plan designed for brokers who want to go live quickly, reduce infrastructure costs and scale step-by-step.')}</p>
      </div>
      <div class="block-hero__content-cta">
        <div class="block-hero__content-btn" on:click={() => popupForm.set(true)}>{$t('cfd-package.Talk to Us')}</div>
      </div>
    </div>

    <div class="block-hero__slider">
      <div class="block-hero__slider-previews">
        <div
          class="block-hero__slider-arrow block-hero__slider-arrow--prev"
          on:click={prev}
          role="button"
          tabindex="0"
          on:keydown={(e) => e.key === 'Enter' && prev()}
          aria-label="Previous slide"
        >
          <div class="block-hero__slider-arrow-icon"></div>
        </div>

        {#each previews as src, i}
          <div
            class="block-hero__slider-preview"
            class:block-hero__slider-preview--active={i === activeIndex}
            style="background-image: url({src})"
            on:click={() => goTo(i)}
            role="button"
            tabindex="0"
            on:keydown={(e) => e.key === 'Enter' && goTo(i)}
            aria-label="Go to slide {i + 1}"
          ></div>
        {/each}

        <div
          class="block-hero__slider-arrow block-hero__slider-arrow--next"
          on:click={next}
          role="button"
          tabindex="0"
          on:keydown={(e) => e.key === 'Enter' && next()}
          aria-label="Next slide"
        >
          <div class="block-hero__slider-arrow-icon"></div>
        </div>

        <div
          class="block-hero__slider-thumbs"
        >
          {#each previews as _, i}
            <div
              class="block-hero__slider-thumb"
              class:block-hero__slider-thumb--active={i === activeIndex}
            ></div>
          {/each}
        </div>
      </div>

      <div class="block-hero__slider-slides">
        <div class="block-hero__monitor-screen">
          <div class="block-hero__slider-slide">
            <svelte:component this={slides[activeIndex]} />
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

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

  .block-hero {
    padding-top: 35px;
    background-color: $headerDark;
    overflow-x: hidden;

    @media (max-width: 1023px) {
      padding-top: 0;
    }

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

    .container {
      @include breakpoint-down('deskM') {
        max-width: 1070px;
      }

      @include breakpoint-down('tabM') {
        max-width: 500px;
      }
    }

    &__badge {
      width: max-content;
      font-size: 20px;
      font-weight: 500;
      line-height: 26px;
      color: #6CE9A6;
      border: 2px solid #6CE9A6;
      border-radius: 12px;
      padding: 0 8px;

      @include breakpoint-down('deskM') {
        font-size: 12px;
        line-height: 14px;
        border-radius: 8px;
        padding: 2px 6px;
        letter-spacing: -0.2px;
      }

      @include breakpoint-down('tabM') {
        margin: 0 auto;
      }
    }

    &__content {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-top: 20px;
      position: relative;

      @include breakpoint-down('deskM') {
        margin-top: 16px;
        flex-direction: column;
        align-items: flex-start;
      }

      @include breakpoint-down('tabM') {
        margin-top: 12px;
        align-items: center;
      }

      &-left {
        max-width: 730px;

        @include breakpoint-down('deskM') {
          max-width: 560px;
        }

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

        h1 {
          font-size: 64px;
          font-weight: 400;
          line-height: 72px;
          letter-spacing: -0.4px;
          color: $textPrimaryDefault;
          word-break: break-word;

          @include breakpoint-down('deskM') {
            font-size: 26px;
            font-weight: 500;
            line-height: 32px;
            letter-spacing: -0.6px;

            br {
              display: none;
            }
          }

          @include breakpoint-down('tabM') {
            text-align: center;

            br {
              display: block;
            }
          }

          span {
            background: linear-gradient(180deg, #FF282B -4.69%, #FF9387 147.46%);
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
          }
        }
      }

      &-right {
        max-width: 452px;

        @include breakpoint-down('deskM') {
          max-width: 378px;
          margin-top: 8px;
        }

        @include breakpoint-down('tabM') {
          max-width: 284px;
          margin-top: 255px;
        }

        .redSignal {
          width: 529px;
          height: 227px;
          background-image: url('../../../assets/images/cfd-package/hero/red_signal.webp');
          background-size: cover;
          background-position: 50% 50%;
          position: absolute;
          top: -50px;
          right: -10px;
          mix-blend-mode: lighten;

          @include breakpoint-down('deskL') {
            right: 0;
          }

          @include breakpoint-down('deskM') {
            width: 651px;
            height: 279px;
            top: -55px;
            left: 310px;
            right: 0;
          }

          @include breakpoint-down('tabM') {
            width: 443px;
            height: 189px;
            top: 95px;
            left: 50%;
            transform: translateX(-221.5px);
          }
        }

        p {
          font-size: 16px;
          font-weight: 400;
          line-height: 24px;
          letter-spacing: -0.1px;
          color: $textSecondaryDefault;

          @include breakpoint-down('deskM') {
            font-size: 12px;
            line-height: 14px;
          }

          @include breakpoint-down('tabM') {
            text-align: center;
          }
        }
      }

      &-cta {
        position: absolute;
        bottom: 6px;
        left: 509px;

        @include breakpoint-down('deskM') {
          bottom: -58px;
          left: 0;
        }

        @include breakpoint-down('tabM') {
          bottom: 54px;
          left: 50%;
          transform: translateX(-142px);
        }
      }

      &-btn {
        width: 204px;
        height: 52px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        line-height: 24px;
        font-weight: 450;
        background-color: #FF282B;
        color: $textPrimaryDefault;
        border-radius: 52px;
        cursor: pointer;

        @include breakpoint-down('deskM') {
          width: 169px;
          height: 42px;
          font-size: 14px;
          line-height: 18px;
          font-weight: 400;
          border-radius: 60px;
        }

        @include breakpoint-down('tabM') {
          width: 284px;
        }
      }
    }

    &__slider {
      display: flex;
      justify-content: space-between;
      padding: 72px 0 68px;

      @include breakpoint-down('deskM') {
        gap: 43px;
        padding: 110px 0 64px;
      }

      @include breakpoint-down('tabM') {
        flex-direction: column-reverse;
        padding: 32px 0 54px;
        gap: 30px;
      }
    }

    &__slider-previews {
      height: max-content;
      display: flex;
      flex-direction: column;
      gap: 12px;
      position: relative;

      @include breakpoint-down('tabM') {
        width: max-content;
        flex-direction: row;
        justify-content: center;
        gap: 8px;
        margin: 0 auto;
      }
    }

    &__slider-preview {
      width: 150px;
      height: 150px;
      border-radius: 28px;
      cursor: pointer;
      border: 3px solid transparent;
      transition: border-color 0.2s ease;
      background-size: cover;
      background-position: 50% 50%;

      @include breakpoint-down('deskM') {
        width: 78px;
        height: 78px;
        border-radius: 18px;
        border: 2.55px solid transparent;
      }

      @include breakpoint-down('tabM') {
        width: 64px;
        height: 64px;
        border-radius: 12px;
        border: 2.04px solid transparent;
      }

      &--active {
        border-color: #FF282B;
      }
    }

    &__slider-slides {
      width: 1134px;
      height: 650px;
      background-color: #28282C;
      border-radius: 40px;
      overflow: hidden;

      @include breakpoint-down('deskM') {
        width: 100%;
        height: 348px;
        border-radius: 22px;
      }

      @include breakpoint-down('tabM') {
        width: 100%;
        height: initial;
        background-color: initial;
        border-radius: initial;
      }
    }

    &__monitor-screen {
      width: 948px;
      height: 690px;
      background-image: url('../../../assets/images/cfd-package/hero/mockup.webp');
      background-size: cover;
      background-position: 50% 50%;
      position: relative;
      top: 51px;
      left: 50%;
      transform: translateX(-474px);

      @include breakpoint-down('deskM') {
        width: 539px;
        height: 390px;
        top: 22px;
        transform: translateX(-269.5px);
      }

      @include breakpoint-down('tabM') {
        width: initial;
        height: initial;
        top: initial;
        left: initial;
        transform: initial;
        background-image: initial;
      }
    }

    &__slider-slide {
      width: 917px;
      height: 524px;
      position: relative;
      top: 15px;
      left: 16px;
      color: $textPrimaryDefault;

      @include breakpoint-down('deskM') {
        top: 8px;
        left: 9px;
      }

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

    &__slider-arrow {
      width: 55px;
      height: 55px;
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      left: 50%;
      transform: translateX(-27.5px);
      cursor: pointer;

      @include breakpoint-down('deskM') {
        width: 24px;
        height: 24px;
        transform: translateX(-12px);
      }

      @include breakpoint-down('tabM') {
        transform: initial;
        left: initial;
      }
    }

    &__slider-arrow-icon {
      width: 38px;
      height: 18px;
      background-image: url('../../../assets/images/cfd-package/hero/arrow.svg');
      background-size: contain;
      background-position: 50% 50%;
      background-repeat: no-repeat;

      @include breakpoint-down('deskM') {
        width: 15.84px;
      }
    }

    &__slider-arrow--prev {
      top: -55px;

      @include breakpoint-down('deskM') {
        top: -36px;
      }

      @include breakpoint-down('tabM') {
        top: 50%;
        left: -24px;
        transform: translateY(-12px) rotate(-90deg);
      }
    }

    &__slider-arrow--next {
      bottom: -55px;
      transform: translateX(-27.5px) rotate(180deg);

      @include breakpoint-down('deskM') {
        bottom: -36px;
        transform: translateX(-12px) rotate(180deg);
      }

      @include breakpoint-down('tabM') {
        bottom: initial;
        top: 50%;
        right: -24px;
        transform: translateY(-12px) rotate(90deg);
      }
    }

    &__slider-thumbs {
      display: flex;
      flex-direction: column;
      gap: 3px;
      position: absolute;
      top: 50%;
      right: -23px;
      transform: translateY(-12.5px);

      @include breakpoint-down('tabM') {
        flex-direction: row;
        top: -20px;
        right: initial;
        left: 50%;
        transform: translateY(0) translateX(-12.5px);
      }
    }

    &__slider-thumb {
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background-color: #525659;
      transition: background-color 0.2s ease;
    }

    &__slider-thumb--active {
      background-color: #ADB1B7;
    }
  }
</style>