<script>
  import Footer from './components/Footer.vue';
  import GdprConsent from './components/GdprConsent.vue';
  import Menu from './components/Menu.vue';

  const pagesWithCarousel = [
    'home', 'social', 'about', 'products'
  ];

  export default {
    data() {
      return {
        stickyClass: '',
        deviceClass: this.$isMobile() ? 'mobile' : 'desktop',
        width: window.innerWidth
      }
    },
    components: { Footer, Menu, GdprConsent },
    created() {
      window.addEventListener('scroll', this.handleScroll);
    },
    destroyed() {
      window.removeEventListener('scroll', this.handleScroll);
    },
    beforeRouteEnter() {
      this.stickyClass = '';
    },
    methods: {
      handleScroll() {
        const limit = this.$isMobile() ? 115 : 430;
        if (!pagesWithCarousel.includes(this.$route.name)) {
          this.stickyClass = 'has-sticky has-sticky-1'
          return;
        }

        if (window.scrollY > 5 && window.scrollY <= limit) {
          this.stickyClass = 'has-sticky has-sticky-0';
        } else if(window.scrollY > limit) {
          this.stickyClass = 'has-sticky has-sticky-1';
        } else {
          this.stickyClass = '';
        }
      },
    },
}
</script>

<template>
  <!-- <div class="width">{{ width }}px {{ deviceClass }}</div> -->
  <Menu :class="`${stickyClass}`" />    
  <div class="main-container" :class="`${stickyClass} ${deviceClass}`">
    <div class="content-wrapper">
      <RouterView />
    </div>
    <Footer></Footer>
    <gdpr-consent></gdpr-consent>
  </div>
</template>

<style lang="scss">
  .width {
    position: fixed;
    top: 0;
    right: 0;
    background-color: white;
    color: #121212;
    width: 150px;
    height: 30px;
    z-index: 12;
    border-bottom-right-radius: 10px;
    padding: 4px;
    opacity: 0.5;
  }
  .content-wrapper {
    padding-top: 120px;
    background-color: #000;
  }
  .content {
    background-color: #000;
    color: #fff;
    padding: 0 72px 72px;

      h2 {
      font-size: 36px;
      font-weight: 300;
      line-height: 50px;
      text-align: center;
      padding: 52px 0;
    }

    h4 {
      font-size: 20px;
      font-weight: 500;
      font-style: italic;
      line-height: 42px;
      text-align: center;
      padding: 72px 264px;
    }

    p {
      font-weight: 300;
      font-size: 16px;
      line-height: 24px;
      text-align: justify;

      &.centered {
        text-align: center;
      }
    }
  }

  @media only screen and (max-width: 767px) {
    .content-wrapper {
      padding-top: 115px;
    }
    .content {
      padding: 0 16px 72px;

      h4 {
        padding: 72px 0;
      }
    }
  }
</style>
