---
interface Props {
  siteName?: string
}

const { siteName = "Astro Tina Starter" } = Astro.props
---

<header class="sticky top-0 z-50 bg-white/80 backdrop-blur-md border-b border-primary-200">
  <nav class="max-w-6xl mx-auto px-6 h-16 flex items-center justify-between">
    <a href="/" class="font-bold text-xl text-primary-900 hover:text-accent-600 transition-colors">
      {siteName}
    </a>

    <div class="flex items-center gap-6">
      <a href="/" class="text-primary-600 hover:text-primary-900 transition-colors">
        Home
      </a>
      <a href="/blog" class="text-primary-600 hover:text-primary-900 transition-colors">
        Blog
      </a>
      <a href="/about" class="text-primary-600 hover:text-primary-900 transition-colors">
        About
      </a>
    </div>
  </nav>
</header>