{% 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 %}

    <!-- Meta Pixel Code -->
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '1123814969330706');
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=1123814969330706&ev=PageView&noscript=1"
/></noscript>
<!-- End Meta Pixel Code -->

  <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 cards--cstmr">
        <div class="cards__list">
          <div class="cards__item">
            <div class="cards__arrow"></div>
            <img class="cards__img" src="{% static "img/webp/customer/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/customer/image2.webp" %}" alt="img2"/>
            <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/customer/image3.webp" %}" alt="img3"/>
            <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/customer/image4.webp" %}" alt="img4"/>
            <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 <= 991.98) {
              {#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/mover/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/customer/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/customer/sender-card3.png" %}" media="(min-width: 1439.98px)"/>
          <img src="{% static 'img/png/customer/sender-card3-md.png' %}" alt="sender3">
        </picture>

      </div>
    </div>
    <div class="subtitle">
      {% translate "Чтобы разместить объявление - зарегистрируйтесь" %}
    </div>
    <a href="{% url "registration_page" %}"
       class="easy__btn btn btn--primary">{% translate "Разместить объявление" %}</a>
  </section>

  <section class="use">
    <div class="title">{% translate "Уже пользуются сайтом и находят посылки для перевозок" %}</div>
    <a href="{% url "registration_page" %}">
      <picture>
        <source srcset="{% static "img/png/customer/use-1720.png" %}" media="(min-width: 1720px)"/>
        <source srcset="{% static "img/png/mover/use-1280.png" %}" media="(min-width: 1304px)"/>
        <source srcset="{% static "img/png/mover/use-1120.png" %}" media="(min-width: 1280px)"/>
        <source srcset="{% static "img/png/mover/use-640.png" %}" media="(min-width: 768px)"/>
        <img src="{% static "img/png/mover/use-328.png" %}" alt="list users" class="use__img">
      </picture>
    </a>
    <div class="h3">
      {% translate "Хотите перевезти посылку и окупить стоимость дороги, топлива?" %}
    </div>
    <a href="{% url "registration_page" %}" class="use__btn btn btn--primary">{% translate "Найти посылку" %}</a>
    <br/>
    <a href="{% url "registration_page" %}" class="use__link">{% translate "Зарегистрироваться" %}</a>
  </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 "Стоимость перевозки назначаете самостоятельно." %}</p>
        </div>
        <div class="benefits__item">
          <h2>{% translate "Любой тип и вес посылки" %}</h2>
          <p>{% translate "Можешь брать любые посылки по&nbsp;типу, весу и&nbsp;пр. параметрам без ограничений и&nbsp;доп. расходов." %}</p>
        </div>
      </div>
      <div class="benefits__second">
        <picture>
          <source srcset="{% static "img/png/mover/benefits-1720.png" %}" media="(min-width: 1720px)"/>
          <source srcset="{% static "img/png/mover/benefits-1280.png" %}" media="(min-width: 1280px)"/>
          <source srcset="{% static "img/png/mover/benefits-1120.png" %}" media="(min-width: 1120px)"/>
          <source srcset="{% static "img/png/mover/benefits-640.png" %}" media="(min-width: 768px)"/>
          <img src="{% static "/img/png/mover/benefits-328.png" %}" alt="benefits">
        </picture>
      </div>
      <div class="benefits__third">
        <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;сайте." %}</p>
        </div>
        <div class="benefits__item">
          <h2>{% translate "Экономия времени" %}</h2>
          <p>{% translate "Не&nbsp;нужно искать группы, чаты, и&nbsp;кидать &laquo;клич&raquo;, а&nbsp;просто достаточно разместить объявление на&nbsp;сайте." %}</p>
        </div>
      </div>
    </div>
  </section>

  <section class="chatterbox" id="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 }}"
                    playsinline="false"
                    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: {
                  draggable: true,
                  appendArrows: $('.chatterbox__mbtns'),
                },
              },
            ],
          })
            .on('beforeChange', function (event, slick, currentSlide, nextSlide) {
              slick.$slides[currentSlide]?.querySelector('video')?.pause();
              slick.$slides[nextSlide]?.querySelector('video')?.pause();
            });
        }

        handlerVideos();
        initSlider();

      });
    </script>
  </section>

  <section class="use use--lett" id="rewiews">
    <div class="title">{% translate "Что о нас пишут люди" %}</div>
    <picture class="hide__xs">
      <source srcset="{% static "img/png/mover/use-letters-1739.png" %}" media="(min-width: 1720px)"/>
      <source srcset="{% static "img/png/mover/use-letters-1280.png" %}" media="(min-width: 1304px)"/>
      <source srcset="{% static "img/png/mover/use-letters-1120.png" %}" media="(min-width: 1280px)"/>
      <source srcset="{% static "img/png/mover/use-letters-640.png" %}" media="(min-width: 768px)"/>
      <img src="{% static "img/png/mover/use-letters-328.png" %}" alt="list letters"
           class="use__img">
    </picture>
    <div class="show__xs">
      <picture>
        <source srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
                media="(min-width: 480px)"/>
        <img src="{% static "img/png/mover/use-letters-s1.png" %}" alt="list letters"
             class="use__img">
      </picture>
      <picture>
        <source srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
                media="(min-width: 480px)"/>
        <img src="{% static "img/png/mover/use-letters-s2.png" %}" alt="list letters"
             class="use__img">
      </picture>
      <picture>
        <source srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
                media="(min-width: 480px)"/>
        <img src="{% static "img/png/mover/use-letters-s3.png" %}" alt="list letters"
             class="use__img">
      </picture>
      <picture>
        <source srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
                media="(min-width: 480px)"/>
        <img src="{% static "img/png/mover/use-letters-s4.png" %}" alt="list letters"
             class="use__img">
      </picture>
      <picture>
        <source srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
                media="(min-width: 480px)"/>
        <img src="{% static "img/png/mover/use-letters-s5.png" %}" alt="list letters"
             class="use__img">
      </picture>
      <picture>
        <source srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
                media="(min-width: 480px)"/>
        <img src="{% static "img/png/mover/use-letters-s6.png" %}" alt="list letters"
             class="use__img">
      </picture>
      <picture>
        <source srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
                media="(min-width: 480px)"/>
        <img src="{% static "img/png/mover/use-letters-s7.png" %}" alt="list letters"
             class="use__img">
      </picture>
      <picture>
        <source srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
                media="(min-width: 480px)"/>
        <img src="{% static "img/png/mover/use-letters-s8.png" %}" alt="list letters"
             class="use__img">
      </picture>
    </div>
  </section>

  <section class="animate left">
    <div class="title">
      {% translate "Хочешь вернуть стоимость билета, топлива или окупить свое путешествие?" %}
    </div>
    <div class="subtitle">
      {% translate "Зарегистрируйся на&nbsp;<a href='https://tripwb.com/' class='animate__link'>Trip With Bonus</a> прямо сейчас, размести бесплатно объявление и&nbsp;получи отклики от&nbsp;людей с&nbsp;посылками" %}
    </div>
    <a href="{% url "registration_page" %}"
       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 = 'scale(1)';
                  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/mover/about-1720.png" %}" media="(min-width: 1720px)"/>
        <source srcset="{% static "img/png/mover/about-1280.png" %}" media="(min-width: 1304px)"/>
        <source srcset="{% static "img/png/mover/about-1120.png" %}" media="(min-width: 1280px)"/>
        <source srcset="{% static "img/png/mover/about-640.png" %}" media="(min-width: 768px)"/>
        <img src="{% static "/img/png/mover/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="uses uses--cstmr">
    <div class="title">{% translate "Когда актуально пользоваться нашим сервисом" %}</div>

    <div class="uses__grid">
      <div class="uses__item">
        <img class="uses__icon" src="{% static "img/svg/bax.svg" %}" alt="image icon">
        <div class="uses__title">{% translate "Экономия" %}</div>
        <p class="uses__desc">
          {% translate "Когда нужно отбить стоимость дороги или топлива, или дополнительно заработать" %}
        </p>
      </div>
      <div class="uses__item">
        <img class="uses__icon" src="{% static "img/svg/airplane_takeoff.svg" %}" alt="image icon">
        <div class="uses__title">{% translate "Путешествия" %}</div>
        <p class="uses__desc">
          {% translate "Когда часто путешествуешь" %}
        </p>
      </div>
      <div class="uses__item">
        <img class="uses__icon" src="{% static "img/svg/briefcase.svg" %}" alt="image icon">
        <div class="uses__title">{% translate "Работа" %}</div>
        <p class="uses__desc">
          {% translate "Когда твоя работа связана с частыми переездами" %}
        </p>
      </div>
    </div>
  </section>

  <section class="animate right">
    <div class="title">
      {% translate "Размести свое объявление какую посылку ты можешь перевезти прямо сейчас " %}
    </div>
    <a href="{% url "registration_page" %}"
       class="use__btn btn btn--primary">{% translate "Разместить объявление" %}</a>
  </section>

  <section class="sore">
    <div class="title">
      {% translate "О наболевшем..." %}
    </div>
    <div class="subtitle">
      {% translate "Мы&nbsp;знаем, каково это <b>без конца и&nbsp;края просматривать</b> чаты и&nbsp;группы социальных сетей, писать туда по&nbsp;5-10 сообщений в&nbsp;день, чтобы найти посылки, которые можно перевезти и&nbsp;<b>сэкономить на&nbsp;топливе или билете.</b>" %}
    </div>
    <picture>
      <source srcset="{% static "img/png/mover/sore-1720.png" %}" media="(min-width: 1720px)"/>
      <source srcset="{% static "img/png/mover/sore-1280.png" %}" media="(min-width: 1304px)"/>
      <source srcset="{% static "img/png/mover/sore-1120.png" %}" media="(min-width: 1280px)"/>
      <source srcset="{% static "img/png/mover/sore-640.png" %}" media="(min-width: 768px)"/>
      <img src="{% static "/img/png/mover/sore-328.png" %}" alt="sore image" class="sore__img">
    </picture>
    <div class="h3">
      {% translate "Зарегистрируйся бесплатно прямо сейчас и начни размещать объявления о перевозки посылки" %}
    </div>
    <a href="{% url "registration_page" %}"
       class="sore__btn btn btn--primary">{% translate "Зарегистрироваться" %}</a>
    <br/>
    </div>
  </section>
{% endblock %}