function Header() {
  const NAV = [
    { label: "Skin", href: "/en/skin/", slug: "skin" },
    { label: "Hair", href: "/en/hair/", slug: "hair" },
    { label: "Makeup", href: "/en/makeup/", slug: "makeup" },
    { label: "Body", href: "/en/body/", slug: "body" },
    { label: "Nails", href: "/en/nails/", slug: "nails" },
    { label: "Fragrance", href: "/en/fragrance/", slug: "fragrance" },
  ];
  const LANGUAGES = [
    ["en", "English"],
    ["es", "Espanol"],
    ["fr", "Francais"],
    ["pt", "Portugues"],
    ["de", "Deutsch"],
    ["zh", "Chinese"],
    ["ar", "Arabic"],
    ["hi", "Hindi"],
  ];
  const path = window.location.pathname || "/en/";
  const parts = path.split("/").filter(Boolean);
  const lang = parts[0] || "en";
  const rest = parts.slice(1).join("/");
  const languagePath = rest ? `/${rest}/` : "/";

  return (
    <header className="global-header">
      <div className="global-shell global-header-inner">
        <a href="/en/" className="global-brand" aria-label="How To: Beauty Edition home">
          <img src="/favicon.png" alt="" aria-hidden="true" />
          <span><small>How To:</small><strong>Beauty Edition</strong></span>
        </a>
        <nav className="global-nav" aria-label="Primary">
          {NAV.map((item) => {
            const isActive = parts[1] === item.slug;
            const ext = item.external ? { target: "_blank", rel: "noopener" } : {};
            return <a key={item.slug} href={item.href} aria-current={isActive ? "page" : undefined} {...ext}>{item.label}</a>;
          })}
        </nav>
        <div className="global-actions">
          <details className="global-lang">
            <summary>{lang.toUpperCase()}</summary>
            <div className="global-lang-menu">
              {LANGUAGES.map(([code, label]) => (
                <a key={code} href={`/${code}${languagePath}`} aria-current={code === lang ? "true" : undefined}>{label}</a>
              ))}
            </div>
          </details>
          <a className="global-signin" href="/en/sign-in/">Sign In</a>
        </div>
      </div>
    </header>
  );
}

Object.assign(window, { Header });