---
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 class="footer-nav-links">
        {footerLinks.map(link => (
          <a href={link.href} class="footer-link">{link.label}</a>
        ))}
      </div>
    </div>

    <p style="font-size: 12px; color: #475569; text-align: center;">
      © {currentYear} 知习 (ZhiXi AI). Structured learning for the digital age.
    </p>
    <p style="font-size: 12px; color: #64748b; text-align: center; margin-top: 8px;">
      <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer" class="footer-link">冀ICP备2026016484号</a>
    </p>
  </div>
</footer>

<style>
  .footer-nav-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    font-size: 12px;
  }
  .footer-link {
    color: #475569;
    text-decoration: none;
    transition: color 0.2s;
  }
  .footer-link:hover {
    color: #4F7CFF;
  }
  @media (max-width: 768px) {
    .footer-links {
      align-items: center !important;
    }
  }
</style>
