<!DOCTYPE html>
<html lang="en">
  {{> head}}

  <body>
    <div id="app">
      {{> header-banner}} {{> header}}
      <main class="main">
        {{> breadcrumbs title='Контакты'}}
        <div class="container">
          <div class="content">
            <div class="content-left">
              {{> menu-vertical desktop="true"}} {{> content-sidebar}}
              <div class="content-videos">
                <div class="item-video">
                  <div class="item-video__video-wrapper">
                    <img src="/images/video-preview.png" alt="" />
                    <button class="item-video__button subtitle-20">
                      <img src="/icons/play.svg" alt="" />
                      Интервью
                    </button>
                  </div>
                  <a href="#" class="subtitle-16 item-video__name">
                    На одной из птицефабрик Красноярского края выявили опасные
                    вирусы
                  </a>
                </div>
              </div>
              {{> most-read class='mobile'}}
              <div class="banner-left desktop"></div>
            </div>
            <div class="content-middle articles-wrapper">
              {{> menu-vertical mobile="true"}}
              <div class="section-title border-top">
                <h1 class="section-title__title">Контакты</h1>
              </div>
              <div class="articles-single">
                <div class="contacts__map-container">
                  <div class="contacts__map" id="contacts_map"></div>
                </div>
                <div class="contacts__container">
                  <div class="contacts__text-block">
                    <p class="contacts__block-title subtitle-13">Адрес</p>
                    <p class="contacts__block-subtitle text-13">
                      129626, Москва, пр. Мира 102, стр31 ком 12
                    </p>
                  </div>
                  <div class="contacts__text-block">
                    <p class="contacts__block-title subtitle-13">Телефон</p>
                    <p class="contacts__block-subtitle text-13">
                      +7 (495) 987-65-43
                    </p>
                  </div>
                  <div class="contacts__text-block">
                    <p class="contacts__block-title subtitle-13">E-mail</p>
                    <p class="contacts__block-email text-13">
                      konstantin@agroecspert.ru
                    </p>
                  </div>
                </div>

                <div class="contacts__container">
                  <h2 class="subtitle-18">Написать нам</h2>
                  <form action="" class="contacts__form" id="contact__form">
                    <input
                      required
                      type="text"
                      placeholder="Ваше имя"
                      name="name"
                      class="contacts__input contacts__input_name"
                    />
                    <input
                      required
                      type="email"
                      placeholder="Ваш e-mail"
                      name="email"
                      class="contacts__input contacts__input_email"
                    />
                    <input
                      required
                      type="text"
                      placeholder="Тема письма"
                      name="theme"
                      class="contacts__input contacts__input_theme"
                    />
                    <textarea
                      required
                      type="text"
                      placeholder="Текст письма"
                      name="message"
                      class="contacts__input contacts__input_message"
                    ></textarea>
                    <button
                      class="button contacts__submit-button"
                      type="submit"
                    >
                      Отправить
                    </button>
                  </form>
                  <p class="text-11">
                    Нажимая на кнопку «Подписаться», Вы соглашаетесь на
                    обработку персональных данных в соответствие с
                    <a href="#" class="contacts__policy text-11"
                      >«Политикой конфиденциальности»</a
                    >
                  </p>
                </div>
              </div>
              <a href="#" class="articles-preview__show-next">На главную</a>
              <div class="articles__spacer-container">
                <div class="articles__spacer"></div>
                <div class="articles__spacer"></div>
              </div>
            </div>
            <div class="content-right">
              {{> most-read class='content-right__most-read'}}
              <form class="subscribe-form">
                <p class="subscribe-form__title subtitle-20">
                  Подписка на рассылку
                </p>
                <p class="subscribe-form__text text-13">
                  Подпишитесь на нашу рассылку и будьте в курсе всех новостей
                </p>
                <input
                  type="text"
                  class="input subscribe-form__input"
                  placeholder="Ваш e-mail"
                />
                <button type="submit" class="button subscribe-form__btn">
                  Подписаться
                </button>
              </form>
              <div class="law">
                <h3 class="subtitle-20 right-title">Законодательство</h3>
                <div class="content-right__links">
                  <div class="doc">
                    <a href="#" class="content-right__link-item link">
                      Ретейл могут обязать выделять полки местным производителям
                    </a>
                  </div>
                  <div class="doc">
                    <a href="#" class="content-right__link-item link">
                      Ретейл могут обязать выделять полки местным производителям
                    </a>
                  </div>
                </div>
              </div>
              <div class="banner-left"></div>
              <div class="banner-left"></div>
            </div>
          </div>
        </div>
      </main>
      <footer class="footer">
        <div class="footer-top">
          <div class="container footer__conatiner">
            <div class="footer-top__inner">
              <a href="#" class="logo footer__logo">
                <img src="/images/logo.svg" alt="Агроэксперт" />
              </a>
              <nav class="nav footer__nav">
                <li class="menu-item">
                  <a href="#">Интервью</a>
                </li>
                <li class="menu-item">
                  <a href="#">Партнеры</a>
                </li>
                <li class="menu-item">
                  <a href="#">Рекламодатели</a>
                </li>
                <li class="menu-item">
                  <a href="#">О проекте</a>
                </li>
                <li class="menu-item">
                  <a href="#">Контакты</a>
                </li>
              </nav>
              <div class="footer-top__right">
                <a href="#" class="to-top">
                  <span>Наверх</span>
                  <svg
                    width="9"
                    height="6"
                    viewBox="0 0 9 6"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <rect
                      x="3.69409"
                      y="1.05029"
                      width="1"
                      height="5.22423"
                      transform="rotate(45 3.69409 1.05029)"
                      fill="black"
                    />
                    <rect
                      width="1"
                      height="6"
                      transform="matrix(-0.707107 0.707107 0.707107 0.707107 4.1333 0.525146)"
                      fill="black"
                    />
                  </svg>
                </a>
              </div>
            </div>
          </div>
        </div>
        <div class="footer-bottom">
          <div class="container">
            <div class="footer-bottom__inner">
              <div class="footer-bottom__text desktop">© 2024 АгроЭксперт</div>
              <a href="#" class="footer-bottom__text footer-bottom__link">
                Политика конфиденциальности
              </a>
              <a href="#" class="footer-bottom__text footer-bottom__link">
                Свидетельство о регистрации электронного СМИ
              </a>
              <div class="socials footer__socials">
                <a href="#" class="social-link">
                  <img src="/images/socials_yt.svg" alt="" />
                </a>
                <a href="#" class="social-link">
                  <img src="/images/socials_vk.svg" alt="" />
                </a>
                <a href="#" class="social-link">
                  <img src="/images/socials_tg.svg" alt="" />
                </a>
              </div>

              <div class="footer-bottom__text mobile">© 2024 АгроЭксперт</div>
            </div>
          </div>
        </div>
      </footer>
    </div>
    <script type="text/javascript">
      const handleInit = () => {
        ymaps.ready(init);
        // Функция ymaps.ready() будет вызвана, когда
        // загрузятся все компоненты API, а также когда будет готово DOM-дерево.
        function init() {
          // Создание карты.
          var myMap = new ymaps.Map('contacts_map', {
            // Координаты центра карты.
            // Порядок по умолчанию: «широта, долгота».
            // Чтобы не определять координаты центра карты вручную,
            // воспользуйтесь инструментом Определение координат.
            center: [55.800484, 37.639222],
            // Уровень масштабирования. Допустимые значения:
            // от 0 (весь мир) до 19.
            zoom: 17,
          });

          const Place = new ymaps.Placemark(
            [55.80055, 37.63925],
            {
              hintContent: 'АгроЭксперт',
              balloonContent: '',
              balloonHeader: '',
            },
            {
              iconLayout: 'default#image',
              iconImageHref: '/images/map_label.png',
              iconImageSize: [36, 44],
              iconShape: {
                type: 'Rectangle',
                coordinates: [
                  [-30, -93],
                  [30, 0],
                ],
              },
            }
          );
          myMap.geoObjects.add(Place);
        }
      };

      document.addEventListener('DOMContentLoaded', () => {
        if (typeof ymaps !== 'undefined') {
          handleInit();
        } else {
          setTimeout(() => {
            handleInit();
          }, 1000);
        }
      });
    </script>
    <script>
      function handleSubmit(e) {
        e.preventDefault();

        const name = e.target.name.value;
        const email = e.target.email.value;
        const theme = e.target.theme.value;
        const message = e.target.message.value;

        if (!name || !email || !theme || !text) return;

        console.log({ name, email, theme, message });
      }

      document.addEventListener('DOMContentLoaded', () => {
        const form = document.getElementById('contact__form');

        form.addEventListener('submit', handleSubmit);
      });
    </script>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>
