---
const pathname = Astro.url.pathname;

const links = [
  {
    href: "/photos",
    label: "Stream",
    active: pathname === "/photos" || pathname === "/photos/",
  },
  {
    href: "/photos/collections",
    label: "Collections",
    active: pathname.startsWith("/photos/collections"),
  },
  {
    href: "/photos/tags",
    label: "Tags",
    active: pathname.startsWith("/photos/tags"),
  },
  {
    href: "/photos/map",
    label: "Map",
    active: pathname.startsWith("/photos/map"),
  },
  {
    href: "/photos/stats",
    label: "Stats",
    active: pathname.startsWith("/photos/stats"),
  },
];
---

<div class="photos-nav-wrapper">
  <div class="photos-header">
    <a href="/" class="back-link">← Back home</a>
    <h1 class="photos-title">Photos</h1>
  </div>

  <nav class="sub-nav" aria-label="Photos navigation">
    {
      links.map(({ href, label, active }) => (
        <a href={href} class={`sub-nav__link${active ? " is-active" : ""}`}>
          {label}
        </a>
      ))
    }
  </nav>
</div>

<style>
  .photos-header {
    margin-bottom: 1rem;
  }

  .back-link {
    font-size: 0.8rem;
    font-weight: 500;
    color: #666;
    text-decoration: none;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .back-link:hover {
    color: #f5f5f3;
  }

  .photos-title {
    font-size: 2rem;
    font-weight: 700;
    color: #f5f5f3;
    margin: 0.25rem 0 0;
  }

  .sub-nav {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.25rem;
  }

  .sub-nav__link {
    font-size: 0.85rem;
    font-weight: 500;
    color: #666;
    text-decoration: none;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .sub-nav__link:hover {
    color: #f5f5f3;
  }

  .sub-nav__link.is-active {
    color: #f5f5f3;
  }
</style>