<script setup lang="ts">
/**
 * 页脚
 *
 * 简洁的版权信息 + 页面链接
 */
import { useRouter } from 'vue-router'

const router = useRouter()

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

<template>
  <footer class="app-footer">
    <div class="footer-inner">
      <div class="footer-brand">
        <span class="brand-icon">🍪</span>
        <span class="brand-name">零食商城</span>
      </div>

      <div class="footer-links">
        <span class="footer-link" @click="router.push('/notice')">公告中心</span>
        <span class="footer-link" @click="router.push('/chat')">在线客服</span>
        <span class="footer-link" @click="router.push('/user')">个人中心</span>
      </div>

      <p class="footer-copy">© {{ year }} Snack Mall. All rights reserved.</p>
    </div>
  </footer>
</template>

<style lang="scss" scoped>
.app-footer {
  background: $bg-surface;
  border-top: 2px solid $color-border;
  padding: 32px 24px 24px;
  margin-top: $section-gap;
}

.footer-inner {
  max-width: $container-max;
  margin: 0 auto;
  text-align: center;
}

.footer-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;

  .brand-icon {
    font-size: 24px;
  }
  .brand-name {
    font-family: 'Fredoka', 'PingFang SC', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: $color-primary;
  }
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 28px;
  margin-bottom: 16px;

  .footer-link {
    font-size: $font-size-md;
    color: $color-text-secondary;
    cursor: pointer;
    transition: color 0.2s;

    &:hover {
      color: $color-primary;
    }
  }
}

.footer-copy {
  margin: 0;
  font-size: $font-size-xs;
  color: $color-text-placeholder;
}
</style>
