{% extends "layouts/base.njk" %}
{% set title = "Каган Михаил Леонидович — стоматолог-ортопед | Dr. Smile" %}
{% set description = "Главный врач клиники Dr. Smile, стоматолог-ортопед с 15-летним стажем. Запись онлайн." %}
{% set activePage = "doctors" %}

{% block extraHead %}
{# БИТРИКС: те же пути из libs шаблона DoctorSmile_2022. media=print → onload: не держим блокирующую цепочку до LCP. #}
{% set swiperCss = "/bitrix/templates/DoctorSmile_2022/libs/swiper/swiper-bundle.min.css" %}
{% set fancyCss = "/bitrix/templates/DoctorSmile_2022/libs/fancybox/fancybox.min.css" %}
<link rel="preload" as="style" href="{{ swiperCss }}">
<link href="{{ swiperCss }}" rel="stylesheet" media="print" onload="this.media='all'">
<noscript><link rel="stylesheet" href="{{ swiperCss }}"></noscript>
<link rel="preload" as="style" href="{{ fancyCss }}">
<link href="{{ fancyCss }}" rel="stylesheet" media="print" onload="this.media='all'">
<noscript><link rel="stylesheet" href="{{ fancyCss }}"></noscript>
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Physician",
  "name": "{{ doctorName | default('Каган Михаил Леонидович') }}",
  "url": "{{ doctorUrl | default('https://dr-smile.ru/vrachi/kagan-mihail/') }}",
  "jobTitle": "{{ doctorJobTitle | default('Главный врач, стоматолог-ортопед') }}",
  "worksFor": {
    "@type": "MedicalClinic",
    "name": "Dr Smile"
  },
  "medicalSpecialty": "{{ doctorSpecialty | default('Ортопедическая стоматология') }}"
}
</script>
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Главная",
      "item": "{{ homeUrl | default('https://dr-smile.ru/') }}"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Врачи",
      "item": "{{ doctorsUrl | default('https://dr-smile.ru/vrachi/') }}"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "{{ doctorName | default('Каган Михаил Леонидович') }}",
      "item": "{{ doctorUrl | default('https://dr-smile.ru/vrachi/kagan-mihail/') }}"
    }
  ]
}
</script>
{% endblock %}

