<template>
  <footer class="Footer flex-col gap-default">
    <ul class="row sitemap gap-default">
      <li v-for="{ label, ...rest} in nav" :key="label">
        <NuxtLink v-bind="rest">{{label}}</NuxtLink>
      </li>
    </ul>
    <ul class="row 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="row 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 <NuxtLink to="/">webfussel</NuxtLink></p>
  </footer>
</template>

<script lang="ts" setup>
import { socials } from '~/utils/socials'

const nav = [
  {
    to: `/`,
    label: 'Home',
    'aria-label': 'Link dieser Seite: Home'
  }, {
    to: `/booking/`,
    label: 'Projektbuchung',
    'aria-label': 'Link dieser Seite: Projektbuchung'
  },  {
    to: `/flatrate/`,
    label: 'Flatrate',
    'aria-label': 'Link dieser Seite: Flatrate'
  }, {
    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'
  }
]
</script>
