<% const segs = typeof segments !== 'undefined' && Array.isArray(segments) ? segments : []; %>
<% const labelList = typeof labels !== 'undefined' && Array.isArray(labels) ? labels : segs; %>
<% const isCentered = typeof centered === 'undefined' || centered; %>
<nav class="flex items-center gap-2 text-xs mb-6<%= isCentered ? ' justify-center' : '' %>" style="color:rgba(255,255,255,.4)" aria-label="Breadcrumb">
  <a href="/" class="hover:text-white transition-colors">Home</a>
  <% segs.forEach(function(seg, i) {
    const href = '/' + segs.slice(0, i + 1).join('/');
    const isLast = i === segs.length - 1;
    const label = labelList[i] || seg.replace(/-/g, ' ');
  %>
  <svg class="w-3 h-3 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg>
  <% if (isLast) { %>
  <span style="color:rgba(255,255,255,.7)"><%= label %></span>
  <% } else { %>
  <a href="<%= href %>" class="hover:text-white transition-colors"><%= label %></a>
  <% } %>
  <% }); %>
</nav>
