<script setup>
import { computed } from 'vue'
import { PRODUCT_TITLE, PRODUCT_TAGLINE } from '../shellConstants'

const currentYear = computed(() => new Date().getFullYear())
</script>

<template>
  <footer class="shell-footer">
    <p>© {{ currentYear }} {{ PRODUCT_TITLE }} · {{ PRODUCT_TAGLINE }}</p>
  </footer>
</template>

<style scoped>
.shell-footer {
  width: 100%;
  text-align: center;
  padding: 10px 12px 14px;
  font-size: 12px;
  color: color-mix(in srgb, var(--foreground) 42%, transparent);
  position: relative;
  z-index: 20;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--card-solid) 88%, transparent));
}
</style>
