<template>
  <header class="header">
    <div class="container">
      <div class="header__inner">
        <NuxtImg src="/logo.svg" alt="one2one" class="header__logo" draggable="false" />

        <hr class="header__divider desktop-only">

        <a href="#how-it-works" class="header__demo desktop-only">
          <IMonoPlay />
          <span>Демо видео о продукте</span>
        </a>

        <div class="header__socials">
          <SocialLink :href="app.instagramUrl">
            <IMonoInstagram />
          </SocialLink>
          <SocialLink :href="app.telegramUrl">
            <IMonoTelegram />
          </SocialLink>
          <SocialLink :href="app.whatsappUrl">
            <IMonoWhatsapp />
          </SocialLink>
        </div>

        <hr class="header__divider">

        <PhoneNumber />
      </div>
    </div>
  </header>
</template>

<script lang="ts" setup>
const app = useAppConfig()
</script>

<style lang="scss">
.header {
  position: sticky;
  top: 0;
  background-color: $color-gray-200;
  z-index: 100;

  &__inner {
    display: flex;
    align-items: center;
    height: 80px;
    padding: 16px 24px;
    justify-content: flex-start;

    @include mobile {
      padding: 12px 0;
      height: unset;
    }
  }

  &__logo {
    height: 21px;

    @include mobile {
      height: 16px;
    }
  }

  &__divider {
    height: 21px;
    width: 1px;
    border: none;
    background-color: $color-gray-400;
    margin-inline: 24px;

    @include mobile {
      margin-inline: 12px;
    }
  }

  &__demo {
    @include font(12px, 500, 15px);

    display: flex;
    align-items: center;
    gap: 8px;
    color: $color-gray-700;

    > svg {
      font-size: 24px;
      color: $color-green-500;
    }
  }

  &__socials {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-left: auto;
    font-size: 24px;

    @include mobile {
      font-size: 16px;
      gap: 16px;
    }
  }
}
</style>
