---
const pathname = Astro.url.pathname;

const navItems = [
  { href: '/waitlist', label: '等待名单' },
  { href: '/changelog', label: '更新日志' },
  { href: '/support', label: '支持' },
];
---

<header class="header">
  <nav class="nav">
    <a href="/" class="logo">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5"/>
        <path d="M8 12h8M12 8v8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
      </svg>
      <span>龙德</span>
    </a>
    <div class="nav-links">
      {navItems.map(item => (
        <a
          href={item.href}
          class:list={['nav-link', { active: pathname === item.href }]}
        >
          {item.label}
        </a>
      ))}
    </div>
  </nav>
</header>

<style>
  .header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--color-border);
  }

  .nav {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--page-padding);
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text);
    text-decoration: none;
  }

  .logo:hover {
    text-decoration: none;
  }

  .logo svg {
    color: var(--color-accent);
  }

  .nav-links {
    display: flex;
    gap: 2rem;
  }

  .nav-link {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color 0.2s ease;
  }

  .nav-link:hover,
  .nav-link.active {
    color: var(--color-text);
    text-decoration: none;
  }

  @media (max-width: 640px) {
    .nav-links {
      gap: 1rem;
    }

    .nav-link {
      font-size: 0.8125rem;
    }
  }
</style>