<!doctype html>
<html lang="ru">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Вендоры MONT — матрица продуктов и категорий дистрибьютора MONT</title>
  <meta name="description" content="Корзина продуктов MONT: актуальная матрица вендоров, категорий и продуктовых линеек дистрибьютора MONT. Инфраструктура и информационная безопасность. MONT Казань, Москва." />
  <meta name="keywords" content="вендоры MONT, вендоры MONT, дистрибьютор MONT, корзина продуктов MONT, матрица MONT, MONT Казань, партнёры MONT, ИБ вендоры, инфраструктура ПО, MONT vendor map" />
  <meta name="robots" content="index, follow" />
  <link rel="canonical" href="{{ canonical_url }}" />

  <!-- Open Graph -->
  <meta property="og:type" content="website" />
  <meta property="og:url" content="{{ canonical_url }}" />
  <meta property="og:title" content="Вендоры MONT — матрица продуктов и категорий" />
  <meta property="og:description" content="Актуальная матрица вендоров и продуктов дистрибьютора MONT. Инфраструктура и информационная безопасность." />
  <meta property="og:image" content="{{ canonical_url }}/static/mont_logo.png" />
  <meta property="og:locale" content="ru_RU" />

  <!-- Schema.org Organization -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Organization",
    "name": "MONT",
    "alternateName": "MONT",
    "description": "Дистрибьютор программного обеспечения. Корзина продуктов: вендоры, категории, продуктовые линейки в сфере инфраструктуры и информационной безопасности.",
    "url": "{{ canonical_url }}",
    "logo": "{{ canonical_url }}/static/mont_logo.png",
    "sameAs": ["https://www.mont.com"]
  }
  </script>

  <link rel="icon" type="image/svg+xml" href="/static/favicon.svg" />
  <link rel="icon" type="image/png" href="/static/favicon.png" />
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&family=Manrope:wght@400;600;700;800&family=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="{{ url_for('static', filename='css/index.css') }}" />
</head>
<body>
  <main class="wrap">
    <section class="brand-strip">
      <div class="brand-logo">
        <a id="logo-link" href="https://4mont.ru"><img src="/static/mont_logo.png?v=3" alt="MONT logo" /></a>
      </div>
    </section>

    <section class="hero">
      <div class="hero-layout">
        <div>
          <h1>Вендоры в портфеле MONT</h1>
          <p>Актуальная матрица вендоров, продуктов и категорий. Выбирайте вендоров или категории, чтобы видеть релевантные продуктовые линейки в Инфраструктуре и ИБ.</p>
          <div class="mode-switch-row">
            <div class="mode-switch">
              <button id="modeInfra" class="mode-btn active" type="button">Инфраструктура</button>
              <button id="modeIb" class="mode-btn" type="button">ИБ</button>
            </div>
            <a id="polygon-link" href="https://stend.4mont.ru/" target="_blank" rel="noopener" class="polygon-btn">Инфраструктурный полигон MONT</a>
          </div>
        </div>
      </div>
    </section>

    <!-- SSR-контент для поисковых роботов -->
    <div style="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;" aria-hidden="true">
      <h2>Вендоры дистрибьютора MONT (MONT)</h2>
      <p>Матрица вендоров, продуктов и категорий компании MONT — ведущего дистрибьютора программного обеспечения в России. Инфраструктура и информационная безопасность.</p>
      <ul>{% for v in ssr_vendors %}<li>{{ v }}</li>{% endfor %}</ul>
      <h2>Категории продуктов MONT</h2>
      <ul>{% for c in ssr_categories %}<li>{{ c }}</li>{% endfor %}</ul>
    </div>

    <div class="page-layout">
      <div class="main-col">
        <section class="board">
          <article class="card">
            <div class="card-header"><h2>Вендоры</h2><span class="count-badge" id="vendorBadge">...</span></div>
            <input id="vendorSearch" class="search" placeholder="Поиск вендора..." />
            <div id="vendorList" class="chip-grid"></div>
          </article>

          <article class="card">
            <div class="card-header"><h2>Категории</h2><span class="count-badge" id="categoryBadge">...</span></div>
            <input id="categorySearch" class="search" placeholder="Поиск категории..." />
            <div id="categoryList" class="chip-grid"></div>
          </article>
        </section>

        <div class="footer-bar">
          <div id="stats">Загрузка...</div>
          <button class="action" id="clearBtn">Сбросить фильтры</button>
        </div>

        <section class="result">
          <div class="result-head">
            <h3>Вендоры и продукты (после фильтрации)</h3>
          </div>
          <div id="activeFilters" class="active-filters"></div>
          <div id="resultRows" class="rows"></div>
        </section>
      </div>

      <aside class="news-sidebar">
        <div class="news-widget">
          <div class="news-widget-head">
            <h2>Новости MONT</h2>
            <div style="display:flex;gap:6px;align-items:center;">
              {% if is_news_editor %}
                <a href="/news-admin" class="news-all-link" style="background:linear-gradient(135deg,#1f4ea3,#3978e0);color:#fff;border-color:transparent;">✏️ Редактор</a>
              {% endif %}
              <a href="/news" class="news-all-link">Все →</a>
            </div>
          </div>
          {% if latest_news %}
            <div class="news-list">
              {% for n in latest_news %}
              <a class="news-card" href="/news/{{ n.slug }}">
                <div class="news-card-img-wrap">
                  {% if n.image %}
                    <img class="news-card-img" src="/static/{{ n.image }}" alt="{{ n.title }}" />
                  {% else %}
                    <span class="news-card-no-img">📰</span>
                  {% endif %}
                </div>
                <div class="news-card-body">
                  <div class="news-card-date">{{ n.created_at[8:10] }}.{{ n.created_at[5:7] }}.{{ n.created_at[:4] }}</div>
                  <h3 class="news-card-title">{{ n.title }}</h3>
                  <span class="news-card-btn">Подробнее →</span>
                </div>
              </a>
              {% endfor %}
            </div>
          {% else %}
            <p class="news-empty">Новостей пока нет</p>
          {% endif %}
        </div>
      <div class="news-widget" style="margin-top:14px;">
        <div class="news-widget-head">
          <h2>Мероприятия MONT</h2>
          <a href="/events" class="news-all-link">Все →</a>
        </div>
        {% if upcoming_events %}
          <div class="news-list">
            {% for e in upcoming_events %}
            <a class="news-card" href="/events/{{ e.slug }}">
              <div class="news-card-img-wrap">
                {% if e.image %}
                  <img class="news-card-img" src="/static/{{ e.image }}" alt="{{ e.title }}" />
                {% else %}
                  <span class="news-card-no-img">📅</span>
                {% endif %}
              </div>
              <div class="news-card-body">
                <div class="news-card-date">{{ e.event_date[8:10] }}.{{ e.event_date[5:7] }}.{{ e.event_date[:4] }}</div>
                <h3 class="news-card-title">{{ e.title }}</h3>
                <span class="news-card-btn">Подробнее →</span>
              </div>
            </a>
            {% endfor %}
          </div>
        {% else %}
          <p class="news-empty">Актуальных мероприятий нет</p>
        {% endif %}
      </div>
      </aside>
    </div>

    <div class="credit">
      <button type="button" id="btn-contact-ruslan">Made by Galyaviev</button>
    </div>
  </main>

  <!-- Contact modal -->
  <div id="contact-modal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:9000;align-items:center;justify-content:center;padding:1rem;">
    <div style="background:#fff;border-radius:20px;width:100%;max-width:460px;max-height:90vh;overflow-y:auto;box-shadow:0 24px 64px rgba(16,43,95,.22);">
      <div style="padding:1.5rem 1.75rem .75rem;display:flex;align-items:center;justify-content:space-between;">
        <div style="font-size:1.15rem;font-weight:800;color:#1a3e79;">Связаться с Русланом</div>
        <button onclick="window._closeContact()" style="background:none;border:none;font-size:1.4rem;color:#8aa;cursor:pointer;line-height:1;padding:0 4px;">×</button>
      </div>
      <div id="cm-body" style="padding:.5rem 1.75rem;display:flex;flex-direction:column;gap:.9rem;"></div>
      <div id="cm-footer" style="display:flex;justify-content:flex-end;gap:.75rem;padding:.75rem 1.75rem 1.5rem;"></div>
    </div>
  </div>

