<script setup lang="ts">
import { RouterLink } from 'vue-router'
</script>

<template>
  <footer class="app-footer">
    <nav class="app-footer__links">
      <RouterLink to="/om" class="app-footer__link">Om oss</RouterLink>
      <RouterLink to="/kontakt" class="app-footer__link">Kontakt</RouterLink>
      <RouterLink to="/integritetspolicy" class="app-footer__link"
        >Integritetspolicy</RouterLink
      >
      <RouterLink to="/villkor" class="app-footer__link">Villkor</RouterLink>
    </nav>
  </footer>
</template>

<style scoped>
.app-footer {
  background: #f7fafc;
  border-top: 1px solid #e2e8f0;
  padding: 1.5rem;
  text-align: center;
}

.app-footer__links {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.app-footer__link {
  color: #718096;
  text-decoration: none;
  font-size: 0.8125rem;
}

.app-footer__link:hover {
  color: #1a202c;
}
</style>
