<script lang="ts">
  import { t, locale } from '$lib/translations';
  import Lang from './Lang.svelte';

  const affStore_joinUs = 'https://affstore.com/?source=blog&utm_source=blog&utm_medium=button';
  const affStore_signIn = 'https://my.affstore.com/offers?source=blog&utm_source=blog&utm_medium=button';
</script>

<header class="header">
  <div class="container">
    <div class="header__wrapper">

      <div class="header__logoWrapper">
        <div class="header__logo">
          <a href="{affStore_signIn}"><img src="/affstore-logo.svg" alt="Logo" /></a>
        </div>
        <Lang />
      </div>
      
      <div class="header__control">
        <div class="header__controlButtons {$locale === 'es' ? 'reverse' : ''}">
          <a href="{affStore_signIn}" class="button small-transparent header__signIn">{$t('Sign in')}</a>
          <a class="button" href="{affStore_joinUs}">{$t('Join now')}</a>
        </div>
      </div>
    </div>
  </div>
</header>

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

  .header {
    position: fixed;
    width: 100%;
    z-index: 10;
    top: 0;
    padding: 16px 0;
    background: $grey;

    .button {
      @include button;

      // display: flex;
      align-items: center;
      justify-content: center;
      width: max-content;
      padding: 9px 17px;
      border: 1px solid $black100;
      border-radius: 8px;
      background: $black;
      color: $grey;
      gap: 8px;
      user-select: none;
      cursor: pointer;
      transition: $transition;
      position: relative;
      overflow: hidden;

      @include breakpoint-down('tabS') {
        padding: 7px 13px;
      }

      :global(> svg) {
        width: 20px;
        height: 20px;
      }

      &:after {
        content: '';
        position: absolute;
        top: calc(50% - 10px);
        left: calc(50% - 10px);
        opacity: 0;
        pointer-events: none;
        width: 20px;
        height: 20px;
        animation: spin 2s linear 0s infinite;
      }

      &.small {
        padding: 6px;
      }

      &.transparent {
        border: 1px solid transparent;
        background: transparent;
        color: $grey200;
      }

      &.small-transparent {
        padding: 6px;
        border: 1px solid transparent;
        background: transparent;
        color: $grey200;
      }

      &.green {
        border-color: $green25;
        background: $green25;
        color: $green1000;

        :global(> svg path) {
          stroke: $black;
        }
      }

      &.show-more {
        background: $grey25;
        border-color: $grey25;
        color: $black;

        &:after {
          background-color: $grey25;
          background-image: url("data:image/svg+xml,%3Csvg width='20' height='21' viewBox='0 0 20 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.0001 2.29215V5.62549M10.0001 15.6255V18.9588M5.00008 10.6255H1.66675M18.3334 10.6255H15.0001M15.8988 16.5242L13.5417 14.1672M15.8988 4.79211L13.5417 7.14913M4.10139 16.5242L6.45841 14.1672M4.10139 4.79211L6.45841 7.14913' stroke='%23B1AFB4' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
          background-repeat: no-repeat;
          background-size: 20px 20px;
          background-position: center center;
        }
      }

      &.linked-in {
        background: $blue;
        border-color: $blue;

        &:hover {
          background: $blue50;
        }

        &:active {
          background: $blue100;
        }
      }

      &.instagram {
        border: none;
        background: radial-gradient(
                        182.65% 122.8% at 84.5% 113.5%,
                        #ff1b90 24.39%,
                        #f80261 43.67%,
                        #ed00c0 68.85%,
                        #c500e9 77.68%,
                        #7017ff 89.32%
        ),
        radial-gradient(
                        51.8% 49.8% at 36.25% 96.55%,
                        #ffd600 0%,
                        #ff6930 48.44%,
                        #fe3b36 73.44%,
                        rgba(254, 59, 54, 0) 100%
        );
      }

      &.loading {
        pointer-events: none;
        color: transparent;

        &:after {
          opacity: 1;
        }
      }

      &.disabled {
        pointer-events: none;
        opacity: .7;
      }
    }

    @include breakpoint-down('tabS') {
      padding: 12px 0;
    }

    &__wrapper {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    &__logo {
      max-width: 139px;

      @include breakpoint-down('tabS') {
        max-width: 104px;
      }
    }

    &__logoWrapper {
      align-items: center;
      display: flex;
      gap: 32px;
    }

    &__control {
      display: flex;
      align-items: center;
      gap: 32px;
    }

    &__link {
      display: flex;
      align-items: center;
      gap: 4px;

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

    &__linkChevron {
      @include important;

      background: $green;
      color: $green100;
      padding: 1px 6px;
      border-radius: 8px;
    }

    &__controlButtons {
      display: flex;
      align-items: center;
      gap: 20px;

      &.reverse {
        flex-direction: row-reverse;
      }
    }
   
  }
  :global(.header__signIn) {
      @include breakpoint-down('tabS') {
        display: none;
      }
    }
</style>