<script setup lang="ts">
const socials = [
  {
    name: 'YouTube',
    url: 'https://go.enderman.ch/youtube',
    icon: 'youtube-icon',
  },
  {
    name: 'Andrew',
    url: 'https://go.enderman.ch/andrew',
    icon: 'youtube-icon',
  },
  {
    name: 'Twitch',
    url: 'https://go.enderman.ch/twitch',
    icon: 'twitch',
  },
  {
    name: 'TikTok',
    url: 'https://go.enderman.ch/tiktok',
    icon: 'tiktok-icon',
  },
  {
    name: 'Twitter',
    url: 'https://go.enderman.ch/twitter',
    icon: 'twitter',
  },
  {
    name: 'Telegram',
    url: 'https://go.enderman.ch/telegram',
    icon: 'telegram',
  },
  {
    name: 'Discord',
    url: 'https://go.enderman.ch/discord',
    icon: 'discord-icon',
  },
  {
    name: 'GitHub',
    url: 'https://go.enderman.ch/github',
    icon: 'github-icon',
  },
  {
    name: 'Steam',
    url: 'https://go.enderman.ch/steam',
    icon: 'steam',
  },
]

const meta = {
  title: 'Enderman Online',
  description:
    'Discover me on your favorite social media and find ways to contact me here.',
  image: 'https://enderman.ch/images/logo.png',
  url: 'https://enderman.ch/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: 'en',
  },
  link: [
    {
      rel: 'icon',
      type: 'image/x-icon',
      href: '/favicon.ico',
    },
  ],
})
</script>

<template>
  <section>
    <h3 class="alex">Online presence</h3>
    <hr />
    <p>
      <strong>🚧 This page is currently under construction.</strong> Expect a
      lot more content to be added as time passes.
      <em>Please report all bugs you encounter via the link in the footer</em>,
      I will make sure to sand them down.
    </p>
    <hr />
    <div class="row">
      <div class="col-12 col-md-3">
        <h5 class="alex">Social media</h5>
        <ul class="list-style-type-none p-0">
          <li v-for="(page, index) in socials" :key="index">
            <div class="d-flex flex-row align-items-center gap-1">
              <XIcon :name="`logos:${page.icon}`" inline />
              <a
                class="link-hi"
                target="_blank"
                rel="noopener"
                :href="page.url"
              >
                {{ page.name }}
              </a>
            </div>
          </li>
        </ul>
      </div>
      <div class="col-12 col-md-9">
        <h5 class="alex">Contact me</h5>
        <p>
          Personal:
          <EMail
            class="link-hi"
            address="contact@enderman.ch"
            subject="Hey Enderman!"
          /><br />
          Manager: <EMail class="link-hi" address="manager@enderman.ch" /><br />
          Abuse: <EMail class="link-hi" address="abuse@enderman.ch" />
        </p>
      </div>
    </div>
  </section>
</template>
