<template>
  <div class="flex h-screen w-full flex-col items-center justify-center bg-transparent px-2 text-primary">
    <h1 class="mb-5 text-center text-3xl font-bold sm:text-5xl">Polarcraft S5</h1>
    <p class="mb-10 max-w-xl text-sm sm:text-base">
      <b>Welkom bij Polarcraft seizoen 5!</b> Start door in te loggen met Discord en vervolgens je account te koppelen met Minecraft. Als je problemen hebt maak dan in Discord een ticket aan door het <span class="highlight">/ticket</span> commando uit te voeren.
    </p>
    <Button @click="navigateTo(config.public.redirectUrl, { external: true })">
      Log in with Discord
      <Icon size="1.6em" name="ic:baseline-discord" />
    </Button>

    <div class="absolute left-0 top-0 -z-10 h-screen w-full overflow-hidden">
      <nuxt-img src="/pictures/diamond_wall.webp" class="h-full w-full scale-105 object-cover blur-[1px] brightness-75" />
    </div>
  </div>
</template>

<script setup>
definePageMeta({
  layout: 'blank'
})

useHead({ title: 'Login | Polarcraft' })

const config = useRuntimeConfig()
</script>
