<template>
  <footer class="app-footer">
    <div class="footer-inner">
      <nav class="footer-nav">
        <router-link to="/" class="footer-link">首页</router-link>
        <router-link to="/links" class="footer-link">友情链接</router-link>
        <router-link to="/feedback" class="footer-link">意见建议</router-link>
        <router-link to="/contact" class="footer-link">联系我们</router-link>
      </nav>
      <p class="footer-copyright">笑话大全 &mdash; 让快乐传递每一刻</p>
    </div>
  </footer>
</template>

<style scoped>
.app-footer {
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  padding: 24px 20px;
  text-align: center;
  margin-top: auto;
  transition: background 0.3s, border-color 0.3s;
}

.footer-inner {
  max-width: 1440px;
  margin: 0 auto;
}

.footer-nav {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.footer-link {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s;
}

.footer-link:hover {
  color: var(--primary);
}

.footer-copyright {
  color: var(--text-muted);
  font-size: 13px;
  margin: 0;
}
</style>