// Header — logo, city chip, cart button. Nothing else.

const Logo = () => (
  <div className="flex items-center gap-2.5">
    <img src="/img/logo.png" alt="Уфанет" className="h-9 w-auto object-contain" />
    <div className="leading-tight">
      <div className="font-display font-semibold text-[13px] sm:text-[15px] text-ink-900 tracking-tight">Ярмарка</div>
      <div className="text-[10px] sm:text-[11px] text-ink-400 font-medium tracking-wide hidden xs:block">для сотрудников</div>
    </div>
  </div>
);

const Header = ({ navigate, onOpenCityPicker }) => {
  const { city, cartCount } = useStore();
  const cityObj = city ? window.DATA.cityById(city) : null;

  return (
    <header className="sticky top-0 z-40 bg-white border-b border-paper-200">
      <div className="max-w-7xl mx-auto px-4 md:px-8 h-14 sm:h-16 flex items-center gap-2 sm:gap-3">

        <button onClick={() => navigate({ name: 'home' })} className="shrink-0">
          <Logo />
        </button>

        <div className="flex-1" />

        {/* City chip */}
        <button
          onClick={onOpenCityPicker}
          className="inline-flex items-center gap-1.5 pl-2.5 pr-3 py-2 rounded-full bg-paper-100 hover:bg-paper-200 transition text-sm font-medium text-ink-900 max-w-[120px] sm:max-w-none"
        >
          <Icon name="pin" size={14} className="text-brand-500 shrink-0" />
          <span className="truncate text-[13px] sm:text-sm">
            {cityObj ? cityObj.name : <span className="text-ink-500">Город</span>}
          </span>
          <Icon name="chevronDown" size={13} className="text-ink-400 shrink-0" />
        </button>

        {/* Cart */}
        <button
          onClick={() => navigate({ name: 'cart' })}
          className="relative inline-flex items-center gap-1.5 sm:gap-2 pl-3 pr-3.5 py-2 rounded-full bg-ink-900 text-white hover:bg-ink-700 transition text-sm font-semibold"
        >
          <Icon name="bag" size={16} />
          <span className="hidden sm:inline text-sm">Корзина</span>
          {cartCount > 0 && (
            <span className="min-w-[18px] h-[18px] px-1 inline-flex items-center justify-center rounded-full bg-brand-500 text-white text-[10px] font-bold tabular-nums ring-2 ring-ink-900">
              {cartCount}
            </span>
          )}
        </button>

      </div>
    </header>
  );
};

window.Header = Header;