{% extends "base.html" %}

{% block content %}
<section class="hero">
  <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="#how">Как это работает</a>
    </div>
  </div>
  <div class="hero-visual" aria-hidden="true">
    <div class="hero-plane"></div>
    <div class="hero-orbit"></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>
      <a class="category-link" href="#catalog">
        <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 gradient-{{ product.image_gradient }} reveal">
      <div class="product-media"></div>
      <div class="product-body">
        <p class="product-tag">{{ product.delivery_note }}</p>
        <h3>{{ product.title }}</h3>
        <p>{{ product.short_description }}</p>
        <div class="product-meta">
          <span class="price">{{ product.price | rub }}</span>
          <button type="button" class="btn btn-small" data-buy="{{ product.slug }}">Купить</button>
        </div>
      </div>
    </article>
    {% endfor %}
  </div>
  {% endif %}

  <div class="product-grid">
    {% for product in products %}
    <article class="product gradient-{{ product.image_gradient }} reveal">
      <div class="product-media"></div>
      <div class="product-body">
        <p class="product-tag">{{ product.delivery_note }}</p>
        <h3>{{ product.title }}</h3>
        <p>{{ product.short_description }}</p>
        <div class="product-meta">
          <span class="price">{{ product.price | rub }}</span>
          <button type="button" class="btn btn-small" data-buy="{{ product.slug }}">Купить</button>
        </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>
      <span class="step-num">01</span>
      <h3>Выберите товар</h3>
      <p>Ключ, подписка или карта пополнения из каталога.</p>
    </li>
    <li>
      <span class="step-num">02</span>
      <h3>Оплатите</h3>
      <p>Безопасная оплата картой или через доступные методы.</p>
    </li>
    <li>
      <span class="step-num">03</span>
      <h3>Получите сразу</h3>
      <p>Код или доступ приходят автоматически после оплаты.</p>
    </li>
  </ol>
</section>

<div class="toast" id="toast" hidden role="status" aria-live="polite"></div>
{% endblock %}