---
/**
 * The visible breadcrumb trail. `docs/04` requires `BreadcrumbList` markup on
 * "all nested pages" AND that it **match the visible breadcrumbs** — so the
 * markup and this component are built from one array at the call site, and a
 * page cannot emit one without showing the other.
 *
 * WHICH PAGES GET ONE, AND WHY IT IS NOT EVERY PAGE. `/about/`, `/mediation/`,
 * `/arbitration/`, `/med-arb/` and `/practice/` are all ONE HOP from the root
 * and show no breadcrumb, so emitting the markup on them would assert a
 * navigation structure the page does not have. The trail begins at the
 * two-level pages: `/practice/<area>/`, and `/insights/<slug>/` at step 7.
 *
 * THE CURRENT PAGE IS NOT A LINK. A link to the page you are on is a target
 * that does nothing, and `aria-current="page"` is the property that carries the
 * meaning. `schema.org` still wants it as the last `ListItem`, which is why the
 * caller passes the full trail and this component decides what to render.
 *
 * THE SEPARATOR IS `aria-hidden` AND LIVES IN CSS-adjacent markup rather than
 * in the link text: a screen reader announcing "slash" between every crumb is
 * noise, and `<nav aria-label="Breadcrumb">` already names the structure.
 */
interface Props {
  /** Root-first, INCLUDING the current page as the last entry. */
  trail: ReadonlyArray<{ name: string; href: string }>;
}
const { trail } = Astro.props;
---

<nav class="crumbs" aria-label="Breadcrumb">
  <ol role="list">
    {
      trail.map((crumb, i) =>
        i === trail.length - 1 ? (
          <li aria-current="page">{crumb.name}</li>
        ) : (
          <li>
            <a href={crumb.href}>{crumb.name}</a>
            <span aria-hidden="true">/</span>
          </li>
        ),
      )
    }
  </ol>
</nav>

<style>
  /* `role="list"` on the <ol> and no local `list-style: none` — global.css does
     both for `ol[role='list']`, and WebKit drops list semantics when the marker
     goes, which is why the role is there. Same pairing as `.stage` on
     `/arbitration/`. */
  .crumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-meta);
  }
  .crumbs li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }
  /* 44px is the touch-target floor in docs/02. These are small uppercase mono
     links in a row, which is exactly the shape that lands under it — the same
     defect measured on `/med-arb/`'s onward links at 390px (21px tall against a
     44px floor). `inline-flex` + `min-block-size` is the fix the rest of the
     site uses. */
  .crumbs a {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
    color: inherit;
    text-decoration: none;
  }
  .crumbs a:hover {
    color: var(--text);
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }
  .crumbs [aria-current='page'] {
    color: var(--text);
  }
</style>