{% extends "base.html" %}
{% import "macros/ui.html" as ui %}

{% block title %}{{ t(key="brand", lang=lang | default(value='sk')) }}{% endblock title %}

{% block content %}
<div class="space-y-12">
  <!-- hero -->
  <section class="rounded-radius border border-outline bg-surface-alt px-6 py-12 text-center dark:border-outline-dark dark:bg-surface-dark-alt">
    <h1 class="text-4xl font-bold tracking-tight text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="shop-title", lang=lang | default(value='sk')) }}</h1>
    <p class="mx-auto mt-3 max-w-xl text-on-surface/70 dark:text-on-surface-dark/70">{{ t(key="shop-subtitle", lang=lang | default(value='sk')) }}</p>
    <a href="/shop" class="mt-6 inline-flex items-center justify-center rounded-radius bg-primary px-6 py-2.5 text-sm font-medium tracking-wide text-on-primary transition hover:opacity-75 dark:bg-primary-dark dark:text-on-primary-dark">{{ t(key="nav-shop", lang=lang | default(value='sk')) }}</a>
  </section>

  <!-- featured products -->
  {% if products | length > 0 %}
  <section class="space-y-5">
    <div class="flex items-end justify-between">
      <h2 class="text-2xl font-bold text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="shop-title", lang=lang | default(value='sk')) }}</h2>
      <a href="/shop" class="text-sm font-medium text-primary dark:text-primary-dark">{{ t(key="cart-continue", lang=lang | default(value='sk')) }} →</a>
    </div>
    <div class="grid grid-cols-2 gap-5 sm:grid-cols-3 lg:grid-cols-4">
      {% for product in products %}
      {% include "shop/_card.html" %}
      {% endfor %}
    </div>
  </section>
  {% endif %}
</div>
{% endblock content %}