// Barra de navegação superior — sticky. Desktop: marca + abas inline. Mobile: marca em cima, abas numa linha embaixo (todas visíveis).

function TopNav({ screen, navigate }) {
  const links = [
    { id: 'dashboard', label: 'Painel' },
    { id: 'banco', label: 'Banco' },
    { id: 'ranking', label: 'Ranking' },
    { id: 'matador', label: 'Contornar Objeções', short: 'Objeções' },
  ];
  const isActive = (id) => screen === id || (id === 'banco' && screen === 'detalhe');
  const Tab = ({ l }) => (
    <button
      onClick={() => navigate(l.id)}
      className={'nav-link text-[13px] sm:text-[13.5px] whitespace-nowrap ' + (isActive(l.id) ? 'active' : '')}
    >
      {l.short ? (<><span className="sm:hidden">{l.short}</span><span className="hidden sm:inline">{l.label}</span></>) : l.label}
    </button>
  );

  return (
    <header className="sticky top-0 z-40 bg-bg/90 backdrop-blur-md border-b border-white/[0.06]">
      <div className="max-w-[1200px] mx-auto px-4 sm:px-8">
        <div className="h-14 sm:h-16 flex items-center gap-4 sm:gap-8">
          <button onClick={() => navigate('dashboard')} className="flex items-center gap-2.5 shrink-0">
            <span className="diamond"></span>
            <span className="leading-none text-left">
              <span className="block text-[13px] font-bold tracking-tight text-ink">Full Sales</span>
              <span className="hidden sm:block eyebrow mt-1">Proof Manager</span>
            </span>
          </button>

          <nav className="hidden sm:flex flex-1 min-w-0 items-center gap-7 overflow-x-auto no-scrollbar">
            {links.map(l => <Tab key={l.id} l={l} />)}
          </nav>

          <div className="hidden sm:flex items-center shrink-0">
            <div className="w-7 h-7 rounded-full bg-white/[0.06] border border-white/10 flex items-center justify-center text-[11px] font-semibold text-ink-sub">DM</div>
          </div>

          <div className="flex-1 sm:hidden"></div>
        </div>

        <nav className="sm:hidden flex items-center justify-between gap-1 pb-2.5">
          {links.map(l => <Tab key={l.id} l={l} />)}
        </nav>
      </div>
    </header>
  );
}

Object.assign(window, { TopNav });