{{$homeActive := not .CurrentColumn}}
<header class="sticky top-0 z-50 border-b border-[var(--border)] bg-white/95 backdrop-blur">
  <div class="mx-auto flex max-w-7xl items-center justify-between px-4 py-4 lg:px-8">
    <a href="/" class="flex items-center gap-3">
      <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-[var(--primary)] text-white font-bold">微</div>
      <div>
        <div class="text-lg font-semibold leading-5">微微脚气药</div>
        <div class="text-xs text-[var(--muted)]">浴足店批发 · 电商零售</div>
      </div>
    </a>
    <nav class="hidden items-center gap-1 md:flex">
      <a href="/" class="{{if $homeActive}}text-[var(--primary)]{{else}}text-[var(--muted)]{{end}} rounded-full px-4 py-2 text-sm font-medium hover:text-[var(--primary)]">首页</a>
      {{range .Columns}}
      <a href="{{.URL}}" class="{{if and $.CurrentColumn (eq .Slug $.CurrentColumn.Slug)}}text-[var(--primary)]{{else}}text-[var(--muted)]{{end}} rounded-full px-4 py-2 text-sm font-medium hover:text-[var(--primary)]">{{.Name}}</a>
      {{end}}
    </nav>
    <button id="mobile-menu-btn" class="rounded-lg border border-[var(--border)] px-3 py-2 text-sm text-[var(--text)] md:hidden">菜单</button>
  </div>
  <div id="mobile-menu" class="hidden border-t border-[var(--border)] bg-white md:hidden">
    <div class="mx-auto flex max-w-7xl flex-col px-4 py-3">
      <a href="/" class="py-2 text-sm font-medium text-[var(--primary)]">首页</a>
      {{range .Columns}}
      <a href="{{.URL}}" class="py-2 text-sm text-[var(--muted)]">{{.Name}}</a>
      {{end}}
    </div>
  </div>
</header>