<template>
  <footer class="Footer flex-col gap-default">
    <ul class="sitemap gap-default">
      <li v-for="{ label, ...rest} in nav" :key="label">
        <NuxtLink v-bind="rest">{{label}}</NuxtLink>
      </li>
    </ul>
    <ul class="sitemap gap-default">
      <li v-for="({icon, ...rest}) in socials" :key="rest.href">
        <a v-bind="rest" target="_blank">
          <Icon :name="icon" :alt="rest['aria-label']" size="1.5em" mode="svg" />
        </a>
      </li>
    </ul>
    <ul class="sitemap gap-default">
      <li class="tip-container">
        <Icon name="wf:cookie-slash" size="1.5rem" mode="svg" />
        <span class="tip">Ohne Cookies</span>
      </li>
      <li class="tip-container">
        <Icon name="wf:fingerprint-slash" size="1.5rem" mode="svg" />
        <span class="tip">Ohne Tracker</span>
      </li>
    </ul>
    <p class="inline-flex-row"><Icon name="ph:copyright-duotone" mode="svg"/> 2024 by <a href="https://webfussel.de">webfussel</a></p>
  </footer>
</template>

<script lang="ts" setup>


const nav = [
  {
    to: `/`,
    label: 'Home',
    'aria-label': 'Link dieser Seite: Home'
  }, {
    to: `/services`,
    label: 'Leistungen',
    'aria-label': 'Link dieser Seite: Leistungen'
  }, {
    to: `/references`,
    label: 'Referenzen',
    'aria-label': 'Link dieser Seite: Referenzen'
  }, {
    to: `/contact`,
    label: 'Kontakt',
    'aria-label': 'Link dieser Seite: Kontakt'
  }, {
    to: '/imp',
    label: 'Impressum',
    'aria-label': 'Link dieser Seite: Impressum'
  }
]


const socials = [
  {
    href: 'https://www.linkedin.com/in/webfussel/',
    icon: 'ph:linkedin-logo-duotone',
    'aria-label': 'Externer Link: LinkedIn Profil'
  },
  {
    href: 'https://mastodontech.de/@webfussel',
    icon: 'ph:mastodon-logo-duotone',
    rel: 'me',
    'aria-label': 'Externer Link: Mastodon Profil'
  },
  {
    href: 'https://bsky.app/profile/webfussel.de',
    icon: 'wf:bluesky',
    'aria-label': 'Externer Link: Bluesky Profil'
  },
  {
    href: 'https://twitch.tv/webfussel',
    icon: 'ph:twitch-logo-duotone',
    'aria-label': 'Externer Link: Twitch Kanal'
  },
  {
    href: 'https://ko-fi.com/webfussel',
    icon: 'wf:kofi',
    'aria-label': 'Externer Link: KoFi Profil'
  },
]
</script>
