<script setup lang="ts">
import { ref } from 'vue'

import IconLink from '@/components/IconLink.vue'
import IconLinkList from '@/components/IconLinkList.vue'

import FurAffinity from '@/assets/icons/IconFuraffinity.vue'
import Weasyl from '@/assets/icons/IconWeasyl.vue'
import SoFurry from '@/assets/icons/IconSoFurry.vue'
import FurryNetwork from '@/assets/icons/IconFurryNetwork.vue'
import Mastodon from '@/assets/icons/IconMastodon.vue'
import Twitter from '@/assets/icons/IconTwitter.vue'
import Bluesky from '@/assets/icons/IconBluesky.vue'
import Reddit from '@/assets/icons/IconReddit.vue'
import Itaku from '@/assets/icons/IconItaku.vue'
import Pillowfort from '@/assets/icons/IconPillowfort.vue'
import YouTube from '@/assets/icons/IconYouTube.vue'
import Twitch from '@/assets/icons/IconTwitch.vue'
import Soundcloud from '@/assets/icons/IconSoundcloud.vue'

import Telegram from '@/assets/icons/IconTelegram.vue'
import Discord from '@/assets/icons/IconDiscord.vue'
import Matrix from '@/assets/icons/IconMatrix.vue'

const noHello = ref(false)
</script>

<template>
  <section>
    <h1>Get in touch</h1>
    <p>Some people make Linktrees. I made this entire website, like a well-adjusted person.</p>

    <h2>Socials</h2>
    <p>You can find me on all kinds of places on the internet.</p>

    <IconLinkList>
      <IconLink
        title="Fur Affinity"
        href="https://www.furaffinity.net/user/sonofdragons"
        :icon="FurAffinity"
        style="--color: #faaf3a"
      />
      <IconLink
        title="Weasyl"
        href="https://www.weasyl.com/~sebinnyshkim"
        :icon="Weasyl"
        style="--color: #a10000"
        :tags="['dormant']"
      />
      <IconLink
        title="SoFurry"
        href="https://sebin-nyshkim.sofurry.com/"
        :icon="SoFurry"
        style="--color: #f7931e"
        :tags="['dormant']"
      />
      <IconLink
        title="Furry Network"
        href="https://furrynetwork.com/sebinnyshkim/"
        :icon="FurryNetwork"
        style="--color: #2e76b4"
        :tags="['dormant']"
      />
      <IconLink
        title="Mastodon"
        href="https://meow.social/@SebinNyshkim"
        :icon="Mastodon"
        style="--color: #6364ff"
      />
      <IconLink
        title="Bluesky"
        href="https://bsky.app/profile/sebin-nyshkim.net"
        :icon="Bluesky"
        style="--color: #0085ff"
      />
      <IconLink
        title="Twitter"
        href="https://twitter.com/SebinNyshkim"
        :icon="Twitter"
        style="--color: #1da1f2"
        :tags="['phasing out']"
      />
      <IconLink
        title="Reddit"
        href="https://www.reddit.com/user/SebinNyshkim"
        :icon="Reddit"
        style="--color: #ff4500"
        :tags="['dormant']"
      />
      <IconLink
        title="Itaku"
        href="https://itaku.ee/profile/sebinnyshkim"
        :icon="Itaku"
        style="--color: #ffeb3b"
        :tags="['dormant']"
      />
      <IconLink
        title="Pillowfort"
        href="https://www.pillowfort.social/SebinNyshkim"
        :icon="Pillowfort"
        style="--color: #fff"
        :tags="['dormant']"
      />
      <IconLink
        title="YouTube"
        href="https://www.youtube.com/@SebinNyshkim"
        :icon="YouTube"
        style="--color: #f00"
      />
      <IconLink
        title="Twitch"
        href="https://www.twitch.tv/SebinNyshkim"
        :icon="Twitch"
        style="--color: #a970ff"
      />
      <IconLink
        title="Soundcloud"
        href="https://soundcloud.com/sebin-nyshkim"
        :icon="Soundcloud"
        style="--color: #f50"
      />
    </IconLinkList>

    <h2>Chat</h2>

    <template v-if="noHello">
      <p>Here's the messenger services I use:</p>

      <IconLinkList>
        <IconLink
          title="Telegram"
          href="https://t.me/SebinNyshkim"
          :icon="Telegram"
          style="--color: #25a3e0"
        />
        <IconLink
          title="Discord"
          href="https://discordapp.com/users/227753049530040321"
          :icon="Discord"
          style="--color: #5865f2"
        />
        <IconLink
          title="Matrix"
          href="https://matrix.to/#/@SebinNyshkim:chat.sebin-nyshkim.net"
          :icon="Matrix"
          style="--color: #fff"
          :tags="['oops, I broke it']"
        />
      </IconLinkList>
    </template>

    <template v-else>
      <p>
        Before I show you more direct ways to get in touch with me, I want you to keep a few things
        in mind:
      </p>
      <ol>
        <li>
          <p>
            <strong>Introduce yourself!</strong> Tell me who you are, how you found me and what
            you're about. <a href="https://nohello.net" target="_blank">Don't just say “hi”</a> and
            leave me hanging!
          </p>
        </li>
        <li>
          <p>
            <strong>I don't RP!</strong> If you can't talk to me like we were having a normal
            face-to-face conversation, we won't be talking much to begin with.
          </p>
        </li>
        <li>
          <p>
            <strong>Don't spam stickers!</strong> Stickers are cool and expressive, but too much of
            them and I assure you our conversations will be short-lived.
          </p>
        </li>
        <li>
          <p>
            <strong>I don't do small talk!</strong> Talk to me about your hobbies, your pets (if
            any), your latest accomplishments, what game you're currently obsessed with or looking
            forward to, art you got, artists whose work you enjoy, music you like listening to, some
            new fancy tech gizmo you bought, some funny memes you found. <em>Anything, but</em> “how
            r u”.
          </p>
        </li>
        <li>
          <p>
            <strong>Don't freak out,</strong> if I don't respond immediately! I might be working on
            and/or researching something on the side and I need my focus. I'll get back to you as
            soon as I take a break.
          </p>
        </li>
        <li>
          <p>
            <strong>Don't gatling message me!</strong> I won't respond quicker if you send me seven
            one-liners in a row, spamming me with notifications. I'll promise you it'll get you the
            entirely wrong kind of attention from me.
          </p>
        </li>
      </ol>

      <button @click="noHello = !noHello">Pinky-swear</button>
    </template>
  </section>
</template>

<style lang="scss">
button {
  display: block;
  width: 100%;

  font-size: 1.5em;
  color: #fff;

  background-color: var(--clr-sebin-red);
  border: 0;
  border-radius: 0.5em;
  padding: 0.5em;
}
</style>
