<script>
import LocaleSelector from './LocaleSelector.vue';

export default {
    props: {
        type: String,
        title: String,
    },
    components: { LocaleSelector }
}
</script>

<template>
  <section class="menu" :class="type">
    <div class="overlay">
      <nav>
        <img class="logo" src="@images/logo-kreis_3.png" />
        <div class="links">
          <router-link class="link" to="/">{{ $t('menu.home')}}</router-link>
          <router-link class="link" to="/about">{{ $t('menu.about') }}</router-link>
          <router-link class="link" to="/products">{{ $t('menu.products') }}</router-link>
          <router-link class="link" to="/social">{{ $t('menu.social') }}</router-link>
          <router-link class="link" to="/contact">{{ $t('menu.contact') }}</router-link>
          <!-- <router-link class="link" to="/social">{{ $t('menu.social') }}</router-link>
          <router-link class="link" to="/contact">{{ $t('menu.contact') }}</router-link> -->
          <LocaleSelector class="link"></LocaleSelector>
        </div>
      </nav>
      <h1 class="title" v-if="title">{{ title }}</h1>
    </div>
  </section>
</template>

<style lang="scss" scoped>
  .menu {
    height: 574px;
    background-repeat: no-repeat;
    background-size: contain;

    .overlay {
      width: 100%;
      height: 100%;
      background: linear-gradient(89.82deg, rgba(30, 30, 30, 0.72) -6.88%, rgba(0, 0, 0, 0.18) 87.45%);
    }

    .title {
      color: #fff;
      font-weight: 500;
      font-size: 65px;
      line-height: 70px;
      text-align: right;
      padding: 88px 93px 0;
    }
    nav {
     padding: 24px 93px 0;
     display: grid;
     grid-template-columns: auto auto;

      .logo {
        height: 72px;
        width: 72px;;
      }

      .links {
        justify-self: end;
        align-self: center;

        .link {
          margin-right: 54px;
          color: #fff;
          text-decoration: none;

          &.router-link-active {
            color: #FECE16;
          }

          &:hover {
            color: #FECE16;
          }

          &:last-child {
            margin-right: 0;
          }
        }
      }
    }

    &.home {
      background-image: url('@images/mountains.png');
    }

    &.about {
      background-image: url('@images/coffee1.jpg');
    }

    &.products {
      background-image: url('@images/products.png');
    }
    
    &.social {
      background-image: url('@images/proysoc.01.png');
    }

    &.contact {
      background-color: #000;
      height: 180px;
      .overlay {
        background: transparent;
      }
    }
  }
</style>