<template>
  <div>
    <div class="w-full flex justify-center">
      <nav class="[&>*]:p-2 text-white bottom-0 right-0 fixed flex justify-center z-50">
        <a href="https://www.youtube.com/channel/UCATtFHnOLDCv8qroi2KW3ZA" target="about:blank" class="mt-1">
          <img src="/youtube.svg" alt="youtube channel" />
        </a>
        <a href="mailto:contact@evilspins.com">📬</a>
        <a href="/about">❓</a>
      </nav>
    </div>
    <section class="splash-screen flex items-center flex-col">
      <figure class="ui">
        <img class="logo" src="/logo.svg">
        <h1 class="text-white pt-6 text-sm md:text-md lg:text-lg text-center font-bold tracking-widest">Compilations
          Indépendantes
        </h1>
        <button class="button button--screened relative top-16 flex justify-center items-center" @click="scrollDown()">
          ↓
        </button>
      </figure>
      <div class="shadow screen" />
      <video class="animation screen" loop autoplay muted ref="animation">
        <source src="https://files.erudi.fr/evilspins/sloughi-run-loop-big.webm" type="video/webm">
        <source src="https://files.erudi.fr/evilspins/sloughi-run-loop-small.webm" type="video/webm"
          media="all and (max-width: 640px)">
      </video>
    </section>
    <section class="flex justify-center">
      <div class="flex max-w-2xl">
        <compilationsList />
      </div>
    </section>
  </div>
</template>
<script setup lang="ts">
// SEO
useSeoMeta({
  title: 'evilSpins - compilations indépendantes',
  ogTitle: 'evilSpins - compilations indépendantes',
  description: 'evilSpins - compilations indépendantes, la bande originale d\'un film qui n\'existe pas',
  ogDescription: 'evilSpins - compilations indépendantes, la bande originale d\'un film qui n\'existe pas',
  ogImage: 'https://evilspins.com/logo.svg'
})

const dataStore = useDataStore()

const scrollDown = function () {
  window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' })
}
</script>

<style lang="scss" scoped>
body {
  margin: 0;
  overflow-x: hidden;
}

.logo,
.button,
.shadow,
.animation,
.mix {
  transition: .7s opacity;
}

.screen {
  position: absolute;
  height: 100vh;
  min-width: 100%;
  max-width: 100%;
}

.splash-screen {
  position: relative;
  height: 100vh;
  background-color: black;
}

.animation {
  z-index: 1;
  object-fit: cover;
  opacity: .8;
  /* opacity: 0; */
}

.mix {
  z-index: 4;
  position: fixed;
}

.shadow {
  z-index: 3;
  box-shadow: rgb(0, 0, 0) 0px 0px 170px 70px inset;
  opacity: .9;
}

.ui {
  z-index: 4;
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 80%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.logo {
  filter: drop-shadow(8px 8px 0 rgb(0 0 0 / 0.8));
}

.mixPlayer {
  background: black;
  max-height: 70vh;
}

.hide {
  opacity: 0;
  z-index: 0;
}

.show {
  opacity: 1;
}
</style>