---
interface Props {
  active?: string;
}

const { active = "" } = Astro.props;
const items = [
  { id: "home", href: "/", label: "首页" },
  { id: "roadmap", href: "/roadmap/", label: "学习地图" },
  { id: "k3", href: "/k3/", label: "K3 解剖" },
  { id: "deepseek", href: "/deepseek/", label: "DeepSeek" },
  { id: "foundations", href: "/foundations/language-models/", label: "基础原理" },
  { id: "scaling", href: "/scaling/", label: "Scaling" },
  { id: "data", href: "/pretraining/data/", label: "数据工程" },
  { id: "moe", href: "/moe/", label: "MoE" },
  { id: "long-context", href: "/long-context/", label: "长上下文" },
  { id: "reasoning", href: "/reasoning/", label: "推理" },
  { id: "training-systems", href: "/training-systems/", label: "训练系统" },
  { id: "numerics", href: "/systems/numerics/", label: "数值" },
  { id: "papers", href: "/papers/", label: "论文库" },
  { id: "progress", href: "/progress/", label: "进度" },
];
---

<header class="site-header" id="top">
  <a class="wordmark" href="/" aria-label="LLM Atlas 首页">
    <span class="wordmark-mark">L/A</span>
    <span class="wordmark-copy">
      <b>LLM ATLAS</b>
      <small>FROM FIRST PRINCIPLES TO KIMI K3</small>
    </span>
  </a>
  <nav class="top-nav" aria-label="主要导航">
    {items.map((item) => (
      <a href={item.href} aria-current={active === item.id ? "page" : undefined}>{item.label}</a>
    ))}
  </nav>
  <div class="header-meta">
    <span>RESEARCH · 2026</span>
    <button id="menu-toggle" class="menu-toggle" type="button" aria-expanded="false" aria-controls="mobile-nav">目录</button>
  </div>
  <nav id="mobile-nav" class="mobile-nav" aria-label="移动导航">
    {items.map((item) => (
      <a href={item.href} aria-current={active === item.id ? "page" : undefined}>{item.label}</a>
    ))}
  </nav>
</header>

<script>
  const toggle = document.querySelector<HTMLButtonElement>("#menu-toggle");
  const nav = document.querySelector<HTMLElement>("#mobile-nav");
  toggle?.addEventListener("click", () => {
    const open = toggle.getAttribute("aria-expanded") === "true";
    toggle.setAttribute("aria-expanded", String(!open));
    nav?.toggleAttribute("data-open", !open);
  });
</script>