<header id="docs-header" class="sticky top-0 z-50 flex flex-none items-center justify-between bg-white/95 backdrop-blur-sm px-4 py-3 border-b border-transparent sm:px-6 lg:px-8 supports-[backdrop-filter]:bg-white/80 transition-[border-color,box-shadow] duration-200">
    <!-- Logo and brand -->
    <div class="flex items-center gap-4">
        <a aria-label="Home page" href="/" class="flex items-center gap-3 group">
            <img class="h-8 w-auto" src="/img/3-transparent.svg" alt="OneUptime">
        </a>
        <div class="hidden sm:block h-6 w-px bg-slate-200"></div>
        <a href="/docs/introduction/getting-started" class="hidden sm:flex items-center gap-1.5 text-sm font-semibold text-slate-700 hover:text-slate-900 transition-colors">
            <svg class="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
            </svg>
            Docs
        </a>
    </div>

    <!-- Center: search trigger -->
    <button id="search-trigger" class="hidden sm:flex items-center gap-2 rounded-lg bg-slate-100 px-3 py-1.5 text-sm text-slate-500 hover:bg-slate-200 hover:text-slate-700 transition-all min-w-[200px] lg:min-w-[280px]">
        <svg class="h-4 w-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
        </svg>
        <span class="flex-1 text-left">Search docs...</span>
        <kbd class="hidden lg:inline-flex items-center gap-0.5 rounded border border-slate-300 bg-white px-1.5 py-0.5 text-[10px] font-medium text-slate-400">
            <span class="text-xs">&#8984;</span>K
        </kbd>
    </button>

    <!-- Right side actions -->
    <div class="flex items-center gap-3">
        <!-- Mobile search button -->
        <button id="search-trigger-mobile" class="sm:hidden inline-flex items-center rounded-lg p-2 text-slate-500 hover:bg-slate-100 hover:text-slate-700 transition-colors" aria-label="Search">
            <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
            </svg>
        </button>
        <!-- GitHub link -->
        <a class="group flex items-center gap-2 rounded-full bg-slate-100 px-3 py-1.5 text-sm font-medium text-slate-600 hover:bg-slate-200 hover:text-slate-900 transition-all"
           aria-label="GitHub"
           target="_blank"
           rel="noopener noreferrer"
           href="https://github.com/oneuptime/oneuptime">
            <svg aria-hidden="true" viewBox="0 0 16 16" class="h-4 w-4 fill-current">
                <path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z"></path>
            </svg>
            <span class="hidden sm:inline">GitHub</span>
        </a>
    </div>
</header>
