<template>
  <div class="overflow-x-hidden">
    <div class="header">
      <div class="header-content">
        <SharedHeader />
      </div>
      <div class="header-content-slogan container d-flex justify-content-end">
        <div class="col-12 col-md-6">
          <video id="background-video" ref="background_video" autoplay loop muted playbackRate="0.7" webkit-playsinline playsinline poster="/images/secondary.jpg">
            <source src="/videos/leviathan_video.mp4" type="video/mp4">
          </video>
          <div class="text-center">
            <p>Bienvenido a Leviathán</p>
            <h1>Expertos en limpieza marina</h1>
            <div class="d-flex justify-content-center">
              <NuxtLink to="/servicios" class="btn px-3 py-2" @click="changeActualPage('Servicios')">Servicios</NuxtLink>
            </div>
          </div>
        </div>
      </div>
      <svg class="wave" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#ffffff" fill-opacity="1" d="M0,128L40,133.3C80,139,160,149,240,133.3C320,117,400,75,480,58.7C560,43,640,53,720,90.7C800,128,880,192,960,202.7C1040,213,1120,171,1200,149.3C1280,128,1360,128,1400,128L1440,128L1440,320L1400,320C1360,320,1280,320,1200,320C1120,320,1040,320,960,320C880,320,800,320,720,320C640,320,560,320,480,320C400,320,320,320,240,320C160,320,80,320,40,320L0,320Z"></path></svg>
    </div>
    <main>
      <NuxtPage />
    </main>
    <SharedFooter />
    <SharedWhatsapp />
  </div>
</template>

<script setup lang="ts">
const menuStore = useMenuStore();
const { changeActualPage } = menuStore;

const background_video = ref<HTMLVideoElement>();

onMounted(() => {
  if(background_video.value) {
    background_video.value.removeAttribute('controls');

    background_video.value.addEventListener('loadedmetadata', () => {
      background_video.value.controls = false;
    });
  }
})

</script>

<style scoped lang="scss">
.header {
  margin-top: 95px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;

  #background-video {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
    pointer-events: none;
  }
  .header-content {
    z-index: 1;
    text-align: center;
  }

  .header-content-slogan {
    margin: 50px 0px;
    h1 {
      font-size: 30px;
      margin-bottom: 20px;
    }
    p {
      font-size: 45px;
      font-weight: bold;
      margin-bottom: 0px;
    }
    a {
      background: #B4590A;
      color: #FFF;
    }
  }
}


.wave {
  //position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 0;
}

@media (min-width: 992px) {
  .header {
    height: 100vh;
    margin-top: 0px;

    .header-content-slogan {
      margin: 0;
    }
  }


  .wave {
    position: absolute;
  }

}

@media (min-width: 768px) {
  .header-content-slogan {
    height: calc(100% - 60%);
  }
}
</style>