<template>
  <div class="w-full h-screen text-primary bg-opacity-0 flex justify-center items-center flex-col px-2">
    <h1 class="sm:text-5xl text-3xl font-bold text-center mb-5">Polarcraft S5</h1>
    <p class="max-w-xl mb-10 sm:text-base text-sm">
      <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="bg-black bg-opacity-50 px-2 rounded">/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 top-0 left-0 -z-10 w-full h-screen overflow-hidden">
      <img src="../assets/pictures/diamond_wall.png" class="h-full w-full object-cover brightness-75 blur-[1px] scale-105">
    </div>
  </div>
</template>

<script setup>
const config = useRuntimeConfig()
</script>