---
import logo from "../../pic/智引未来GEO_透明背景_矢量版.svg";
import { site } from "../data/site";
import { categoryToSlug, getCategoryNames } from "../lib/articles";
const path = Astro.url.pathname;
const isActive = (href: string) => href === "/" ? path === "/" : path.startsWith(href);
const categoryChildren = (await getCategoryNames()).map((label) => ({ href: `/articles/topic/${categoryToSlug(label)}/`, label }));
const nav = site.nav.map((item) => item.href === "/articles/" ? { ...item, children: [{ href: "/articles/", label: "全部文章" }, ...categoryChildren] } : item);
---
<header class="site-header" data-header>
  <div class="container site-header__inner">
    <a class="brand" href="/" aria-label="智引未来首页"><img src={logo.src} width="775" height="199" alt="智引未来 AILEAD FUTURE" /></a>
    <nav class="desktop-nav" aria-label="主导航">
      <ul>{nav.map((item) => <li class="nav-item">
        <a class="nav-link" href={item.href} aria-current={isActive(item.href) ? "page" : undefined}>{item.label}</a>
        <div class="nav-dropdown"><ul>{item.children.map((child) => <li><a href={child.href}>{child.label}<span aria-hidden="true">↗</span></a></li>)}</ul></div>
      </li>)}</ul>
    </nav>
    <a class="button button--small header-cta" href="/contact/">预约诊断 <span>↗</span></a>
    <details class="mobile-nav">
      <summary aria-label="打开导航菜单"><span></span><span></span><span></span></summary>
      <nav data-mobile-nav aria-label="移动端导航">{nav.map((item) => <div class="mobile-nav__group">
        <a class="mobile-nav__primary" href={item.href} aria-current={isActive(item.href) ? "page" : undefined}>{item.label}</a>
        <div class="mobile-subnav">{item.children.map((child) => <a href={child.href}>{child.label}</a>)}</div>
      </div>)}<a class="button" href="/contact/">预约品牌诊断</a></nav>
    </details>
  </div>
</header>
