---
const currentYear = new Date().getFullYear();

const footerLinks = [
  { href: '/privacy', label: '隐私政策' },
  { href: '/terms', label: '用户协议' },
  { href: '/support', label: '支持与反馈' },
];
---

<footer class="footer">
  <div class="footer-content">
    <div class="footer-brand">
      <span class="copyright">© {currentYear} 龙德AI学习</span>
    </div>
    <nav class="footer-links">
      {footerLinks.map(link => (
        <a href={link.href} class="footer-link">{link.label}</a>
      ))}
    </nav>
  </div>
</footer>

<style>
  .footer {
    margin-top: auto;
    padding: 2rem var(--page-padding);
    border-top: 1px solid var(--color-border);
    background: var(--color-bg);
  }

  .footer-content {
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
  }

  .copyright {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
  }

  .footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
  }

  .footer-link {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    text-decoration: none;
  }

  .footer-link:hover {
    color: var(--color-text);
    text-decoration: none;
  }

  @media (min-width: 640px) {
    .footer-content {
      flex-direction: row;
      justify-content: space-between;
    }
  }
</style>