<script setup>
import {onMounted} from "vue";
import {useUi} from "@/pinia/ui";

const ui = useUi()

onMounted(() => {
  const audio = new Audio('/DPIntro.mp4');
  audio.play()

  let $image = document.querySelector("#intro-image")
  let $text = document.querySelector("#intro-text")
  let $back = document.querySelector("#intro")

  setTimeout(() => {
    $image.setAttribute("class", 'active');
  }, 3500)

  setTimeout(() => {
    $text.setAttribute("class", 'active');
  }, 4500)

  setTimeout(() => {
    $text.setAttribute("class", 'inactive');
    $image.setAttribute("class", 'inactive');

    setTimeout(() => {
      //ui.intro = false;
      $back.setAttribute("class", 'inactive');
      setTimeout(() => {
        ui.intro = false;
      }, 3000)
    }, 3000)
  }, 9000)
})
</script>

<template>
  <div id="intro" flex flex-center>
    <div flex flex-column flex-center>
      <img id="intro-image" src="/DigitalPower.png">
      <h2 id="intro-text" noselect="" class="mt-4">La fabrica de aplicaciones <br> Web</h2>
    </div>
  </div>
</template>

<style scoped lang="scss">
#intro {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background: white;
  z-index: 100000000;
}

.active {
  animation: activate 3s forwards;
}

.inactive {
  animation: deactivate 3s forwards;
}

img {
  width: 240px;
  pointer-events: none;
  user-select: none;
  margin-bottom: 1em;
}

h2 {
  color: var(--primary);
  margin: unset !important;
  text-align: center;
}

img, h2 {
  opacity: 0;
}

@keyframes activate {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes deactivate {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}


</style>