---
interface Props {
  title?: string;
  desktopHidden?: boolean;
  hidden?: boolean;
}
const { title, desktopHidden, hidden } = Astro.props;
const pathname = Astro.url.pathname;
---

<!-- Desktop nav -->
<nav
  class={`nav${title ? "" : " nav--end"}${desktopHidden ? " nav--desktop-hidden" : ""}`}
  aria-label="Main navigation"
>
  <div class="nav__inner">
  {title && <a href="/" class="nav__site-name">{title}</a>}
  <div class="nav__links">
    <a href="/blog" class={pathname.startsWith("/blog") ? "is-active" : ""}>Blog</a>
    <a href="/photos" class={pathname.startsWith("/photos") ? "is-active" : ""}>Photos</a>
    <a href="/notes" class={pathname.startsWith("/notes") ? "is-active" : ""}>Notes</a>
    <a href="/links" class={pathname.startsWith("/links") ? "is-active" : ""}>Links</a>
    <a href="/archives" class={pathname.startsWith("/archives") ? "is-active" : ""}>Archives</a>
    <a href="/about" class={pathname.startsWith("/about") ? "is-active" : ""}>About</a>
  </div>
  </div>
</nav>

<!-- Mobile top bar -->
<div class={`mobile-bar${hidden ? " mobile-bar--hidden" : ""}`}>
  <button
    class="mobile-bar__btn"
    id="menu-open"
    aria-expanded="false"
    aria-controls="mobile-menu"
  >
    <svg
      width="20"
      height="20"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2.5"
      stroke-linecap="round"
      aria-hidden="true"
    >
      <line x1="3" y1="6" x2="21" y2="6"></line><line
        x1="3"
        y1="12"
        x2="21"
        y2="12"></line><line x1="3" y1="18" x2="21" y2="18"></line>
    </svg>
    Menu
  </button>
</div>

<!-- Mobile menu overlay -->
<div class="mobile-menu" id="mobile-menu" aria-hidden="true">
  <div class="mobile-menu__bar">
    <button class="mobile-bar__btn" id="menu-close" tabindex="-1">
      <svg
        width="18"
        height="18"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2.5"
        stroke-linecap="round"
        aria-hidden="true"
      >
        <line x1="18" y1="6" x2="6" y2="18"></line><line
          x1="6"
          y1="6"
          x2="18"
          y2="18"></line>
      </svg>
      Close
    </button>
  </div>
  <nav class="mobile-menu__nav" aria-label="Mobile navigation">
    <a href="/blog" tabindex="-1">Blog</a>
    <a href="/photos" tabindex="-1">Photos</a>
    <a href="/notes" tabindex="-1">Notes</a>
    <a href="/links" tabindex="-1">Links</a>
    <a href="/archives" tabindex="-1">Archives</a>
    <a href="/about" tabindex="-1">About</a>
  </nav>
</div>

<script>
  const openBtn = document.getElementById("menu-open") as HTMLButtonElement | null;
  const closeBtn = document.getElementById("menu-close") as HTMLButtonElement | null;
  const menu = document.getElementById("mobile-menu");
  const focusable = menu
    ? [closeBtn, ...Array.from(menu.querySelectorAll<HTMLElement>("a"))].filter(Boolean) as HTMLElement[]
    : [];

  openBtn?.addEventListener("click", () => {
    menu?.classList.add("is-open");
    menu?.setAttribute("aria-hidden", "false");
    openBtn.setAttribute("aria-expanded", "true");
    focusable.forEach((el) => el.setAttribute("tabindex", "0"));
    closeBtn?.focus();
  });

  closeBtn?.addEventListener("click", () => {
    menu?.classList.remove("is-open");
    menu?.setAttribute("aria-hidden", "true");
    openBtn?.setAttribute("aria-expanded", "false");
    focusable.forEach((el) => el.setAttribute("tabindex", "-1"));
    openBtn?.focus();
  });
</script>

<style>
  /* ── Desktop nav ── */
  .nav {
    display: block;
  }

  .nav--end .nav__inner {
    justify-content: flex-end;
  }

  .nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    max-width: var(--width-shell);
    margin-inline: auto;
    padding: 40px;
    min-height: 116px;
  }

  .nav__site-name {
    font-size: var(--text-md);
    font-weight: 700;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    margin-right: auto;
  }

  .nav__links {
    display: flex;
    align-items: center;
    gap: 28px;
  }

  .nav__links a {
    font-size: var(--text-sm);
    font-weight: 500;
    color: inherit;
    text-decoration: none;
  }

  .nav a.is-active {
    color: var(--accent);
    font-weight: 700;
    opacity: 1;
  }

  /* ── Mobile top bar (hidden on desktop) ── */
  .mobile-bar {
    display: none;
    background: #c0405e;
  }

  .mobile-bar--hidden {
    display: none !important;
  }

  .mobile-bar__btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    color: #fff;
    font-size: var(--text-sm);
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    padding: 14px 24px;
    width: 100%;
    justify-content: center;
  }

  /* ── Mobile menu overlay ── */
  .mobile-menu {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100;
    flex-direction: column;
    background: #2b2b2b;
    color: #e0e0e0;
    transform: translateY(-100%);
    transition: transform 0.25s ease;
  }

  .mobile-menu.is-open {
    transform: translateY(0);
  }

  .mobile-menu__bar {
    background: #c0405e;
    flex-shrink: 0;
  }

  .mobile-menu__nav {
    display: flex;
    flex-direction: column;
    padding: 0 24px;
  }

  .mobile-menu__nav a {
    color: inherit;
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: 400;
    padding: 16px 0;
    border-bottom: 1px dashed #444;
  }

  .mobile-menu__nav a:last-child {
    border-bottom: none;
  }

  @media (min-width: 641px) {
    .nav--desktop-hidden {
      display: none;
    }
  }

  /* ── Mobile breakpoint ── */
  @media (max-width: 640px) {
    .nav {
      display: none;
    }

    .mobile-bar {
      display: block;
    }

    .mobile-menu {
      display: flex;
    }
  }
</style>