<!-- Yandex.Metrika counter -->
<script type="text/javascript">
    (function(m,e,t,r,i,k,a){
        m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
        m[i].l=1*new Date();
        for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
        k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)
    })(window, document,'script','https://mc.yandex.ru/metrika/tag.js?id=108577107', 'ym');

    ym(108577107, 'init', {ssr:true, webvisor:true, clickmap:true, ecommerce:"dataLayer", referrer: document.referrer, url: location.href, accurateTrackBounce:true, trackLinks:true});
</script>
<noscript><div><img src="https://mc.yandex.ru/watch/108577107" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter -->

<script src="{{ url_for('static', filename='js/index.js') }}"></script>
<script>
(function() {
  const overlay = document.getElementById('contact-modal');

  const fieldStyle = 'width:100%;box-sizing:border-box;margin-top:.3rem;padding:.6rem .85rem;' +
    'background:#f7faff;border:1px solid #c8d8f7;border-radius:9px;color:#1a3060;' +
    'font-size:.92rem;outline:none;font-family:Manrope,sans-serif;';
  const labelStyle = 'color:#526079;font-size:.8rem;font-weight:700;letter-spacing:.2px;';

  function buildForm() {
    document.getElementById('cm-body').innerHTML =
      '<div><label style="' + labelStyle + '">Ваше имя *</label>' +
      '<input id="cm-name" type="text" placeholder="Иван Иванов" style="' + fieldStyle + '"/></div>' +
      '<div><label style="' + labelStyle + '">Email *</label>' +
      '<input id="cm-email" type="email" placeholder="ivan@company.ru" style="' + fieldStyle + '"/></div>' +
      '<div><label style="' + labelStyle + '">Телефон *</label>' +
      '<input id="cm-phone" type="tel" placeholder="+7 (999) 000-00-00" style="' + fieldStyle + '"/></div>' +
      '<div><label style="' + labelStyle + '">Сообщение *</label>' +
      '<textarea id="cm-text" rows="4" placeholder="Ваш вопрос или предложение..." style="' + fieldStyle + 'resize:vertical;"></textarea></div>' +
      '<div id="cm-error" style="display:none;background:#fff0f0;border:1px solid #fcc;border-radius:8px;' +
      'padding:.5rem .85rem;color:#c0392b;font-size:.85rem;"></div>';

    document.getElementById('cm-footer').innerHTML =
      '<button onclick="window._closeContact()" style="background:#f0f5ff;border:1px solid #c8d8f7;border-radius:9px;' +
      'padding:.6rem 1.25rem;color:#526079;cursor:pointer;font-family:Manrope,sans-serif;font-weight:600;">Отмена</button>' +
      '<button id="cm-submit" style="background:linear-gradient(135deg,#1f4ea3,#3978e0);border:none;border-radius:9px;' +
      'padding:.6rem 1.5rem;color:#fff;font-weight:700;cursor:pointer;font-family:Manrope,sans-serif;">Отправить</button>';

    document.getElementById('cm-submit').addEventListener('click', submit);
  }

  function openModal() {
    buildForm();
    overlay.style.display = 'flex';
    document.body.style.overflow = 'hidden';
    setTimeout(() => { const n = document.getElementById('cm-name'); if (n) n.focus(); }, 80);
  }

  window._closeContact = function() {
    overlay.style.display = 'none';
    document.body.style.overflow = '';
  };

  async function submit() {
    const name  = document.getElementById('cm-name').value.trim();
    const email = document.getElementById('cm-email').value.trim();
    const phone = document.getElementById('cm-phone').value.trim();
    const text  = document.getElementById('cm-text').value.trim();
    const errEl = document.getElementById('cm-error');
    const btn   = document.getElementById('cm-submit');

    const emailRe = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    const phoneRe = /^[\+\d][\d\s\-\(\)]{6,18}$/;
    const errors = [];
    [[!name, 'cm-name'], [!emailRe.test(email), 'cm-email'],
     [!phoneRe.test(phone), 'cm-phone'], [!text, 'cm-text']].forEach(([bad, id]) => {
      document.getElementById(id).style.borderColor = bad ? '#e74c3c' : '#c8d8f7';
      if (bad) errors.push(id);
    });
    if (errors.length) {
      errEl.textContent = 'Пожалуйста, заполните все поля корректно';
      errEl.style.display = 'block';
      return;
    }

    btn.disabled = true;
    btn.textContent = 'Отправка...';
    errEl.style.display = 'none';

    try {
      const res = await fetch('/api/contact', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({name, email, phone, text}),
      });
      if (!res.ok) {
        const d = await res.json().catch(() => ({}));
        throw new Error(d.detail || 'Ошибка отправки');
      }
      document.getElementById('cm-body').innerHTML =
        '<div style="text-align:center;padding:2rem 0">' +
        '<div style="width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#1f4ea3,#3978e0);' +
        'color:#fff;font-size:1.8rem;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;">✓</div>' +
        '<div style="font-size:1.1rem;font-weight:800;color:#1a3e79;">Отправлено!</div>' +
        '<div style="color:#526079;font-size:.9rem;margin-top:.4rem;">Постараюсь ответить в ближайшее время</div></div>';
      document.getElementById('cm-footer').innerHTML =
        '<button onclick="window._closeContact()" style="background:linear-gradient(135deg,#1f4ea3,#3978e0);border:none;' +
        'border-radius:9px;padding:.6rem 1.5rem;color:#fff;font-weight:700;cursor:pointer;font-family:Manrope,sans-serif;">Закрыть</button>';
    } catch(e) {
      errEl.textContent = e.message || 'Ошибка отправки';
      errEl.style.display = 'block';
      btn.disabled = false;
      btn.textContent = 'Отправить';
    }
  }

  document.getElementById('btn-contact-ruslan').addEventListener('click', () => { window.location.href = 'mailto:ruslan@ipcom.su'; });
  overlay.addEventListener('click', e => { if (e.target === overlay) window._closeContact(); });
  document.addEventListener('keydown', e => { if (e.key === 'Escape') window._closeContact(); });
})();
</script>
<script>
(function(){
  var isMont = location.hostname === 'maps.mont.ru';

  var poly = document.getElementById('polygon-link');
  if (poly) poly.href = isMont ? 'https://stand.mont.ru/' : 'https://stend.4mont.ru/';

  var logo = document.getElementById('logo-link');
  if (logo) logo.href = isMont ? 'https://www.mont.ru' : 'https://4mont.ru';
})();
</script>
<div id="cookie-banner" style="display:none;position:fixed;bottom:0;left:0;right:0;z-index:9999;background:#1a3060;color:#fff;padding:1rem 1.5rem;box-shadow:0 -2px 16px rgba(0,0,0,.2);align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;">
  <span style="font-size:.9rem;line-height:1.5;">
    Мы используем файлы cookie, чтобы сделать работу с сайтом удобнее. Нажмите «Принять», чтобы согласиться с использованием файлов cookie в соответствии с
    <a href="https://www.mont.ru/ru-ru/confidential" target="_blank" rel="noopener"
       style="color:#7eb3ff;text-decoration:underline;">политикой конфиденциальности</a>.
  </span>
  <button id="cookie-accept" style="background:linear-gradient(135deg,#3978e0,#5a9ef5);border:none;border-radius:9px;
    padding:.55rem 1.4rem;color:#fff;font-weight:700;font-family:Manrope,sans-serif;cursor:pointer;white-space:nowrap;">
    Принять
  </button>
</div>
<script>
(function(){
  if (localStorage.getItem('cookie_accepted')) return;
  var b = document.getElementById('cookie-banner');
  b.style.display = 'flex';
  document.getElementById('cookie-accept').addEventListener('click', function(){
    localStorage.setItem('cookie_accepted', '1');
    b.style.display = 'none';
  });
})();
</script>
</body>
</html>
