{{define "home.html"}}
{{template "layout" .}}
{{end}}

{{define "content"}}
<section class="hero">
  <div class="container hero-grid">
    <div class="hero-copy">
      <p class="eyebrow">Новая коллекция 2026</p>
      <h1 class="hero-title">Стиль, который<br><em>остаётся с вами</em></h1>
      <p class="hero-lead">Качественные товары с быстрой доставкой. В каталоге уже {{.TotalItems}} позиций.</p>
      <div class="hero-cta">
        <a href="#catalog" class="btn btn-primary btn-lg">Смотреть каталог</a>
        <a href="#categories" class="btn btn-ghost btn-lg">Категории</a>
      </div>
    </div>
    <div class="hero-visual" aria-hidden="true">
      <div class="hero-card hero-card-a"></div>
      <div class="hero-card hero-card-b"></div>
    </div>
  </div>
</section>

{{if .Categories}}
<section id="categories" class="section categories">
  <div class="container">
    <h2 class="section-title">Категории</h2>
    <ul class="category-list">
      {{range .Categories}}
      <li><a href="#catalog" class="category-chip">{{.}}</a></li>
      {{end}}
    </ul>
  </div>
</section>
{{end}}

<section id="catalog" class="section catalog">
  <div class="container">
    <div class="section-head">
      <h2 class="section-title">Популярные товары</h2>
      <p class="section-sub">Избранное из нашего ассортимента</p>
    </div>
    {{if .Products}}
    <div class="product-grid">
      {{range .Products}}
      <article class="product-card">
        <div class="product-image" style="background-image: url('{{.ImageURL}}')"></div>
        <div class="product-body">
          <span class="product-category">{{.Category}}</span>
          <h3 class="product-name">{{.Name}}</h3>
          <p class="product-desc">{{.Description}}</p>
          <div class="product-footer">
            <span class="product-price">{{formatPrice .Price}}</span>
            <button type="button" class="btn btn-primary btn-sm">В корзину</button>
          </div>
        </div>
      </article>
      {{end}}
    </div>
    {{else}}
    <p class="empty-state">Товары скоро появятся. Проверьте подключение к базе данных.</p>
    {{end}}
  </div>
</section>

<section class="section features">
  <div class="container features-grid">
    <div class="feature">
      <h3>Быстрая доставка</h3>
      <p>Отправка в день заказа по всей России.</p>
    </div>
    <div class="feature">
      <h3>Гарантия качества</h3>
      <p>14 дней на возврат без лишних вопросов.</p>
    </div>
    <div class="feature">
      <h3>Безопасная оплата</h3>
      <p>Шифрование данных и защищённые платежи.</p>
    </div>
  </div>
</section>
{{end}}