<div class="bz-topbar">
  <div class="bz-container bz-topbar-inner">
    <div class="bz-topbar-left">
      <a href="/p/help">Help</a>
      <span class="bz-dot"></span>
      <a href="/p/status">Status</a>
      <span class="bz-dot"></span>
      <a href="/p/writers">Writers</a>
    </div>
    <div class="bz-topbar-right">
      <span class="bz-icon-text">{icon name="phone" size="14"} +1 555 123 4567</span>
      <span class="bz-icon-text">{icon name="mail" size="14"} hello@example.com</span>
      <span class="bz-icon-text">{icon name="cloud" size="14"} 24°C</span>
      <span class="bz-theme-switch">
        <button type="button" data-celena-theme="light" data-bz-theme="light" title="Светлая" aria-label="Светлая тема">{icon name="sun" size="14"}</button>
        <button type="button" data-celena-theme="dark"  data-bz-theme="dark"  title="Тёмная"  aria-label="Тёмная тема">{icon name="moon" size="14"}</button>
        <button type="button" data-celena-theme="auto"  data-bz-theme="auto"  title="Авто"    aria-label="Авто-тема">{icon name="theme_auto" size="14"}</button>
      </span>
    </div>
  </div>
</div>

<header class="bz-header">
  <div class="bz-container bz-header-top">
    <a href="/" class="bz-logo">
      {icon name="sparkles" size="28"}
      <span>{site.name}</span>
    </a>
    <div class="bz-promo">
      <div class="bz-promo-text">
        <strong>Все товары</strong>
        <span>Скидки до 50%</span>
      </div>
    </div>
    <div class="bz-header-actions">
      <a href="/search" class="bz-icon-btn" aria-label="Поиск">{icon name="search" size="18"}</a>
      [if {shop.enabled}="1"]
        {async block="shop_cart_widget" trigger="load"}
      [/if]
      [if {user.is_guest}="1"]
        <a href="/admin/login" class="bz-icon-btn" aria-label="Войти">{icon name="profile" size="18"}</a>
      [else]
        <a href="/admin" class="bz-icon-btn" aria-label="Админка">{icon name="profile" size="18"}</a>
      [/if]
    </div>
  </div>

  <div class="bz-header-nav">
    <div class="bz-container bz-nav-row">
      <div class="bz-nav-social">
        <a href="#" aria-label="Facebook">{icon name="facebook" size="16"}</a>
        <a href="#" aria-label="Skype">{icon name="skype" size="16"}</a>
        <a href="#" aria-label="Twitter">{icon name="twitter" size="16"}</a>
        <a href="#" aria-label="LinkedIn">{icon name="linkedin" size="16"}</a>
      </div>
      <button type="button" class="bz-burger" data-bz-burger aria-label="Меню">{icon name="menu" size="20"}</button>
      {menu name="header" class="bz-nav-menu"}
    </div>
  </div>
</header>
