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

const navItems = [
  { href: '/', label: '首页' },
  { href: '/product', label: '产品' },
  { href: '/philosophy', label: '理念' },
];

const isActive = (href: string) => {
  if (href === '/') {
    return pathname === '/';
  }
  return pathname.startsWith(href);
};
---

<header style="position: fixed; top: 0; left: 0; right: 0; z-index: 50; background-color: rgba(255, 255, 255, 0.7); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-bottom: 1px solid rgba(0, 0, 0, 0.05); box-shadow: 0 8px 32px 0 rgba(18, 26, 43, 0.03);">
  <nav style="display: flex; justify-content: space-between; align-items: center; height: 64px; padding-left: 24px; padding-right: 24px; max-width: 1280px; margin: 0 auto;">
    <a href="/" style="display: flex; align-items: center; gap: 8px;">
      <img src="/logo.png" alt="知习 AI" style="height: 32px; width: auto;" />
      <span style="color: #4F7CFF; font-size: 20px; font-weight: 800; letter-spacing: -0.02em;" class="desktop-text">知习 AI</span>
    </a>
    
    <div class="desktop-nav">
      {navItems.map(item => (
        <a
          href={item.href}
          style={{
            color: isActive(item.href) ? '#4F7CFF' : '#64748b',
            'border-bottom': isActive(item.href) ? '2px solid #4F7CFF' : 'none',
            'padding-bottom': '4px',
            transition: 'all 0.3s'
          }}
        >
          {item.label}
        </a>
      ))}
    </div>

    <a href="/waitlist" style="color: #ffffff; font-weight: 500; padding: 8px 24px; border-radius: 9999px; background: linear-gradient(135deg, #4F7CFF 0%, #7861FF 100%); transition: all 0.3s; font-size: 14px;">
      立即加入
    </a>
  </nav>
</header>

<style>
  .desktop-text {
    display: none;
  }
  
  .desktop-nav {
    display: none;
    gap: 32px;
    font-weight: 500;
    letter-spacing: -0.01em;
    font-size: 14px;
  }
  
  .desktop-nav a {
    color: #64748b;
    transition: all 0.3s;
  }
  
  .desktop-nav a:hover {
    color: #4F7CFF;
  }
  
  @media (min-width: 768px) {
    .desktop-text {
      display: inline;
    }
    
    .desktop-nav {
      display: flex;
    }
  }
</style>
