function SiteNav({ activePath }) {
  const { React } = window;

  const NAV_ITEMS = [
    {
      label: 'product',
      href: '/product/',
      match: '/product',
      children: [
        { label: 'how it works', href: '/product/' },
        { label: 'integrations', href: '/product/integrations/' },
      ],
    },
    {
      label: 'customers',
      href: '/customers/',
      match: '/customers',
      children: [
        { label: 'early adopters', href: '/customers/' },
        { label: 'pricing', href: '/pricing/' },
      ],
    },
    {
      label: 'research',
      href: '/research/',
      match: '/research',
    },
    {
      label: 'company',
      href: '/company/',
      match: '/company',
      children: [
        { label: 'team', href: '/team/' },
        { label: 'blog', href: '/blog/' },
        { label: 'a true story', href: '/1217/' },
      ],
    },
  ];

  const isActive = (item) => {
    if (!activePath) return false;
    if (activePath === item.match) return true;
    if (item.children) {
      return item.children.some(
        (c) => activePath === c.href.replace(/\/+$/, '')
      );
    }
    return false;
  };

  return (
    <header className="hero-nav">
      <div className="nav-brand">
        <a href="/">
          <img src="/branding/sekura-logo.svg" alt="sekura" height="36" />
        </a>
      </div>
      <nav className="nav-links">
        {NAV_ITEMS.map((item) => {
          if (!item.children) {
            return (
              <a
                key={item.label}
                href={item.href}
                className={isActive(item) ? 'is-active' : ''}
              >
                {item.label}
              </a>
            );
          }
          return (
            <div key={item.label} className="nav-item-has-sub">
              <a
                href={item.href}
                className={isActive(item) ? 'is-active' : ''}
              >
                {item.label}
                <svg
                  className="nav-chevron"
                  width="10"
                  height="6"
                  viewBox="0 0 10 6"
                  fill="none"
                  aria-hidden="true"
                >
                  <path
                    d="M1 1l4 4 4-4"
                    stroke="currentColor"
                    strokeWidth="1.4"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                </svg>
              </a>
              <div className="nav-dropdown">
                {item.children.map((child) => (
                  <a key={child.label} href={child.href}>
                    {child.label}
                  </a>
                ))}
              </div>
            </div>
          );
        })}
      </nav>
    </header>
  );
}

window.SiteNav = SiteNav;