{# Один <header class="dsm-head"> на страницу; при переносе в PHP сохранить разметку для Alpine (x-data на этом узле). #}
<header class="dsm-head" x-data="headerMenu()" x-init="init()" :class="{ 'is-menu-open': menuOpen }" @keydown.escape.window="searchOpen = false">

  {# Верхняя полоса: логотип, контакты, CTA #}
  <div class="dsm-head__topbar">
    <div class="container">
      <div class="dsm-head__topbar-inner">

        <a href="/" class="dsm-head__logo">
          <img src="{{ templatePath }}/images/logo.svg" alt="Dr. Smile" width="160" height="72">
        </a>
        <div class="dsm-head__awards">
          <img src="{{ templatePath }}/images/icons/medal-gold.png" alt="Награда">
          <img src="{{ templatePath }}/images/icons/medal-silver.png" alt="Награда">
          <img src="{{ templatePath }}/images/icons/medal-bronze.png" alt="Награда">
        </div>

        {# Битрикс: include contacts.php; кнопки в той же include_area или рядом. При min-width 993px — display:contents у .dsm-head__topbar-actions (см. _before-mega.scss) #}
        <div class="dsm-head__topbar-actions">
          {% include "components/include_areas/contacts.njk" %}

          <div class="dsm-head__cta">
            <a href="#modal-appointment" class="btn btn--blue dsm-head__cta-appt" data-modal-open="modal-appointment" aria-controls="modal-appointment">Записаться на приём</a>
            <a href="#modal-callback" class="btn btn--red dsm-head__cta-call">Заказать звонок</a>
          </div>

          <button
            type="button"
            class="dsm-head__menu-toggle"
            :class="{ 'is-open': menuOpen }"
            :aria-expanded="menuOpen.toString()"
            aria-controls="nav-list"
            @click="menuOpen ? closeMenu() : openMenu()"
          >
            <span class="visually-hidden" x-text="menuOpen ? 'Закрыть меню' : 'Открыть меню'">Открыть меню</span>
            {# Бургер: три линии. Закрытие: vuesax/bold/close-square — скруглённый квадрат + жирный X (как в макете Figma). #}
            <svg class="dsm-head__menu-toggle-burger" width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
              <path class="burger-line burger-line--top" d="M4 7h16" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
              <path class="burger-line burger-line--mid" d="M4 12h16" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
              <path class="burger-line burger-line--bot" d="M4 17h16" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
            </svg>
            <svg class="dsm-head__menu-toggle-close" width="32" height="32" viewBox="0 0 24 24" fill="none" aria-hidden="true">
              {# Фон на весь viewBox — иначе при 32×32 внешний размер rect даёт ~26.67px (20/24 масштаба). #}
              <rect class="dsm-head__menu-toggle-close-bg" width="24" height="24" rx="7" ry="7"/>
              <path class="dsm-head__menu-toggle-close-x" d="M7.75 7.75 16.25 16.25M16.25 7.75 7.75 16.25" stroke-width="2.5" stroke-linecap="round"/>
            </svg>
          </button>
        </div>

      </div>
    </div>
  </div>

  {# Основная навигация #}
  {# БИТРИКС: $APPLICATION->IncludeComponent("bitrix:menu","top_menu",[...])
     шаблон: local/templates/dr_smile/components/bitrix/menu/top_menu/template.php #}
  <nav class="dsm-head__nav" aria-label="Основная навигация">
    <div class="container">
      <div class="dsm-head__wrapper">

        {# Закрытие полноэкранного меню на узкой ширине #}
        <button class="dsm-head__nav-close" type="button" aria-label="Закрыть меню" @click="closeMenu()" x-show="menuOpen" x-cloak>
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true">
            <path d="M5 5l10 10M15 5L5 15" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
          </svg>
        </button>

        {# nav-list: регион раскрытия меню (aria-controls у бургера). Поиск вне <ul> — проще вёрстка и Битрикс #}
        <div class="dsm-head__nav-main" id="nav-list" :class="{ 'is-open': menuOpen }">
        <ul class="nav__list">

          {# Блок контактов только в мобильном раскрытом меню #}
          <li class="nav__item nav__item--mobile-info">
            <div class="dsm-head__mobile-info">
              <address class="dsm-head__mobile-address">
                <span class="dsm-head__city">Москва</span>
                <ul>
                  <li>Руновский пер. д. 11/13</li>
                  <li>Новая Басманная ул. д. 29 стр. 1</li>
                </ul>
              </address>
              <div class="dsm-head__mobile-messengers">
                <a href="#" aria-label="Telegram"><img src="{{ templatePath }}/images/icons/telegram.svg" width="28" height="28" alt="Telegram"></a>
                <a href="#" aria-label="Viber"><img src="{{ templatePath }}/images/icons/viber.svg" width="28" height="28" alt="Viber"></a>
              </div>
              <a href="#modal-callback" class="btn btn--red dsm-head__mobile-cta-call">Заказать звонок</a>
              <a href="#modal-appointment" class="btn btn--blue dsm-head__mobile-cta-appt" data-modal-open="modal-appointment" aria-controls="modal-appointment">Записаться на приём</a>
            </div>
          </li>

          {# БИТРИКС: активный класс nav__item--active → $arItem["SELECTED"] из bitrix:menu
             мегаменю → шаблон mega_menu/template.php внутри компонента bitrix:menu #}
          <li class="nav__item nav__item--dropdown nav__item--services" :class="{ 'is-open': servicesOpen }">
            {# Отдельная строка заголовка «Услуги»: иначе ломается сетка навбара при абсолютном мегаменю #}
            <div class="nav__services-heading">
              <button class="nav__services-btn" type="button"
                      aria-label="Открыть разделы услуг"
                      :aria-expanded="servicesOpen.toString()"
                      @click.prevent="toggleServices()"
                      :class="{ 'is-open': servicesOpen }">
                <svg class="nav__services-btn__burger" width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                  <path d="M4 7h16" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
                  <path d="M4 12h16" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
                  <path d="M4 17h16" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
                </svg>
                <svg class="nav__services-btn__close" width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                  <path d="M6 6l12 12M18 6L6 18" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </button>
              <div class="nav__services-row">
                <a class="nav__services-link" href="/uslugi/">Услуги</a>
                <button class="nav__services-trigger" type="button" aria-label="Открыть разделы услуг" aria-haspopup="true" :aria-expanded="servicesOpen.toString()" @click.prevent="toggleServices()">
                  <img src="{{ templatePath }}/images/icons/arrow-down.svg" alt="" width="10" height="6" aria-hidden="true">
                </button>
              </div>
            </div>
            {% include "components/mega-menu.njk" %}
          </li>
          <li class="nav__item nav__item--dropdown nav__item--dropdown-split" :class="{ 'is-open': isOpen('clinic') }">
            <div class="nav__dropdown-split-row">
              <a class="nav__dropdown-split-link" href="/o-klinike/">О клинике</a>
              <button class="nav__dropdown-split-trigger" type="button" aria-label="Раскрыть подменю «О клинике»" aria-haspopup="true" :aria-expanded="isOpen('clinic').toString()" @click.prevent="toggleDropdown('clinic')">
                <img src="{{ templatePath }}/images/icons/arrow-down.svg" alt="" width="10" height="6" aria-hidden="true">
              </button>
            </div>
            <div class="nav__dropdown">
              <a href="/o-klinike/publikatsii/">Публикации</a>
              <a href="/o-klinike/video/">Видео</a>
              <a href="/o-klinike/nashi-preimushchestva/">Наши преимущества</a>
              <a href="/o-klinike/dokumenty-dlya-patsientov/">Документы для пациентов</a>
            </div>
          </li>
          {# БИТРИКС: nav__item--collapsible — кандидат на перенос в «Ещё» (сколько не поместилось, не фикс. число). Простые <li> верхнего уровня #}
          {# БИТРИКС: nav__item--active → $arItem["SELECTED"] #}
          <li class="nav__item nav__item--collapsible{% if activePage == 'doctors' %} nav__item--active{% endif %}">
            <a href="/vrachi/">Врачи</a>
          </li>
          {# БИТРИКС: nav__item--active → $arItem["SELECTED"] #}
          <li class="nav__item nav__item--collapsible{% if activePage == 'prices' %} nav__item--active{% endif %}">
            <a href="/tseny/">Цены</a>
          </li>
          {# БИТРИКС: nav__item--active → $arItem["SELECTED"] #}
          <li class="nav__item nav__item--collapsible{% if activePage == 'sales' %} nav__item--active{% endif %}">
            <a href="/aktsii/">Акции</a>
          </li>
          {# БИТРИКС: nav__item--active → $arItem["SELECTED"] #}
          <li class="nav__item nav__item--collapsible{% if activePage == 'works' %} nav__item--active{% endif %}">
            <a href="/nashi-raboty/">Наши работы</a>
          </li>
          {# БИТРИКС: nav__item--active → $arItem["SELECTED"] #}
          <li class="nav__item nav__item--collapsible{% if activePage == 'reviews' %} nav__item--active{% endif %}">
            <a href="/otzyvy/">Отзывы</a>
          </li>
          {# БИТРИКС: nav__item--active → $arItem["SELECTED"] #}
          <li class="nav__item nav__item--collapsible{% if activePage == 'patients' %} nav__item--active{% endif %}">
            <a href="/patsientam/">Пациентам</a>
          </li>
          {# БИТРИКС: nav__item--active → $arItem["SELECTED"] #}
          <li class="nav__item nav__item--collapsible{% if activePage == 'contacts' %} nav__item--active{% endif %}">
            <a href="/kontakty/">Контакты</a>
          </li>

          {# «Ещё»: ul.nav__more-list только из JS; в Битрикс не дублировать N ссылок — класс collapsible на нужных пунктах меню #}
          <li class="nav__item nav__item--more nav__item--dropdown is-empty" :class="{ 'is-open': isOpen('more') }">
            <button class="nav__more-trigger" type="button" aria-label="Ещё" :aria-expanded="isOpen('more').toString()" @click.prevent="toggleDropdown('more')">•••</button>
            <ul class="nav__dropdown nav__more-list" aria-label="Дополнительные разделы"></ul>
          </li>
        </ul>

          {# Поиск: на широком экране — в полосе навбара; на среднем — иконка и панель ниже; на узком — в оверлее меню #}
          {# БИТРИКС: поиск → кастомный компонент или bitrix:search.title; разметка остаётся #}
          <div class="dsm-head__nav-search" :class="{ 'is-search-open': searchOpen }">
            <button
              type="button"
              class="dsm-head__search-toggle"
              aria-label="Открыть поиск"
              aria-controls="header-search-panel"
              :aria-expanded="searchOpen.toString()"
              @click.prevent="toggleSearch()"
            >
              <svg class="dsm-head__search-toggle-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                <path d="M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="m21 21-4.35-4.35" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </button>
            <div class="dsm-head__search-panel" id="header-search-panel">
              <div class="dsm-head__search-wrap">
                <form class="dsm-head__search" role="search" @submit.prevent>
                  <button type="submit" class="dsm-head__search-btn" aria-label="Искать">
                    <img src="{{ templatePath }}/images/icons/search-navy.svg" width="20" height="20" alt="" aria-hidden="true">
                  </button>
                  <input
                    class="dsm-head__search-input"
                    type="search"
                    name="q"
                    placeholder="Поиск по сайту"
                    autocomplete="off"
                    aria-label="Поиск по сайту"
                    aria-controls="header-search-suggestions"
                    aria-autocomplete="list"
                  >
                  <button type="button" class="dsm-head__search-clear" aria-label="Очистить поле" data-search-clear>
                    <svg width="20" height="20" viewBox="0 0 16 16" fill="none" aria-hidden="true">
                      <path d="M3 3l10 10M13 3L3 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
                    </svg>
                  </button>
                </form>
                {# Подсказки поиска: вывод из бэкенда; без данных — блок скрыт (hidden) #}
                <div
                  class="dsm-head__search-suggestions"
                  id="header-search-suggestions"
                  role="listbox"
                  hidden
                  aria-hidden="true"
                ></div>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </nav>

</header>