<script setup lang="ts">
const config = useAppConfig()
const fqdn = config.url.split('//')[1]

const socials = [
  {
    name: 'YouTube',
    url: `${config.shortener}/youtube`,
    icon: {
      name: 'logos:youtube-icon',
      color: 'white',
    },
  },
  {
    name: 'Andrew',
    url: `${config.shortener}/andrew`,
    icon: {
      name: 'logos:youtube-icon',
      color: 'white',
    },
  },
  {
    name: 'Twitch',
    url: `${config.shortener}/twitch`,
    icon: {
      name: 'fa:twitch',
      color: '#B68CFF',
    },
  },
  {
    name: 'TikTok',
    url: `${config.shortener}/tiktok`,
    icon: {
      name: 'logos:tiktok-icon',
      color: 'white',
    },
  },
  {
    name: 'Twitter',
    url: `${config.shortener}/twitter`,
    icon: {
      name: 'logos:twitter',
      color: 'white',
    },
  },
  {
    name: 'Telegram',
    url: `${config.shortener}/telegram`,
    icon: {
      name: 'logos:telegram',
      color: 'white',
    },
  },
  {
    name: 'Discord',
    url: `${config.shortener}/discord`,
    icon: {
      name: 'logos:discord-icon',
      color: 'white',
    },
  },
  {
    name: 'GitHub',
    url: `${config.shortener}/github`,
    icon: {
      name: 'fa:github',
      color: 'white',
    },
  },
  {
    name: 'Steam',
    url: `${config.shortener}/steam`,
    icon: {
      name: 'fa:steam',
      color: 'white',
    },
  },
]

const meta = {
  title: 'Enderman Online',
  description:
    'Discover me on your favorite social media and find ways to contact me here.',
  image: `${config.url}/images/logo.png`,
  url: `${config.url}/projects`,
}

useSeoMeta({
  title: meta.title,
  description: meta.description,
  ogTitle: meta.title,
  ogDescription: meta.description,
  ogImage: meta.image,
  ogUrl: meta.url,
  ogType: 'website',
  twitterTitle: meta.title,
  twitterDescription: meta.description,
  twitterImage: meta.image,
  twitterCard: 'summary',
})

useHead({
  title: 'Socials',
  htmlAttrs: {
    lang: config.locale || 'en',
  },
  link: [
    {
      rel: 'icon',
      type: 'image/x-icon',
      href: '/favicon.ico',
    },
  ],
})
</script>

<template>
  <section class="page">
    <h3>Online presence</h3>
    <Construction />
    <div class="flex flex-col md:flex-row gap-4">
      <div class="md:basis-0 md:flex-grow-[1]">
        <h5>Social media</h5>
        <ul class="list-style-type-none p-0">
          <li v-for="(page, index) in socials" :key="index">
            <NuxtLink target="_blank" rel="noopener" :href="page.url">
              <iconify-icon
                :icon="page.icon.name"
                :style="{ color: page.icon.color }"
                width="1em"
                height="1em"
                inline
              />
              <span class="mx-2">{{ page.name }}</span>
            </NuxtLink>
          </li>
        </ul>
      </div>
      <div class="md:basis-0 md:flex-grow-[3]">
        <h5>Contact me</h5>
        <p>
          Personal:
          <EMail :address="`contact@${fqdn}`" subject="Hey Enderman!" /><br />
          Manager: <EMail :address="`manager@${fqdn}`" /><br />
          Abuse: <EMail :address="`abuse@${fqdn}`" />
        </p>
      </div>
    </div>
  </section>
</template>
