{% extends "base.html" %}

{% block content %}
<section class="hero">
  <div class="hero-bg" aria-hidden="true">
    <div class="hero-mesh"></div>
    <div class="hero-scan"></div>
    <div class="hero-glyph">
      <span></span><span></span><span></span>
    </div>
  </div>
  <div class="hero-copy">
    <p class="brand-mark">{{ app_name }}</p>
    <h1>Код приходит сразу после оплаты</h1>
    <p class="hero-lead">Ключи, софт и карты пополнения с автоматической выдачей.</p>
    <div class="hero-actions">
      <a class="btn btn-primary" href="#catalog">Открыть каталог</a>
      <a class="btn btn-ghost" href="/lookup">Найти заказ</a>
    </div>
  </div>
</section>

<section class="categories" aria-label="Категории">
  <div class="section-head">
    <h2>Категории</h2>
    <p>Выберите тип цифрового товара</p>
  </div>
  <ul class="category-list">
    {% for category in categories %}
    <li class="reveal">
      <a class="category-link" href="#catalog">
        <span class="category-index">0{{ loop.index }}</span>
        <span class="category-name">{{ category.name }}</span>
        <span class="category-desc">{{ category.description }}</span>
      </a>
    </li>
    {% endfor %}
  </ul>
</section>

<section class="catalog" id="catalog">
  <div class="section-head">
    <h2>Каталог</h2>
    <p>Позиции с мгновенной выдачей цифрового кода</p>
  </div>

  {% if featured %}
  <div class="featured-rail" aria-label="Избранное">
    {% for product in featured %}
    <article class="product product-featured tone-{{ product.image_gradient }} reveal">
      <a class="product-media" href="/product/{{ product.slug }}">
        <span class="product-mark">{{ product.title[:1] }}</span>
      </a>
      <div class="product-body">
        <p class="product-tag">{{ product.delivery_note }}</p>
        <h3><a href="/product/{{ product.slug }}">{{ product.title }}</a></h3>
        <p>{{ product.short_description }}</p>
        <div class="product-meta">
          <span class="price">{{ product.price | rub }}</span>
          <form method="post" action="/cart/add/{{ product.id }}">
            <button type="submit" class="btn btn-small" {% if stock_map.get(product.id, 0) < 1 %}disabled{% endif %}>
              {% if stock_map.get(product.id, 0) < 1 %}Нет в наличии{% else %}В корзину{% endif %}
            </button>
          </form>
        </div>
      </div>
    </article>
    {% endfor %}
  </div>
  {% endif %}

  <div class="product-grid">
    {% for product in products %}
    <article class="product tone-{{ product.image_gradient }} reveal">
      <a class="product-media" href="/product/{{ product.slug }}">
        <span class="product-mark">{{ product.title[:1] }}</span>
      </a>
      <div class="product-body">
        <p class="product-tag">{{ product.delivery_note }}</p>
        <h3><a href="/product/{{ product.slug }}">{{ product.title }}</a></h3>
        <p>{{ product.short_description }}</p>
        <div class="product-meta">
          <span class="price">{{ product.price | rub }}</span>
          <form method="post" action="/cart/add/{{ product.id }}">
            <button type="submit" class="btn btn-small" {% if stock_map.get(product.id, 0) < 1 %}disabled{% endif %}>
              {% if stock_map.get(product.id, 0) < 1 %}Нет в наличии{% else %}В корзину{% endif %}
            </button>
          </form>
        </div>
      </div>
    </article>
    {% else %}
    <p class="empty">Товары скоро появятся.</p>
    {% endfor %}
  </div>
</section>

<section class="how" id="how">
  <div class="section-head">
    <h2>Как купить</h2>
    <p>Три шага до цифрового кода</p>
  </div>
  <ol class="steps">
    <li class="reveal">
      <span class="step-num">01</span>
      <h3>Выберите товар</h3>
      <p>Добавьте ключ, подписку или карту в корзину.</p>
    </li>
    <li class="reveal">
      <span class="step-num">02</span>
      <h3>Оформите заказ</h3>
      <p>Укажите email — к нему привязывается выдача.</p>
    </li>
    <li class="reveal">
      <span class="step-num">03</span>
      <h3>Получите сразу</h3>
      <p>Коды открываются на странице заказа мгновенно.</p>
    </li>
  </ol>
</section>
{% endblock %}