<template>
  <div class="relative w-full lg:h-[100vh] overflow-hidden">
    <div class="absolute lg:left-10 md:left-6 lg:top-10 md:top-12 left-6 top-8 z-10">
      <img src="/images/arirang_logo.svg" class="lg:w-52 md:w-40 w-20" alt="Arirang Logo" />
    </div>
    <video :src="videos.data[0].videos" autoplay muted loop class="w-full h-auto object-cover"></video>
    <!-- <div class="absolute lg:bottom-0 md:-bottom-8 -bottom-3 z-10">
      <img src="/images/aksen.png" class="w-full" alt="Accent Image" />
    </div> -->
  </div>
</template>
<script setup>
import { useFetch } from "nuxt/app";
const appConfig = useAppConfig();

const { data: videos } = await useFetch(appConfig.api.url + "/api/videos?highlight=true", {
  method: "GET",
});
</script>
<style></style>
