<script setup lang="ts">
const emit = defineEmits<{
  (event: 'close'): void
}>()
</script>

<template>
  <div my-8 px-3 sm:px-8 md:max-w-200 flex="~ col gap-4" relative>
    <button btn-action-icon absolute top--8 right-0 m1 aria-label="Close" @click="emit('close')">
      <div i-ri:close-line />
    </button>

    <img :alt="$t('app_logo')" src="/logo.svg" w-20 h-20 height="80" width="80" mxa class="rtl-flip">
    <h1 mxa text-4xl mb4>
      {{ $t('help.title') }}
    </h1>
    <p>
      {{ $t('help.desc_para1') }}
    </p>
    <p>
      <b text-primary>{{ $t('help.desc_highlight') }}</b>
      {{ $t('help.desc_para2') }}
    </p>
    <p>
      {{ $t('help.desc_para4') }}
      <a font-bold text-primary href="/m.webtoo.ls/@elk" target="_blank">
        {{ $t('help.desc_para5') }}
      </a>
      {{ $t('help.desc_para6') }}
    </p>
    {{ $t('help.desc_para3') }}
    <p flex="~ gap-2 wrap" mxa>
      <template v-for="team of teams" :key="team.github">
        <a :href="`https://github.com/sponsors/${team.github}`" target="_blank" rounded-full transition duration-300 border="~ transparent" hover="scale-105 border-primary">
          <img :src="`/avatars/${team.github}-100x100.png`" :alt="team.display" rounded-full w-15 h-15 height="60" width="60">
        </a>
      </template>
    </p>
    <p italic flex justify-center w-full>
      <span text-xl font-script>The Elk Team</span>
    </p>

    <button btn-solid mxa tabindex="2" @click="emit('close')">
      {{ $t('action.enter_app') }}
    </button>
  </div>
</template>