<script lang="ts">
  import { t } from '$lib/translations';
  import Lang from "$components/header/Lang.svelte";
  import { popupForm } from "../../store";
</script>

<div class="header-top">
  <div class="header-top__bg"></div>
  <div class="container container-wide">
    <div class="header__item header__menu">
      <div class="nav" role="menu">
        <div
          class="nav_drop"
          role="menuitem"
          tabindex="0"
        >
          <div class="nav_drop__title">
            {$t('Solutions')}
            <div class="nav_dropArrow">
              <div class="nav_dropArrowItem nav_dropArrowItemUp" />
              <div class="nav_dropArrowItem nav_dropArrowItemDown" />
            </div>
          </div>
          <div class="nav_drop__submenu">
            <a href="/turnkey-solution" role="menuitem" tabindex="0">{$t('Turnkey Solution')}</a>
            <a href="/white-label-broker" role="menuitem" tabindex="0">{$t('Forex / CFD')}</a>
            <a href="/prop-firm" role="menuitem" tabindex="0">{$t('Prop Firm')}</a>
            <a href="/white-label-binary-options" role="menuitem" tabindex="0">{$t('Binary Options')}</a>
          </div>
        </div>
      </div>
      <div class="nav" role="menu">
        <div
          class="nav_drop"
          role="menuitem"
          tabindex="0"
        >
          <div class="nav_drop__title">
            {$t('Modules')}
            <div class="nav_dropArrow">
              <div class="nav_dropArrowItem nav_dropArrowItemUp" />
              <div class="nav_dropArrowItem nav_dropArrowItemDown" />
            </div>
          </div>
          <div class="nav_drop__submenu">
            <a href="/trading-platform" role="menuitem" tabindex="0">{$t('Trading Platform')}</a>
            <a href="/back-office" role="menuitem" tabindex="0">{$t('Back Office')}</a>
          </div>
        </div>
      </div>
      <div class="nav" role="menu">
        <div
          class="nav_drop"
          role="menuitem"
          tabindex="0"
        >
          <div class="nav_drop__title">
            {$t('More')}
            <div class="nav_dropArrow">
              <div class="nav_dropArrowItem nav_dropArrowItemUp" />
              <div class="nav_dropArrowItem nav_dropArrowItemDown" />
            </div>
          </div>
          <div class="nav_drop__submenu">
            <a href="/about" role="menuitem" tabindex="0">{$t('About Us')}</a>
            <a href="/team" role="menuitem" tabindex="0">{$t('Team')}</a>
            <a href="/events" role="menuitem" tabindex="0">{$t('Events')}</a>
          </div>
        </div>
      </div>
      <div class="nav" role="menu">
        <a
          role="menuitem"
          tabindex="0"
          on:click={() => popupForm.set(true)}
          on:keydown={(event) => {
              if (event.key === 'Escape') {
                popupForm.set(false);
              }
            }}
        >
          <span class="nav_drop__title">
            {$t('Contact Us')}
          </span>
        </a>
      </div>
      <div class="header__item header__item_lang">
        <Lang className="white" useShort={true} />
      </div>
    </div>
  </div>
</div>

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

  .header-top {
    background: $fontPrimary;
    height: 74px;
    transition: all .3s ease;
    padding-top: 26px;
    overflow: visible;

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

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

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

    .container {
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    &__bg {

      top: 0;
      position: absolute;
    }
  }

  .header__drop {
    display: flex;
    position: absolute;
    gap: 30px;
    opacity: 0;
    pointer-events: none;
    z-index: 2;
  }

  .header__item {
    display: flex;
    flex-direction: row;
    gap: 22px;
    align-items: flex-start;
    justify-content: flex-start;

    &_lang {
      margin-left: auto;

      @include breakpoint-down('deskM') {
        margin-left: 65px;
      }
    }
  }

  .nav {
    display: flex;
    align-items: center;
    gap: 40px;

    a {
      color: white;
      font-weight: 500;
      font-size: 14px;
      line-height: 18px;
      letter-spacing: 0;

      display: flex;
      align-items: center;
      cursor: pointer;
    }

    &_drop {
      transition: .2s ease;
      z-index: 2;

      & .nav_drop__title {
        color: white;
        font-weight: 500;
        font-size: 14px;
        line-height: 18px;
        letter-spacing: 0;

        display: flex;
        align-items: center;
        cursor: pointer;
      }

      & .nav_drop__submenu {
        flex-direction: column;
        display: flex;
        flex-wrap: nowrap;
        opacity: 1;
        width: 100%;
        transform-origin: top;
        transform: scaleY(0);
        gap: 12px;
        margin-top: 12px;
        overflow: hidden;
        transition: .2s ease;

        a {
          color: white;
          font-size: 12px;
          line-height: 18px;
          letter-spacing: 0;
        }
      }

      &:hover {
        background: rgba(0, 0, 0, 0.8);
        border-radius: 12px;
        padding: 12px 32px 20px;
        gap: 12px;
        opacity: 1;
        transform: translate(0, -12px);
        backdrop-filter: blur(20px);

        .nav_dropArrowItemDown {
          transform: translateY(18px);
        }

        .nav_dropArrowItemUp {
          transform: translateY(0);
        }

        & .nav_drop__submenu {
          opacity: 1;
          transform: scaleY(1);
        }
      }
    }

    &_dropArrow {
      display: flex;
      align-items: center;
      position: relative;
      overflow: hidden;
    }

    &_dropArrowItem {
      width: 10px;
      height: 7px;
      transition: 0.2s ease;
      margin: 0 9px;
    }

    &_dropArrowItemUp {
      transform: translateY(-18px);
      background-image: url('../../assets/icons/white-arrow-up.svg');
      background-repeat: no-repeat;
      position: absolute;
      transition: 0.2s ease;
    }

    &_dropArrowItemDown {
      background-image: url('../../assets/icons/white-arrow.svg');
      background-repeat: no-repeat;
    }
  }
</style>