{% extends 'tb_base.html' %}
{% load static %}
{% load i18n %}

{% block meta %}
  <link rel="stylesheet" href="{% static "css/moover.css" %}">
  <link rel="stylesheet" href="{% static "css/slick.css" %}">
  <script src="{% static "js/slick.min.js" %}"></script>
  <script src="{% static "js/push/lazyload.min.js" %}"></script>
{% endblock %}

{% block content %}
  <section class="presentation">
    <div class="presentation__top">
      <h1 class="presentation__title">
        {% blocktrans %}
          Сервис попутных посылок
        {% endblocktrans %}
      </h1>
      <div class="presentation__subtitle subtitle h4">
        {% translate "Перевози посылки и&nbsp;окупай стоимость дороги, отдыха или топлива" %}
      </div>
      <a class="presentation__btn btn btn--primary" href="#howtowork">{% translate "Узнать подробнее" %}</a>
      <div class="presentation__next">
        {% translate "Как это работает?" %}
        <div class="presentation__arrows">
          <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
            <path d="M26 16L16 26L6 16" stroke="#272424" stroke-opacity="0.6" stroke-width="1.5" stroke-linecap="round"
                  stroke-linejoin="round"/>
            <path d="M26 6L16 16L6 6" stroke="#272424" stroke-opacity="0.6" stroke-width="1.5" stroke-linecap="round"
                  stroke-linejoin="round"/>
          </svg>
        </div>
      </div>
    </div>
    <div class="presentation__bottom" id="howtowork">
      <div class="title">
        {% translate "Как это работает" %}
      </div>
      <p class="subtitle">
        {% translate "Маленькая история о том, как работает наш сервис" %}
      </p>
      {############cards###############}
      <div class="presentation__cards cards">
        <div class="cards__list">
          <div class="cards__item">
            <div class="cards__arrow"></div>
            <img class="cards__img" src="{% static "img/webp/mover/image1.webp" %}" alt="img1"/>
            <p class="cards__desc">
              {% translate "Олег планирует поездку в&nbsp;другой город, задался вопросом, как окупить стоимость дороги?" %}
            </p>
          </div>
          <div class="cards__item">
            <div class="cards__arrow"></div>
            <img class="cards__img" src="{% static "img/webp/mover/image2.webp" %}" alt="img1"/>
            <p class="cards__desc">

              {% translate "Олег зашел на сайт " %}
              <a href="/">TripWB.com. </a>
              {% translate "быстро разместил объявление, что планирует поездку из&nbsp;одного города в&nbsp;другой и&nbsp;готов взять с&nbsp;собой посылку до&nbsp;10&nbsp;кг." %}
            </p>
          </div>
          <div class="cards__item">
            <div class="cards__arrow"></div>
            <img class="cards__img" src="{% static "img/webp/mover/image3.webp" %}" alt="img1"/>
            <p class="cards__desc">
              {% translate "На&nbsp;объявление Олега откликнулась Аня, ей&nbsp;как раз и&nbsp;нужно отправить посылку своему другу в&nbsp;город, куда следует Олег, но&nbsp;обычными почтовыми сервисами очень дорого и&nbsp;долго ждать." %}
            </p>
          </div>
          <div class="cards__item">
            <img class="cards__img" src="{% static "img/webp/mover/image4.webp" %}" alt="img1"/>
            <p class="cards__desc">
              {% translate "Аня с Олегом созвонились, обсудили условия и договорились о месте и времени передачи посылки." %}
            </p>
          </div>
        </div>
      </div>
      <script>
        $(function () {
          var timer = 0;
          var cards = $('.cards');
          var list = $('.cards__list');
          var items = $('.cards__item');
          if (!cards.length && !list.length && !items.length) {
            return false;
          }

          function checkAdaptive() {
            if (window.innerWidth <= 1000) {
              console.log('init check')
              initStagesSlider();
            } else {
              console.log('rem')
              removeSlider();
            }
          }

          function removeSlider() {
            if (list.hasClass('slick-slider')) {
              list[0].slick.unslick();
              list[0].slick = null;
            }
            list.addClass('js-not-slider');
          }

          function initStagesSlider() {
            if (!list[0].slick) {
              console.log('init')
              list.slick({
                autoplay: false,
                dots: true,
                arrows: false,
                infinite: false,
                variableWidth: true,
                slidesToScroll: 1,

                touchMove: true,
                draggable: true,
              });
            }
            list.removeClass('js-not-slider');
          }

          window.addEventListener('resize', () => {
            clearTimeout(timer);
            timer = setTimeout(() => {
              checkAdaptive();
            }, 400);
          });
          checkAdaptive();
        });
      </script>
    </div>
  </section>
  <section class="easy">
    <div class="title">
      {% translate "Один простой шаг, чтобы взять с собой посылку" %}
    </div>
    <div class="subtitle">
      {% translate "Еще легче, чем писать в чаты и группы в социальных сетях" %}
    </div>
    <div class="easy__grid">
      <div class="easy__item easy__item--fir">
        <h2>{% translate "Один простой шаг" %}</h2>
        <p>{% translate "За пару кликов <b>размещаешь объявление</b> на нашем сайте, о том, что готов перевезти посылку, а также указываешь удобный способ связи." %}</p>
        <img src="{% static 'img/png/sender-card1.png' %}" alt="sender1">
      </div>
      <div class="easy__item easy__item--sec">
        <div class="easy__arrow easy__arrow--fir"></div>
        <div class="easy__arrow easy__arrow--sec"></div>
        <p>{% translate "Люди, которым нужно отправить посылку по&nbsp;пути твоего следования, видят объявление и&nbsp;откликаются на&nbsp;него или связываются напрямую или оставляют отклики на&nbsp;него." %}</p>
        <img src="{% static 'img/png/sender-card2.png' %}" alt="sender2">
      </div>
      <div class="easy__item easy__item--thr">
        <p>{% translate "Выбираешь объявление отправителя, посылку которого ты&nbsp;готов перевезти, созваниваетесь или переписываетесь и&nbsp;обсуждаете условия и&nbsp;стоимость, а&nbsp;также удобное время и&nbsp;место для передачи посылки." %}</p>

        <picture class="img">
          <source srcset="{% static "img/png/sender-card3.png" %}" media="(min-width: 1439.98px)"/>
          <img src="{% static 'img/png/sender-card3-md.png' %}" alt="sender3">
        </picture>

      </div>
    </div>
    <div class="subtitle">
      {% translate "Чтобы разместить объявление - зарегистрируйтесь" %}
    </div>
    <a href="#form" class="easy__btn btn btn--primary">{% translate "Разместить объявление" %}</a>
  </section>
  <section class="use">
    <div class="title">{% translate "Уже пользуются сайтом и находят посылки для перевозок" %}</div>
    <picture class="img">
      <source srcset="{% static "img/png/use-1720.png" %}" media="(min-width: 1720px)"/>
      <source srcset="{% static "img/png/use-1280.png" %}" media="(min-width: 1304px)"/>
      <source srcset="{% static "img/png/use-1120.png" %}" media="(min-width: 1280px)"/>
      <source srcset="{% static "img/png/use-640.png" %}" media="(min-width: 768px)"/>
      <img src="{% static "img/png/use-328.png" %}" alt="list users" class="use__img">
    </picture>
    <div class="h3">
      {% translate "Нужно отправить посылку партнеру, родителям или знакомым?" %}
    </div>
    <a href="#form" class="use__btn btn btn--primary">{% translate "Найти перевозчика" %}</a>
    <br/>
    <a href="#registr" class="use__link">{% translate "Зарегистрироваться" %}</a>
  </section>
  <section class="diff">
    <div class="title">{% translate "Чем мы отличаемся от классических почтовых сервисов" %}</div>
    <div class="diff__grid">
      <div class="diff__coll left">
        <div class="diff__coll-title h2">
          Trip With Bonus
        </div>
        <div class="diff__item diff__item--done">
          <div class="diff__status"></div>
          Стоимость перевозки назначаете сами
        </div>
        <div class="diff__item diff__item--done">
          <div class="diff__status"></div>
          Возможность контакта с перевозчиком в режиме онлайн
        </div>
        <div class="diff__item diff__item--done">
          <div class="diff__status"></div>
          Встреча с перевозчиком в удобном для вас месте
        </div>
        <div class="diff__item diff__item--done">
          <div class="diff__status"></div>
          Без дополнительных платежей и комиссий за параметры посылки
        </div>
        <div class="diff__item diff__item--done">
          <div class="diff__status"></div>
          Вы сами выбираете оптимальный маршрут и время доставки
        </div>
      </div>
      <div class="diff__coll right">
        <div class="diff__coll-title h2">
          Другие почтовые сервисы
        </div>
        <div class="diff__item diff__item--error">
          <div class="diff__status"></div>
          Стоимость перевозки назначает сервис
        </div>
        <div class="diff__item diff__item--error">
          <div class="diff__status"></div>
          Автоматический трекинг не всегда даёт актуальную информацию
        </div>
        <div class="diff__item diff__item--error">
          <div class="diff__status"></div>

          Нужно ехать только в пункт отправки посылки
        </div>
        <div class="diff__item diff__item--error">
          <div class="diff__status"></div>
          Дополнительная стоимость за разные параметры посылки
        </div>
        <div class="diff__item diff__item--error">
          <div class="diff__status"></div>
          Посылка может перевозиться долго и с большим количеством перегрузок
        </div>

      </div>
    </div>
  </section>
  <section class="chatterbox">
    <div class="title">{% translate "Что о нас говорят люди" %}</div>
    <div class="chatterbox__slider slick-slider">
      {% for media_item in page.get_media_items %}
        <div class="slick-slide">
          <div class="chatterbox__slide">
            <div class="chatterbox__vbtn"></div>
            <div class="chatterbox__wrap">
              <div class="chatterbox__vbox">
                <img src="{{ MEDIA_URL }}{{ media_item.picture }}" alt="user" class="chatterbox__poster">
                <video
                    data-src="{{ MEDIA_URL }}{{ media_item.video }}"
                    poster="{{ MEDIA_URL }}{{ media_item.picture }}"
                    controls
                    autoplay
                ></video>
              </div>
            </div>
          </div>

        </div>
      {% endfor %}
    </div>
    <div class="chatterbox__mbtns show__md"></div>

    <script type="text/javascript">
      $(document).ready(function () {
        function handlerVideos() {
          const vtns = $('.chatterbox__vbtn');
          if (!vtns.length) return;
          vtns.off('click.load-lazy').on('click.load-lazy', (e) => {
            const vtn = e.target;
            console.log('!!!!!!!', vtn,)
            vtn.nextElementSibling.querySelector('video');
            vtn.closest('.slick-slide').classList.contains('slick-current') &&
            LazyLoad.load($(vtn).siblings().find('video')[0], {
              callback_loaded: (e) => callbackLoaded(e, vtn),
            });
          });
          const callbackLoaded = function (elm, vtn) {
            {#vtn.closest('.slick-slide').classList.contains('slick-current')#}
            vtn.classList.add('hide');
            const imgWrap = elm.closest('.chatterbox__slide');
            imgWrap?.classList.add('loaded');
          };
        }

        function initSlider() {
          console.log($('.slick-slider'))
          $('.slick-slider')
            .not('.slick-initialized').slick({
            centerMode: true,
            draggable: false,
            slidesToShow: 3,
            infinite: false,
            initialSlide: 1,
            responsive: [

              {
                breakpoint: 768,
                settings: {
                  {#slidesToShow: 1,#}
                  {#slidesToScroll: 1,#}
                  draggable: true,
                  appendArrows: $('.chatterbox__mbtns'),
                },
              },
            ],
          })
            .on('beforeChange', function (event, slick, currentSlide, nextSlide) {
              console.log([slick.$slides[currentSlide].querySelector('video')])
              slick.$slides[currentSlide]?.querySelector('video')?.pause();
              slick.$slides[nextSlide]?.querySelector('video')?.pause();


              console.log('edge was hit', nextSlide, currentSlide, slick.$slides[currentSlide]);
            });
        }

        handlerVideos();
        initSlider();

      });
    </script>
  </section>
  <section class="use use--lett" id="rewiews">
    <div class="title">{% translate "Что о нас пишут люди" %}</div>
    <picture>
      <source srcset="{% static "img/png/use-letters-1739.png" %}" media="(min-width: 1720px)"/>
      <source srcset="{% static "img/png/use-letters-1280.png" %}" media="(min-width: 1304px)"/>
      <source srcset="{% static "img/png/use-letters-1120.png" %}" media="(min-width: 1280px)"/>
      <source srcset="{% static "img/png/use-letters-640.png" %}" media="(min-width: 768px)"/>
      <img src="{% static "img/png/use-letters-328.png" %}" alt="list letters" class="use__img">
    </picture>
  </section>
  <section class="animate left">
    <div class="title">
      {% translate "Хочешь отправить посылку партнеру, родным или знакомым людям быстро и недорого?" %}
    </div>
    <div class="subtitle">
      {% translate "Зарегистрируйся на <a href='#' class='animate__link'>Trip With Bonus</a> прямо сейчас, размести бесплатно объявление и получи запросы на перевозку твоей посылки" %}
    </div>
    <a href="#form" class="use__btn btn btn--primary">{% translate "Разместить объявление" %}</a>
    <script>
      document.addEventListener("DOMContentLoaded", () => {
        const animate = document.querySelectorAll('.animate');
        let counter = 0;
        const observer = new IntersectionObserver(
          (entries, interserctionObserver) => {
            entries.forEach(entry => {
              console.log('or', entry)
              if (entry.isIntersecting) {
                counter++;
                const el = entry.target;
                if (animate.length === counter) {
                  interserctionObserver.disconnect();
                }
                (() => {
                  el.style.opacity = 1;
                  el.style.transform = 'translateX(0)';
                  el.style.transition = 'opacity 1.3s ease, transform 1.5s ease';
                })();
              }
            });
          }, {root: null, rootMargin: '0px'},
        );
        animate.forEach(item => observer.observe(item));
      });
    </script>
  </section>
  <section class="about" id="about">
    <div class="title">{% translate "О сервисе Trip With Bonus" %}</div>
    <div class="about__grid">
      <picture class="about__img">
        <source srcset="{% static "img/png/about-1720.png" %}" media="(min-width: 1720px)"/>
        <source srcset="{% static "img/png/about-1280.png" %}" media="(min-width: 1304px)"/>
        <source srcset="{% static "img/png/about-1120.png" %}" media="(min-width: 1280px)"/>
        <source srcset="{% static "img/png/about-640.png" %}" media="(min-width: 768px)"/>
        <img src="{% static "/img/png/about-328.png" %}" alt="about">
      </picture>
      {#      <img src="{% static "/img/png/about.png" %}" alt="about" class="about__img">#}
      <div class="about__right">
        <p>{% translate "TripWB&nbsp;- это сервис попутных посылок, который <b>соединяет отправителя посылки</b> того, кому нужно что-то передать в&nbsp;другой город или страну, и&nbsp;<b>перевозчика посылки</b>, а&nbsp;именно попутчика или путешественника, который следует по&nbsp;пути назначения." %}</p>
        <p>{% translate "<b>Тебе не&nbsp;нужно больше бежать в&nbsp;чаты и&nbsp;группы</b> в&nbsp;социальных сетях и&nbsp;искать тех, кто сможет перевезти посылку, а&nbsp;достаточно просто зайти на&nbsp;сайт, разместить объявление в&nbsp;пару кликов и&nbsp;дождаться откликов от&nbsp;попутчиков." %}
        <p class="about__half">{% translate "Мы&nbsp;<b>не&nbsp;являемся почтовым сервисом</b>, т.к.&nbsp;мы&nbsp;не&nbsp;доставляем посылки, а&nbsp;только даем возможность отправителю и&nbsp;перевозчику найти друг друга." %}</p>
        <p class="about__half">{% translate "Если не&nbsp;хочешь размещать объявление и&nbsp;ждать, то&nbsp;можешь <b>самостоятельно на&nbsp;нашем сайте найти перевозчика</b> через удобную систему поиска" %}</p>
      </div>
    </div>

  </section>
  <section class="benefits" id="benefits">
    <div class="title">{% translate "Преимущества сервиса" %}</div>
    <div class="benefits__grid">
      <div class="benefits__first">
        <div class="benefits__item">
          <h2>{% translate "Прямой контакт" %}</h2>
          <p>{% translate "Общаешься напрямую с&nbsp;перевозчиком, никаких посредников" %}</p>
        </div>
        <div class="benefits__item">
          <h2>{% translate "Своя цена" %}</h2>
          <p>{% translate "Стоимость перевозки самостоятельно обговариваете с&nbsp;перевозчиком." %}</p>
        </div>
        <div class="benefits__item">
          <h2>{% translate "Нет доп. расходов" %}</h2>
          <p>{% translate "Никаких комиссий, переплат и&nbsp;дополнительных расходов за&nbsp;отправку." %}</p>
        </div>
      </div>
      <div class="benefits__second">
        <picture>
          <source srcset="{% static "img/png/benefits-1720.png" %}" media="(min-width: 1720px)"/>
          <source srcset="{% static "img/png/benefits-1280.png" %}" media="(min-width: 1280px)"/>
          <source srcset="{% static "img/png/benefits-1120.png" %}" media="(min-width: 1120px)"/>
          <source srcset="{% static "img/png/benefits-640.png" %}" media="(min-width: 768px)"/>
          <img src="{% static "/img/png/benefits-328.png" %}" alt="benefits">
        </picture>
      </div>
      <div class="benefits__third">
        <div class="benefits__item">
          <h2>{% translate "Уведомления" %}</h2>
          <p>{% translate "Можешь самостоятельно найти перевозчиков или разместить объявление на&nbsp;сайте." %}</p>
        </div>
        <div class="benefits__item">
          <h2>{% translate "Удобный поиск" %}</h2>
          <p>{% translate "Как только по&nbsp;твоему объявлению найдется перевозчик мы&nbsp;сообщим на&nbsp;E-mail." %}</p>
        </div>
        <div class="benefits__item">
          <h2>{% translate "Экономия времени" %}</h2>
          <p>{% translate "Не&nbsp;нужно искать группы, чаты, и&nbsp;кидать &laquo;клич&raquo;, а&nbsp;просто достаточно разместить объявление на&nbsp;сайте." %}</p>
        </div>
      </div>
    </div>
  </section>
  <section class="uses">
    <div class="title">{% translate "Для каких целей можно использовать наш сервис" %}</div>

    <div class="uses__grid">
      <div class="uses__item">
        <img class="uses__icon" src="{% static "img/svg/files.svg" %}" alt="image icon">
        <p class="uses__desc">
          {% translate "Когда нужно отправить документы партнеру или родственнику" %}
        </p>
      </div>
      <div class="uses__item">
        <img class="uses__icon" src="{% static "img/svg/box.svg" %}" alt="image icon">
        <p class="uses__desc">
          {% translate "Когда необходимо отправить посылку в&nbsp;другую страну" %}
        </p>
      </div>
      <div class="uses__item">
        <img class="uses__icon" src="{% static "img/svg/present.svg" %}" alt="image icon">
        <p class="uses__desc">
          {% translate "Когда нужно отправить подарок семье, друзьям или знакомым" %}
        </p>
      </div>
      <div class="uses__item">
        <img class="uses__icon" src="{% static "img/svg/bax.svg" %}" alt="image icon">
        <p class="uses__desc">
          {% translate "Когда стоимость пересылки через почтовый сервис высокая или перевозка занимает длительное время" %}
        </p>
      </div>
      <div class="uses__item">
        <img class="uses__icon" src="{% static "img/svg/books.svg" %}" alt="image icon">
        <p class="uses__desc">
          {% translate "Когда нужно отправить не&nbsp;только маленькую посылку, но&nbsp;и&nbsp;крупногабаритный груз" %}
        </p>
      </div>
      <div class="uses__item">
        <img class="uses__icon" src="{% static "img/svg/earth.svg" %}" alt="image icon">
        <p class="uses__desc">
          {% translate "Когда нет прямого сообщения из&nbsp;пункта&nbsp;А в&nbsp;пункт&nbsp;Б обычными сервисами доставки" %}
        </p>
      </div>
    </div>
  </section>
  <section class="animate right">
    <div class="title">
      {% translate "Размести свое объявление о необходимости перевозки посылки прямо сейчас" %}
    </div>
    <div class="subtitle">
      {% translate "Достаточно просто зайти на сайт, разместить объявление в пару кликов и дождаться откликов от попутчиков." %}
    </div>
    <a href="#form" class="use__btn btn btn--primary">{% translate "Разместить объявление" %}</a>
  </section>
  <section class="sore">
    <div class="title">
      {% translate "О наболевшем..." %}
    </div>
    <div class="subtitle">
      {% translate "Мы&nbsp;знаем, каково это без конца и&nbsp;края закидывать сообщения в&nbsp;чаты и&nbsp;группы в&nbsp;социальных сетях, в&nbsp;надежде найти человека, который едет или летит в&nbsp;нужном направлении, чтобы передать посылоку своим родным или близким. Очень часто ещё и&nbsp;стоимость пересылки в&nbsp;обычных почтовых сервисах выше стоимости самой посылки." %}
    </div>
    <picture>
      <source srcset="{% static "img/png/sore-1720.png" %}" media="(min-width: 1720px)"/>
      <source srcset="{% static "img/png/sore-1280.png" %}" media="(min-width: 1304px)"/>
      <source srcset="{% static "img/png/sore-1120.png" %}" media="(min-width: 1280px)"/>
      <source srcset="{% static "img/png/sore-640.png" %}" media="(min-width: 768px)"/>
      <img src="{% static "/img/png/sore-328.png" %}" alt="sore image" class="sore__img">
    </picture>
    <div class="h3">
      {% translate "Зарегистрируйте бесплатно прямо сейчас и&nbsp;размести свое первое объявление об&nbsp;отправке посылки" %}
    </div>
    <a href="#form" class="sore__btn btn btn--primary">{% translate "Зарегистрироваться и разместить" %}</a>
    <br/>
    </div>
  </section>
{% endblock %}