<header class="sticky top-0 z-40 bg-white/95 backdrop-blur-md border-b border-creative-100">
  <div class="container mx-auto px-4 h-16 flex items-center justify-between gap-4">
    <a href="/" class="flex items-center gap-3">
      <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-creative-600 to-navy-600 text-white flex items-center justify-center font-bold text-lg">C</div>
      <div class="leading-tight">
        <div class="font-semibold text-creative-900">{{default (index .ThemesExt "brand_name") "创想传媒"}}</div>
        <div class="text-xs text-creative-600">{{default (index .ThemesExt "brand_slogan") "创意驱动品牌"}}</div>
      </div>
    </a>

    <nav class="hidden md:flex items-center gap-1">
      {{$cur := .CurrentColumn}}
      <a href="/" class="px-4 py-2 rounded-lg text-sm hover:bg-creative-50 hover:text-creative-900 text-creative-700">首页</a>
      {{range .Columns}}
        {{$href := printf "/%s" .Slug}}
        <a href="{{$href}}" class="px-4 py-2 rounded-lg text-sm hover:bg-creative-50 hover:text-creative-900 {{if and $cur (eq $cur.Slug .Slug)}}bg-creative-50 text-creative-900{{else}}text-creative-700{{end}}">{{.Name}}</a>
      {{end}}
    </nav>

    <div class="flex items-center gap-2">
      <form action="/search" method="get" class="hidden sm:flex items-center bg-creative-50 border border-creative-100 rounded-lg px-3 h-10">
        <i class="fa-solid fa-magnifying-glass text-creative-600 text-sm"></i>
        <input name="key" value="{{if .Request}}{{.Request.Query.key}}{{end}}" placeholder="搜索作品/服务/资讯" class="bg-transparent outline-none text-sm px-2 w-44 text-creative-900 placeholder:text-creative-400" />
      </form>
      <button type="button" class="md:hidden inline-flex items-center justify-center w-10 h-10 rounded-lg border border-creative-100 bg-white" onclick="(function(){var m=document.getElementById('mnav'); if(!m) return; m.classList.toggle('hidden');})();">
        <i class="fa-solid fa-bars text-creative-800"></i>
      </button>
    </div>
  </div>

  <div id="mnav" class="md:hidden hidden border-t border-creative-100 bg-white">
    <div class="container mx-auto px-4 py-4">
      <div class="grid grid-cols-2 gap-2 text-sm">
        {{$cur := .CurrentColumn}}
        <a href="/" class="px-3 py-2 rounded-lg bg-creative-50 border border-creative-100 text-creative-900">首页</a>
        {{range .Columns}}
          <a href="/{{.Slug}}" class="px-3 py-2 rounded-lg bg-creative-50 border border-creative-100 text-creative-900 {{if and $cur (eq $cur.Slug .Slug)}}bg-white font-semibold{{end}}">{{.Name}}</a>
        {{end}}
      </div>
      <form action="/search" method="get" class="mt-3 flex items-center bg-creative-50 border border-creative-100 rounded-lg px-3 h-10">
        <i class="fa-solid fa-magnifying-glass text-creative-600 text-sm"></i>
        <input name="key" value="{{if .Request}}{{.Request.Query.key}}{{end}}" placeholder="搜索..." class="bg-transparent outline-none text-sm px-2 flex-1 text-creative-900 placeholder:text-creative-400" />
      </form>
    </div>
  </div>
</header>
