---
import Logo from "@/components/Logo.astro";
import { siteConfig } from "@/config";

const pathname = Astro.url.pathname;
const links = [
  { href: "/downloads", label: "下载" },
  { href: "/guide", label: "快速开始" },
  { href: "/about", label: "项目介绍" },
];
---

<nav id="nav-wrapper" class="bg-background-light-10 dark:bg-background-dark-90 fixed inset-x-0 top-0 z-50 transition-shadow">
  <div class="mx-auto flex max-w-7xl flex-row items-center gap-2 px-4 py-2">
    <button
      id="nav-toggle"
      title="切换导航"
      class="btn btn-outline btn-gray mr-2 inline-flex items-center justify-center rounded-sm p-2 leading-none md:hidden"
      aria-label="切换导航"
    >
      <svg class="size-6 fill-none stroke-gray-500" viewBox="0 0 24 24" aria-hidden="true"
        ><path d="M4 7h16M4 12h16M4 17h16" stroke-width="2" stroke-linecap="round"></path></svg
      >
    </button>

    <a href="/" class="leading-none text-gray-950 dark:text-white" aria-label="Uranium 首页"><Logo size={48} /></a>

    <div
      id="nav-menu"
      class="bg-background-light-10 dark:bg-background-dark-90 absolute inset-x-0 top-full flex w-full flex-col gap-4 p-4 shadow-lg max-md:hidden! md:relative md:flex md:w-auto md:flex-row md:items-center md:gap-0 md:bg-transparent md:p-0 md:shadow-none"
    >
      {
        links.map((link) => (
          <a
            href={link.href}
            class:list={[
              "rounded-sm px-3 py-2 text-sm font-medium transition-colors hover:bg-gray-200/60 dark:hover:bg-gray-800",
              pathname.startsWith(link.href) ? "text-green-600 dark:text-green-400" : "text-gray-950 dark:text-white",
            ]}
          >
            {link.label}
          </a>
        ))
      }
    </div>

    <div class="grow"></div>

    <button
      id="theme-toggle"
      class="inline-block h-min w-min rounded-full p-2 leading-0 text-gray-600 transition-colors hover:bg-gray-800/20 dark:text-gray-300 dark:hover:bg-gray-400/20"
      title="切换主题"
      aria-label="切换主题"
    >
      <svg class="size-6 fill-none stroke-current" viewBox="0 0 24 24" aria-hidden="true"
        ><circle cx="12" cy="12" r="4"></circle><path
          d="M12 2v2M12 20v2M4.93 4.93l1.42 1.42M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.42-1.42M17.66 6.34l1.41-1.41"
        ></path></svg
      >
    </button>
    <a
      class="inline-block h-min w-min rounded-full p-2 leading-0 text-gray-600 transition-colors hover:bg-gray-800/20 dark:text-gray-300 dark:hover:bg-gray-400/20"
      href={siteConfig.repository}
      target="_blank"
      rel="noreferrer"
      title="GitHub"
      aria-label="GitHub"
    >
      <svg class="size-6 fill-current" viewBox="0 0 24 24" aria-hidden="true"
        ><path
          d="M12 .7a11.5 11.5 0 0 0-3.64 22.4c.58.1.79-.25.79-.56v-2.24c-3.22.7-3.9-1.37-3.9-1.37-.53-1.34-1.29-1.7-1.29-1.7-1.05-.72.08-.7.08-.7 1.16.08 1.77 1.19 1.77 1.19 1.04 1.77 2.71 1.26 3.37.96.1-.75.4-1.26.73-1.55-2.57-.29-5.27-1.28-5.27-5.68 0-1.26.45-2.28 1.19-3.08-.12-.29-.52-1.46.11-3.04 0 0 .97-.31 3.16 1.18a10.9 10.9 0 0 1 5.76 0c2.19-1.49 3.16-1.18 3.16-1.18.63 1.58.23 2.75.11 3.04.74.8 1.19 1.82 1.19 3.08 0 4.41-2.71 5.38-5.29 5.67.42.36.79 1.06.79 2.14v3.17c0 .31.21.67.8.56A11.5 11.5 0 0 0 12 .7Z"
        ></path></svg
      >
    </a>
  </div>
</nav>

<script>
  document
    .getElementById("nav-toggle")
    ?.addEventListener("click", () => document.getElementById("nav-menu")?.classList.toggle("max-md:hidden!"));
  window.addEventListener("scroll", () => document.getElementById("nav-wrapper")?.classList.toggle("shadow-lg", window.scrollY > 1));
  document.getElementById("theme-toggle")?.addEventListener("click", () => {
    const dark = document.documentElement.classList.toggle("dark");
    localStorage.setItem("uranium-theme", dark ? "dark" : "light");
  });
</script>