{% extends 'base.html' %}
{% block title %}Главная — Сервис заявок{% endblock %}
{% block content %}

<section class="hero reveal">
  <h1 class="hero__title">Подавайте заявки онлайн</h1>
  <p class="hero__subtitle">Удобный сервис для подачи заявок и отслеживания их статуса в реальном времени.</p>
  {% if not session.uid %}
    <a href="{{ url_for('register') }}" class="btn btn--primary btn--lg">Начать сейчас</a>
  {% else %}
    <a href="{{ url_for('cabinet') if not session.is_admin else url_for('admin') }}"
       class="btn btn--primary btn--lg">Перейти в кабинет</a>
  {% endif %}
</section>

<!-- слайдер на 3 изображения -->
<section class="slider reveal" aria-roledescription="карусель" aria-label="Возможности сервиса">
  <div class="slider__track" id="sliderTrack">
    <figure class="slide is-active">
      <img class="slide__img" src="{{ url_for('static', filename='img/slide-1.svg') }}" alt="Подача заявки онлайн">
      <figcaption class="slide__caption">
        <h2 class="slide__title">Быстрая подача</h2>
        <p class="slide__text">Заполните форму за пару минут — без бумаг и очередей.</p>
      </figcaption>
    </figure>

    <figure class="slide">
      <img class="slide__img" src="{{ url_for('static', filename='img/slide-2.svg') }}" alt="Отслеживание статуса">
      <figcaption class="slide__caption">
        <h2 class="slide__title">Контроль статуса</h2>
        <p class="slide__text">Следите за движением заявки: «новое», «в работе», «выполнено».</p>
      </figcaption>
    </figure>

    <figure class="slide">
      <img class="slide__img" src="{{ url_for('static', filename='img/slide-3.svg') }}" alt="Ответ администратора">
      <figcaption class="slide__caption">
        <h2 class="slide__title">Обратная связь</h2>
        <p class="slide__text">Получайте ответ администратора прямо в личном кабинете.</p>
      </figcaption>
    </figure>
  </div>

  <button class="slider__arrow slider__arrow--prev" id="sliderPrev" aria-label="Предыдущий слайд">&#10094;</button>
  <button class="slider__arrow slider__arrow--next" id="sliderNext" aria-label="Следующий слайд">&#10095;</button>

  <div class="slider__dots" id="sliderDots" role="tablist" aria-label="Выбор слайда">
    <button class="slider__dot is-active" data-index="0" aria-label="Слайд 1"></button>
    <button class="slider__dot" data-index="1" aria-label="Слайд 2"></button>
    <button class="slider__dot" data-index="2" aria-label="Слайд 3"></button>
  </div>
</section>

<section class="steps reveal" aria-label="Как это работает">
  <h2 class="section-title">Как это работает</h2>
  <p class="section-lead">Всего три простых шага от регистрации до ответа.</p>

  <ol class="steps__list">
    <li class="steps__item">
      <span class="steps__num">1</span>
      <div>
        <h3 class="steps__title">Зарегистрируйтесь</h3>
        <p class="steps__text">Создайте аккаунт по email и придумайте никнейм.</p>
      </div>
    </li>
    <li class="steps__item">
      <span class="steps__num">2</span>
      <div>
        <h3 class="steps__title">Заполните заявку</h3>
        <p class="steps__text">Укажите данные и выберите подходящий вариант.</p>
      </div>
    </li>
    <li class="steps__item">
      <span class="steps__num">3</span>
      <div>
        <h3 class="steps__title">Получите ответ</h3>
        <p class="steps__text">Администратор обработает заявку и пришлёт ответ.</p>
      </div>
    </li>
  </ol>
</section>

<script>
  // слайдер: переключение слайдов и автопрокрутка
  (function () {
    var slides = document.querySelectorAll('.slide');
    var dots = document.querySelectorAll('.slider__dot');
    if (!slides.length) return;

    var current = 0;
    var timer = null;

    function go(index) {
      current = (index + slides.length) % slides.length;
      slides.forEach(function (s, i) { s.classList.toggle('is-active', i === current); });
      dots.forEach(function (d, i) { d.classList.toggle('is-active', i === current); });
    }

    function start() { timer = setInterval(function () { go(current + 1); }, 5000); }
    function stop() { clearInterval(timer); }

    document.getElementById('sliderNext').addEventListener('click', function () { go(current + 1); stop(); start(); });
    document.getElementById('sliderPrev').addEventListener('click', function () { go(current - 1); stop(); start(); });
    dots.forEach(function (d) {
      d.addEventListener('click', function () { go(parseInt(d.dataset.index, 10)); stop(); start(); });
    });

    var slider = document.querySelector('.slider');
    slider.addEventListener('mouseenter', stop);   // пауза при наведении
    slider.addEventListener('mouseleave', start);

    start();
  })();

  // появление блоков при прокрутке
  (function () {
    var items = document.querySelectorAll('.reveal');
    if (!('IntersectionObserver' in window)) {
      items.forEach(function (el) { el.classList.add('is-shown'); });
      return;
    }
    var obs = new IntersectionObserver(function (entries) {
      entries.forEach(function (e) {
        if (e.isIntersecting) { e.target.classList.add('is-shown'); obs.unobserve(e.target); }
      });
    }, { threshold: 0.15 });
    items.forEach(function (el) { obs.observe(el); });
  })();
</script>

{% endblock %}