<template xmlns:div="http://www.w3.org/1999/html">
  <div class="flex flex-col h-screen w-screen bg-white dark:bg-gray-darkest">
    <div class="absolute inset-0 flex flex-col">
      <div class="m-auto text-center">
        <Logo class="m-auto logo" :img-src="iconGolemSrc" />
        <h1 class="text-3xl md:text-6xl text-gray-darkest dark:text-gray-lightest">
          TheGolem.cz
        </h1>
        <h2 class="text-1xl md:text-4xl text-gray-darkest dark:text-gray-lightest">
          One server to host them all!
        </h2>
      </div>
    </div>

    <div class="z-10 h-full flex flex-col">
      <div class="ml-auto mr-4 mt-4">
        <DarkModeToggle @darkModeChange="darkModeChange" />
      </div>
      <div class="ml-auto mt-auto mr-2 mb-2 text-gray-darkest dark:text-gray-lightest">
        contact us at: <a href="mailto:info@thegolem.cz">info@thegolem.cz</a>
      </div>
    </div>
  </div>
</template>

<script>
import DarkModeToggle from '@/components/darkmode/DarkModeToggle'

export default {
  components: {
    DarkModeToggle
  },
  data () {
    return {
      iconGolemSrc: '/icon/golem.svg'
    }
  },
  methods: {
    darkModeChange (darkMode) {
      this.iconGolemSrc = darkMode ? '/icon/golem-white.svg' : '/icon/golem.svg'
    }
  }
}
</script>

<style scoped>
.logo {
  max-width: 340px;
}

@media (min-width: 768px) {
  .logo {
    max-width: 440px;
  }
}

</style>
