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

const footerLinks = [
  { href: '/privacy', label: '隐私政策' },
  { href: '/support', label: '反馈建议' },
];
---

<footer style="width: 100%; margin-top: 0; background-color: #f8fafc; border-top: 1px solid #e2e8f0;">
  <div style="max-width: 80rem; margin: 0 auto; padding: 80px 32px;">
    <div style="display: flex; flex-direction: column; align-items: center; gap: 32px; margin-bottom: 32px;" class="footer-links">
      <div style="display: flex; align-items: center; gap: 8px; color: #4F7CFF;">
        <img src="/logo.png" alt="知习" style="height: 24px; width: auto;" />
        <span style="font-size: 18px; font-weight: 600;">知习</span>
      </div>
      
      <div style="display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; font-size: 12px; color: #64748b;">
        {footerLinks.map(link => (
          <a href={link.href} style="color: #64748b; text-decoration: none; transition: color 0.2s;" onmouseover="this.style.color='#4F7CFF'" onmouseout="this.style.color='#64748b'">{link.label}</a>
        ))}
      </div>
    </div>
    
    <p style="font-size: 12px; color: #64748b; text-align: center;">
      © {currentYear} 知习 (ZhiXi AI). Structured learning for the digital age.
    </p>
  </div>
</footer>

<style>
  @media (max-width: 768px) {
    .footer-links {
      align-items: center !important;
    }
  }
</style>
