{% 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" %}">
  {#  <link rel="stylesheet" href="{% static "css/slick-theme.css" %}">#}
  <script src="{% static "js/slick.min.js" %}"></script>
  <script src="{% static "js/push/lazyload.min.js" %}"></script>
{% endblock %}
{#{% block before_close %}#}
{#  <script src="{% static "js/slick.min.js" %}"></script>#}
{#  #}
{#{% endblock %}#}

{% block content %}

  <section class="presentation">
    <div class="presentation__top">
      <h1 class="presentation__title title">
        {% blocktrans %}
          Сервис попутных посылок
        {% endblocktrans %}
      </h1>
      <div class="presentation__subtitle subtitle h4">
        {% translate "Отправляй посылки с попутчиками в любую точку, быстро и недорого" %}
      </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/image1.webp" %}" alt="img1"/>
            <p class="cards__desc">
              {% translate "Мария, хочет отправить<br class='br1'/> посылку, но её не устраивает<br class='br1'/> цена доставки почтовых<br class='br1'/>" %}
              {% translate "сервисов и она устала искать в<br class='br1'/> чатах тех, кто сможет перевезти<br class='br1'/> посылку." %}
            </p>
          </div>
          <div class="cards__item">
            <div class="cards__arrow"></div>
            <img class="cards__img" src="{% static "img/webp/image2.webp" %}" alt="img1"/>
            <p class="cards__desc">

              {% translate "Мария, узнаёт о нашем сервисе<br class='br1'/>" %}
              <a href="/">TripWB.com. </a>
              {% translate "Регистрируется<br class='br1'/> и очень быстро размещает<br class='br1'/> объявление." %}
            </p>
          </div>
          <div class="cards__item">
            <div class="cards__arrow"></div>
            <img class="cards__img" src="{% static "img/webp/image3.webp" %}" alt="img1"/>
            <p class="cards__desc">
              {% translate "Попутчик Егор увидел<br class='br1'/> объявление Марии, нажал<br class='br1'/> откликнуться и получил<br class='br1'/> возможность связаться с ней,<br class='br1'/> удобным для него способом." %}
            </p>
          </div>
          <div class="cards__item">
            <img class="cards__img" src="{% static "img/webp/image4.webp" %}" alt="img1"/>
            <p class="cards__desc">
              {% translate "Мария и Егор обговорили детали<br class='br1'/> доставки и потом встретились в<br class='br1'/> удобном для всех месте. После<br class='br1'/> чего Мария передала посылку<br class='br1'/> Егору и он её доставил." %}
            </p>
          </div>
        </div>
      </div>
    </div>
  </section>
  {############easy###############}
  <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/webp/sender-card1.webp' %}" 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;него." %}</p>
        <img src="{% static 'img/webp/sender-card2.webp' %}" alt="sender1">
      </div>
      <div class="easy__item easy__item--thr">
        <p>{% translate "Тебе остаётся только выбрать перевозчика, связаться и&nbsp;обсудить детали перевозки." %}</p>
        <img src="{% static 'img/webp/sender-card3.webp' %}" alt="sender1">

      </div>
    </div>
    <div class="subtitle">
      {% translate "Чтобы разместить объявление - зарегистрируйтесь" %}
    </div>
    <a href="#form" class="easy__btn btn btn--primary">{% translate "Разместить объявление" %}</a>
  </section>
  {############use###############}
  <section class="use">
    <div class="title">{% translate "Уже пользуются сайтом и находят перевозчиков" %}</div>
    <img src="{% static "img/webp/use.webp" %}" alt="list users" class="use__img">
    <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="use use--diff">
    <div class="title">{% translate "Чем мы отличаемся от классических почтовых сервисов" %}</div>
    <img src="{% static "img/webp/diff.webp" %}" alt="list differences" class="use__img">
  </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">

              <video data-src="{{ MEDIA_URL }}{{ media_item.video }}" autoplay></video>
 </div>
          </div>
        </div>
      </div>
      {% endfor %}
{#      <div class="slick-slide">#}
{#        <div class="chatterbox__slide">#}
{#          <div class="chatterbox__vbtn"></div>#}
{#          <div class="chatterbox__wrap">#}
{#            <div class="chatterbox__vbox">#}
{#              <video controls data-src="/media/uploads/1.mp4" autoplay></video>#}
{#            </div>#}
{#          </div>#}
{#        </div>#}
{##}
{#      </div>#}
{#      <div class="slick-slide">#}
{#        <div class="chatterbox__slide">#}
{#          <div class="chatterbox__vbtn"></div>#}
{#          <div class="chatterbox__vbox">#}
{#            <video controls data-src="/media/uploads/2.mp4" autoplay></video>#}
{#          </div>#}
{#        </div>#}
{#      </div>#}
{#      <div class="slick-slide">#}
{#        <div class="chatterbox__slide">#}
{#          <div class="chatterbox__vbtn"></div>#}
{#          <div class="chatterbox__wrap">#}
{#            <div class="chatterbox__vbox">#}
{#              <video controls data-src="/media/uploads/3.mp4" autoplay>#}
{#              </video>#}
{#            </div>#}
{#          </div>#}
{#        </div>#}
{##}
{#      </div>#}
{#      <div class="slick-slide">#}
{#        <div class="chatterbox__slide">#}
{#          <div class="chatterbox__vbtn"></div>#}
{#          <div class="chatterbox__wrap">#}
{#            <div class="chatterbox__vbox">#}
{#              <video controls data-src="/media/uploads/4.mp4" autoplay>#}
{#              </video>#}
{#            </div>#}
{#          </div>#}
{#        </div>#}

      </div>

      <div class="slick-slide">
        <div class="chatterbox__slide">
          <div class="chatterbox__vbtn"></div>
          <div class="chatterbox__wrap">
            <div class="chatterbox__vbox">
              <video controls data-src="/media/uploads/5.mp4" autoplay>
              </video>
            </div>
          </div>


        </div>
      </div>
    </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;
                    vtn.nextElementSibling.querySelector('video');
                    window.d = vtn;
                    console.log($(vtn).siblings().find('video')[0]);
                    console.log(vtn, e.target)
                    LazyLoad.load($(vtn).siblings().find('video')[0], {
                        callback_loaded: (e) => callbackLoaded(e, vtn),
                    });
                });
                const callbackLoaded = function (elm, vtn) {
                    vtn.classList.add('hide');
                    const imgWrap = elm.closest('.chatterbox__slide');
                    imgWrap?.classList.add('loaded');
                };
            }

            handlerVideos();
            $('.slick-slider')
                .slick({
                    centerMode: true,
                    {#centerPadding: '160px',#}
                    slidesToShow: 3,
                    infinite: false,
                    initialSlide: 1,
                    {#lazyLoad: 'ondemand',#}
                    {#lazyLoad: 'progressive',#}
                    responsive: [
                        {
                            breakpoint: 768,
                            settings: {
                                arrows: false,
                                centerMode: true,
                                centerPadding: '40px',
                                slidesToShow: 3
                            }
                        },
                        {
                            breakpoint: 480,
                            settings: {
                                arrows: false,
                                centerMode: true,
                                centerPadding: '40px',
                                slidesToShow: 1
                            }
                        }
                    ]
                })
                .on('beforeChange', function (event, slick, currentSlide, nextSlide) {
                    slick.$slides[currentSlide]?.querySelector('video')?.pause();
                    console.log('edge was hit', slick.$slides[currentSlide]);
                });
        });
    </script>
  </section>
  <section class="use use--lett">
    <div class="title">{% translate "Что о нас пишут люди" %}</div>
    <img src="{% static "img/png/use-letterss.png" %}" alt="list letters" class="use__img">
  </section>
  <section class="animate">
    <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.querySelector('.animate');
                const observer = new IntersectionObserver(
                    (entries, interserctionObserver) => {
                        entries.forEach(entry => {
                            console.log('or', entry)
                            if (entry.isIntersecting) {
                                const el = entry.target;
                                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'},
                );
                observer.observe(animate);
            }
        )
        ;
    </script>
  </section>
  <section class="about">
    <div class="title">{% translate "О сервисе Trip With Bonus" %}</div>
    <div class="about__grid">
      <img src="{% static "/img/png/about.png" %}" alt="" 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>
{#    </div>#}
  </section>

  <section class="benefits">
    <div class="title">{% translate "Преимущества сервиса" %}</div>
    <div class="benefits__grid">
      <div class="benefits__first benefits__col">
        <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">
        <img src="{% static "/img/png/benefits.png" %}" alt="benefits">
      </div>
      <div class="benefits__third benefits__col">
        <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>






{% endblock %}