---
const { pathname = "/" } = Astro.props;

const navItems = [
  { href: "/index.html", label: "Home", match: ["/index.html", "/"] },
  {
    href: "/about.html",
    label: "About Us",
    match: ["/about.html", "/the-founders.html", "/about-us-organizations.html"],
    children: [
      { href: "/the-founders.html", label: "The Founders" },
      { href: "/about-us-organizations.html", label: "Organizations" },
    ],
  },
  { href: "/videos.html", label: "Videos", match: ["/videos.html"] },
  {
    href: "/events.html",
    label: "Events",
    match: ["/events.html", "/services.html"],
    children: [{ href: "/services.html", label: "Sunday Services" }],
  },
  { href: "/speeches/", label: "Speeches", match: ["/speeches/"] },
  { href: "/contact.html", label: "Contact", match: ["/contact.html"] },
];

function isCurrent(item) {
  return item.match.some((match) => {
    if (match === "/") {
      return pathname === "/";
    }
    if (match.endsWith("/")) {
      return pathname.startsWith(match);
    }
    return pathname === match;
  });
}
---

<nav id="access" class="jssafe" role="navigation">
  <div class="skip-link screen-reader-text"><a href="#content" title="Skip to content">Skip to content</a></div>
  <div class="menu">
    <ul id="prime_nav" class="menu">
      {
        navItems.map((item, index) => {
          const current = isCurrent(item);
          return (
            <li class:list={["menu-item", item.children && "menu-item-has-children", current && "current-menu-item current_page_item", `menu-item-${index + 1}`]}>
              <a href={item.href} aria-current={current ? "page" : undefined}>
                <span>{item.label}</span>
              </a>
              {
                item.children && (
                  <ul class="sub-menu">
                    {item.children.map((child, childIndex) => (
                      <li class={`menu-item menu-item-${index + 1}-${childIndex + 1}`}>
                        <a href={child.href}>
                          <span>{child.label}</span>
                        </a>
                      </li>
                    ))}
                  </ul>
                )
              }
            </li>
          );
        })
      }
    </ul>
  </div>
</nav>