<%# Guided flow: 1) connect a sender, 2) import contacts, 3) send. %>
<%
  const steps = [
    { id: 'bots', n: 1, label: 'Bots', href: '/telegram/bots', hint: 'Connect a sender' },
    { id: 'contacts', n: 2, label: 'Contacts', href: '/telegram/contacts', hint: 'Import your list' },
    { id: 'send', n: 3, label: 'Send', href: '/telegram/send', hint: 'Compose and queue' },
  ];
%>
<nav class="flex flex-wrap gap-2 mb-8" aria-label="telegram steps">
  <% steps.forEach(function (s) { const on = active === s.id; %>
    <a href="<%= s.href %>" <%- on ? 'aria-current="step"' : '' %> class="flex items-center gap-3 pl-2 pr-4 py-2 rounded-xl border transition <%= on ? 'bg-white border-brand-300 shadow-sm' : 'bg-white/60 border-slate-200 hover:bg-white hover:border-slate-300' %>">
      <span class="w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold <%= on ? 'bg-brand-500 text-white' : 'bg-slate-100 text-slate-500' %>"><%= s.n %></span>
      <span class="leading-tight">
        <span class="block text-sm font-semibold <%= on ? 'text-brand-700' : 'text-slate-700' %>"><%= s.label %></span>
        <span class="block text-[11px] text-slate-400"><%= s.hint %></span>
      </span>
    </a>
  <% }); %>
</nav>