{% block breadcrumbs %}
    {# БИТРИКС: сразу под шапкой в <main>, шаблон .default → div.breadcrumbs-wrapper > nav.breadcrumbs.container #}
    <div class="breadcrumbs-wrapper breadcrumbs-wrapper--doctor">
      <nav class="breadcrumbs container" aria-label="Хлебные крошки">
        <a href="/">Главная</a>
        <span>/</span>
        <a href="/vrachi/">Врачи</a>
        <span>/</span>
        <span aria-current="page">Каган Михаил Леонидович</span>
      </nav>
    </div>
{% endblock %}

{% block content %}
<section class="doctor-detail" x-data="doctorDetail()" x-init="init()">
  <div class="container">

    {# Первый экран: фото, ФИО, должность, кнопки #}
    <section class="doctor-hero" aria-labelledby="doctor-hero-title">
      <div class="doctor-hero__card">
        <div class="doctor-hero__media">
          <img
            src="/images/36feebe2d6d82dc629f56b689fdcca80e28436f1.png"
            alt="Каган Михаил Леонидович"
            class="doctor-hero__photo"
            width="350"
            height="467"
            decoding="async"
            fetchpriority="high"
          >
        </div>

        <div class="doctor-hero__body">
          <header class="doctor-hero__head">
            <h1 id="doctor-hero-title" class="doctor-hero__name">Каган Михаил Леонидович</h1>
            <p class="doctor-hero__spec">Главный врач, стоматолог-ортопед</p>
          </header>

          <div class="doctor-hero__helps">
            <p class="doctor-hero__helps-label">Помогает при:</p>
            <ul class="doctor-hero__helps-list">
              <li>разрушении и потере зубов</li>
              <li>коронках, винирах и протезировании</li>
              <li>необходимости восстановить прикус и жевание</li>
            </ul>
          </div>

          <div class="doctor-hero__chips">
            <span class="doctor-hero__chip doctor-hero__chip--accent">Стаж 15 лет</span>
            <span class="doctor-hero__chip doctor-hero__chip--metro">
              <span class="doctor-hero__metro-dot" aria-hidden="true"></span>
              Новокузнецкая
            </span>
            <a href="#doctor-reviews" class="doctor-hero__reviews-link">Отзывы пациентов →</a>
          </div>

          <p class="doctor-hero__price">от 1 500 ₽</p>

          <div class="doctor-hero__actions">
            <a
              href="#modal-appointment"
              class="btn btn--doctor-cta btn--hero"
              data-modal-open="modal-appointment"
              aria-controls="modal-appointment"
              data-doctor-name="Каган Михаил Леонидович"
              data-doctor-id="1"
            >Записаться</a>
            <a href="#modal-callback" class="btn btn--doctor-outline btn--hero" data-modal-open="modal-callback" aria-controls="modal-callback">Заказать звонок</a>
          </div>
        </div>
      </div>
    </section>

    <div class="doctor-detail__stack">

      {# «О специалисте»: текст как в Figma 95:1438 (Roboto 18 / normal). Кнопки «Читать полностью» в макете нет. БИТРИКС: вывод из полей врача. #}
      <section class="doctor-card doctor-card--muted doctor-about" aria-labelledby="doctor-about-title">
        <h2 id="doctor-about-title" class="doctor-card__title">О специалисте</h2>
        <div class="bitrix-content">
          <p>Иванов Иван Иванович&#xA0;— врач стоматолог-ортопед. В&#xA0;«Доктор смайл» приём ведёт с&#xA0;2025&#xA0;года.</p>
          <p>Окончил Первый московский государственный медицинский университет имени&#xA0;И.М.&#xA0;Сеченова. Прошёл ординатуру МГМСУ&#xA0;им.&#xA0;А.И.&#xA0;Евдокимова по&#xA0;специальности «Стоматология ортопедическая».</p>
          <p>Иван Иванович занимается протезированием зубов: готовит их&#xA0;к&#xA0;установке коронок и&#xA0;других конструкций, удаляет старые штифты и&#xA0;вкладки, препарирует зубы, проводит ретракцию десны. Работает с&#xA0;металлокерамическими, циркониевыми и&#xA0;керамическими коронками, мостовидными конструкциями, винирами и&#xA0;вкладками. Протезирует на&#xA0;имплантах, устанавливает одиночные коронки и&#xA0;мостовидные конструкции. Выполняет съёмное протезирование. Консультирует пациентов, составляет планы лечения, анализирует рентгеновские снимки (КТ, ОПТГ, прицельные). Работает с&#xA0;увеличением (бинокуляры, микроскоп).</p>
        </div>
      </section>

      {# Профессиональные навыки: Figma 95:1439 + моб. кадр — список с «Показать ещё» (обрезка до раскрытия). БИТРИКС: тот же каркас + x-data на секции. #}
      <section
        class="doctor-card doctor-card--muted doctor-services"
        aria-labelledby="doctor-services-title"
        x-data="{ servicesExpanded: false }"
      >
        <h2 id="doctor-services-title" class="doctor-card__title">Профессиональные навыки и услуги</h2>
        <div class="doctor-services__body">
          <p class="doctor-services__lead">Протезирование зубов:</p>
          <div
            id="doctor-services-list-wrap"
            class="doctor-services__list-wrap"
            :class="{ 'doctor-services__list-wrap--expanded': servicesExpanded }"
          >
            <ul class="doctor-list doctor-services__list">
              <li>подготовка зубов к протезированию: извлечение штифтов / культевых вкладок / формирование полостей под ортопедические конструкции / препарирование зубов под постоянные коронки с уступом и без уступа / ретракция десны / восковое моделирование;</li>
              <li>протезирование с использованием литых культевых вкладок: прямым / непрямым методом;</li>
              <li>протезирование с использованием BuildUp;</li>
              <li>протезирование временными акриловыми / композитными / фрезерованными коронками;</li>
              <li>перебазировка временных коронок акриловыми пластмассами;</li>
              <li>протезирование зубов металлокерамическими и безметалловыми цельнокерамическими искусственными коронками (диоксид циркония, Emax), в том числе мостовидными конструкциями;</li>
              <li>протезирование зубов керамическими вкладками / накладками / винирами;</li>
            </ul>
          </div>
          <button
            type="button"
            class="doctor-services__toggle"
            @click="servicesExpanded = !servicesExpanded"
            :aria-expanded="servicesExpanded"
            aria-controls="doctor-services-list-wrap"
          >
            <span x-text="servicesExpanded ? 'Скрыть' : 'Показать ещё'"></span>
            <svg
              class="doctor-services__toggle-icon"
              width="12"
              height="12"
              viewBox="0 0 12 12"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
              aria-hidden="true"
              :class="{ 'doctor-services__toggle-icon--open': servicesExpanded }"
            >
              <path
                d="M3 4.5L6 7.5L9 4.5"
                stroke="currentColor"
                stroke-width="1.5"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
            </svg>
          </button>
        </div>
      </section>

      {# Прайс #}
      <section class="doctor-card doctor-card--accent doctor-prices" aria-labelledby="doctor-prices-title">
        <h2 id="doctor-prices-title" class="doctor-card__title">Цены</h2>
        <ul class="price-list">
          <li class="price-list__item">
            <span class="price-list__name">Прием (осмотр, консультация) врача-хирурга первичный</span>
            <span class="price-list__value">1 500 ₽</span>
          </li>
          <li class="price-list__item">
            <span class="price-list__name">Прием (осмотр, консультация) врача-хирурга повторный</span>
            <span class="price-list__value">1 300 ₽</span>
          </li>
          <li class="price-list__item">
            <span class="price-list__name">Консультация (интерпретация) с анализами и обследованиями сторонних организаций</span>
            <span class="price-list__value">3 100 ₽</span>
          </li>
          <li class="price-list__item">
            <span class="price-list__name">Назначение лекарственных препаратов при заболеваниях (схемы лечения)</span>
            <span class="price-list__value">3 500 ₽</span>
          </li>
        </ul>
        <p class="doctor-prices__legal">
          *Администрация клиники принимает все меры по своевременному обновлению размещенного на сайте прайс-листа, однако во избежание возможных недоразумений, советуем уточнять стоимость услуг в регистратуре или в контакт-центре по телефону +7 (495) 229-14-24 Размещенный прайс не является офертой. Медицинские услуги оказываются на основании договора.
        </p>
      </section>

      {# Образование #}
      <section class="doctor-card doctor-card--muted doctor-education" aria-labelledby="doctor-education-title">
        <h2 id="doctor-education-title" class="doctor-card__title">Образование</h2>
        <ul class="doctor-list">
          <li>2017 г. — Первый московский государственный медицинский университет имени И.М. Сеченова, стоматология.</li>
          <li>2019 г. — ординатура, МГМСУ им. А.И. Евдокимова, кафедра ортопедической стоматологии и гнатологии, стоматология ортопедическая.</li>
        </ul>
      </section>

      <section class="doctor-card doctor-card--muted doctor-courses" aria-labelledby="doctor-courses-title">
        <h2 id="doctor-courses-title" class="doctor-card__title">Курсы повышения квалификации</h2>
        <ul class="doctor-list">
          <li>2024 г. — «Стоматология ортопедическая».</li>
        </ul>
      </section>

      {# Дипломы и сертификаты, слайдер #}
      <section class="doctor-block doctor-certificates" aria-labelledby="doctor-cert-title">
        <h2 id="doctor-cert-title" class="doctor-block__title">Дипломы и сертификаты</h2>
        {% set certificates = [
          { src: "/images/sert/sert1.png", alt: "Сертификат 1" },
          { src: "/images/sert/sert2.png", alt: "Сертификат 2" },
          { src: "/images/sert/sert3.png", alt: "Сертификат 3" },
          { src: "/images/sert/sert1.png", alt: "Сертификат 1 (дополнительный слайд)" }
        ] %}
        <div class="swiper certificates-swiper">
          <div class="swiper-wrapper">
            {% for cert in certificates %}
            <div class="swiper-slide">
              <a href="{{ cert.src }}" data-fancybox="doctor-certificates" data-caption="{{ cert.alt }}" class="cert-link">
                <img src="{{ cert.src }}" alt="{{ cert.alt }}" class="cert-img" loading="lazy" decoding="async">
              </a>
            </div>
            {% endfor %}
          </div>
          <div class="swiper-pagination"></div>
        </div>
      </section>

      {# Видеоотзывы и цитаты #}
      <section class="doctor-block doctor-reviews-featured" id="doctor-reviews" aria-labelledby="doctor-reviews-title">
        <h2 id="doctor-reviews-title" class="doctor-block__title">Отзывы о враче</h2>
        <div class="swiper doctor-reviews-swiper">
          <div class="swiper-wrapper">
            {% for i in [1,2,3,4] %}
            <div class="swiper-slide">
              <article class="doctor-video-reviews">
                <div class="doctor-video-reviews__col">
                  <p class="doctor-video-reviews__label">Видео-отзывы пациентов</p>
                  <div class="doctor-video-reviews__frame">
                    <img
                      class="doctor-video-reviews__thumb"
                      src="/images/doctor-video-reviews-thumb.png"
                      alt="Видео-отзыв пациента"
                      width="540"
                      height="300"
                      loading="lazy"
                      decoding="async"
                    >
                    <button type="button" class="doctor-video-reviews__play" aria-label="Воспроизвести видео">
                      <svg width="64" height="64" viewBox="0 0 64 64" fill="none" aria-hidden="true">
                        <circle cx="32" cy="32" r="32" fill="#4F6ECB"/>
                        <path d="M26 20L44 32L26 44V20Z" fill="#fff"/>
                      </svg>
                    </button>
                  </div>
                  <p class="doctor-video-reviews__caption">Реальный пациент клиники. Видео записано после лечения.</p>
                </div>

                <div class="doctor-video-reviews__col doctor-video-reviews__col--aside">
                  <p class="doctor-video-reviews__heading">Стало спокойно лечиться и понятно, что происходит</p>
                  <div class="doctor-video-reviews__tags">
                    <div class="doctor-video-reviews__tag-block">
                      <span class="doctor-video-reviews__tag">Пациент</span>
                      <span class="doctor-video-reviews__tag-text">Мужчина, 45 лет</span>
                    </div>
                    <div class="doctor-video-reviews__tag-block">
                      <span class="doctor-video-reviews__tag">Проблема</span>
                      <span class="doctor-video-reviews__tag-text">Обратился с проблемой, которую долго откладывал из-за страха лечения</span>
                    </div>
                  </div>
                  <blockquote class="doctor-video-reviews__quote">
                    «Самое важное — мне всё объяснили заранее, и я понимал каждый этап. Это сильно успокаивает».
                  </blockquote>
                </div>
              </article>
            </div>
            {% endfor %}
          </div>
          <div class="swiper-pagination"></div>
        </div>
      </section>

      {% include "components/include_areas/doctor-detail-thanks.njk" %}

      {# Порядок по макету: «Наши работы» → Яндекс.Карта + карточка «Адреса клиник» (124:3268) → «Запишитесь на бесплатный приём» (124:3291). Партиалы — include_area / Битрикс. #}
      {% include "components/include_areas/doctor-detail-cases.njk" %}
      {% include "components/include_areas/doctor-detail-clinics-map.njk" %}
      {% include "components/include_areas/doctor-detail-promo-cta.njk" %}

    </div>
  </div>
</section>
{% endblock %}

{% block extraScripts %}
{# БИТРИКС: убрать — глобально из шаблона. Локально — те же UMD из DoctorSmile_2022/libs.
   doctor-detail.ts ждёт window.Swiper и window.Fancybox через polling. #}
<script src="/bitrix/templates/DoctorSmile_2022/libs/fancybox/fancybox.umd.js"></script>
<script src="/bitrix/templates/DoctorSmile_2022/libs/swiper/swiper-bundle.min.js"></script>
{% endblock %}