<?php ?>
<header class="sticky top-0 z-50 border-b border-slate-200/80 bg-white/85 backdrop-blur-xl dark:border-slate-800/80 dark:bg-slate-950/85">
  <nav class="contain flex min-h-16 items-center justify-between gap-4" aria-label="Main navigation">
    <a href="/" class="flex items-center gap-3 font-semibold text-slate-950 dark:text-white" aria-label="Framex home">
      <span class="grid size-9 place-items-center rounded-lg bg-blue-600 text-sm font-bold text-white shadow-sm shadow-blue-600/30">Fx</span>
      <span class="text-xl text-black dark:text-white/80 font-extrabold">FramexEngine</span>
    </a>

    <div class="hidden items-center gap-1 md:flex">
      <a class="nav-link" href="/#features">Features</a>
      <a class="nav-link" href="/#markdown">Markdown</a>
      <a class="nav-link" href="/#themes">Themes</a>
      <a class="nav-link" href="/about">About</a>
      <a class="nav-link" href="/docs">Document</a>
    </div>

    <div class="hidden items-center gap-2 md:flex">
      <button class="btn btn-ghost size-11 px-0" type="button" data-theme-toggle aria-label="Toggle dark mode" aria-pressed="false">
        <svg class="size-5 dark:hidden" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
          <circle cx="12" cy="12" r="4"></circle>
          <path d="M12 2v2M12 20v2M4 12H2M22 12h-2M19.1 4.9l-1.4 1.4M6.3 17.7l-1.4 1.4M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4"></path>
        </svg>
        <svg class="hidden size-5 dark:block" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
          <path d="M20 14.5A7.5 7.5 0 0 1 9.5 4 8.5 8.5 0 1 0 20 14.5Z"></path>
        </svg>
      </button>
      <a class="btn btn-primary" href="/#start">Start building</a>
    </div>

    <div class="flex items-center gap-2 md:hidden">
      <button class="btn btn-ghost size-11 px-0" type="button" data-theme-toggle aria-label="Toggle dark mode" aria-pressed="false">
        <svg class="size-5 dark:hidden" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
          <circle cx="12" cy="12" r="4"></circle>
          <path d="M12 2v2M12 20v2M4 12H2M22 12h-2M19.1 4.9l-1.4 1.4M6.3 17.7l-1.4 1.4M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4"></path>
        </svg>
        <svg class="hidden size-5 dark:block" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
          <path d="M20 14.5A7.5 7.5 0 0 1 9.5 4 8.5 8.5 0 1 0 20 14.5Z"></path>
        </svg>
      </button>
      <button class="btn btn-secondary size-11 px-0" type="button" data-mobile-menu-toggle aria-label="Toggle navigation" aria-expanded="false">
        <svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
          <path d="M4 7h16M4 12h16M4 17h16"></path>
        </svg>
      </button>
    </div>
  </nav>

  <div class="contain hidden pb-4 md:hidden" data-mobile-menu>
    <div class="grid gap-1 rounded-lg border border-slate-200 bg-white p-2 shadow-lg shadow-slate-950/10 dark:border-slate-800 dark:bg-slate-900">
      <a class="nav-link" href="/#features">Features</a>
      <a class="nav-link" href="/#markdown">Markdown</a>
      <a class="nav-link" href="/#themes">Themes</a>
      <a class="nav-link" href="/docs">Docs</a>
      <a class="btn btn-primary mt-2" href="/#start">Start building</a>
    </div>
  </div>
</header>
