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

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

{% block breadcrumbs %}
<nav aria-label="breadcrumb" class="mb-5 text-sm">
  <ol class="flex flex-wrap items-center gap-1.5 text-on-surface/60 dark:text-on-surface-dark/60">
    {{ ui::crumb_current(label=t(key="nav-home", lang=lang | default(value='sk'))) }}
  </ol>
</nav>
{% endblock breadcrumbs %}

{% block content %}
{% set L = lang | default(value='sk') %}
{# Home layout adapted from the Kompress design mockup: the left "Kategórie"
   column is already supplied by base.html's #category-sidebar, so the main
   area is split into a featured product grid + a right rail (bestsellers /
   our stores / contact). All colors use the design tokens so light + dark
   both work; the brand accent is the medical blue set in app.css. #}
<div class="grid grid-cols-1 gap-6 lg:grid-cols-[minmax(0,1fr)_19rem] lg:grid-rows-[auto_1fr] lg:items-start">

  <!-- bestsellers (reuses the featured products). DOM-first so it stacks above
       the product grid on mobile; placed in the right rail's top cell on lg. -->
  {% if products | length > 0 %}
  <section class="overflow-hidden rounded-radius border border-outline bg-surface-alt lg:col-start-2 lg:row-start-1 dark:border-outline-dark dark:bg-surface-dark-alt">
    <h2 class="border-b border-outline px-4 py-3.5 text-xs font-bold uppercase tracking-wider text-on-surface-strong dark:border-outline-dark dark:text-on-surface-dark-strong">{{ t(key="home-bestsellers", lang=L) }}</h2>
    <ol class="p-2">
      {% for product in products | slice(end=5) %}
      <li>
        <a href="/shop/{{ product.slug }}" class="flex items-center gap-3 rounded-radius px-2 py-2 transition hover:bg-primary/5">
          <span class="inline-flex size-6 shrink-0 items-center justify-center rounded-md bg-primary/10 text-xs font-extrabold text-primary dark:bg-primary-dark/15 dark:text-primary-dark">{{ loop.index }}</span>
          <span class="flex size-11 shrink-0 items-center justify-center overflow-hidden rounded-md border border-outline bg-surface dark:border-outline-dark dark:bg-surface-dark">
            {% if product.image %}
            <img src="/images/{{ product.image }}" alt="{{ product.name }}" class="size-full object-cover">
            {% else %}
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" class="text-on-surface/30 dark:text-on-surface-dark/30"><rect x="3" y="4" width="18" height="16" rx="2"></rect><circle cx="8.5" cy="9" r="1.6"></circle><path d="M21 16l-5-5L5 20"></path></svg>
            {% endif %}
          </span>
          <span class="flex min-w-0 flex-col gap-0.5">
            <span class="line-clamp-2 text-[13px] font-semibold leading-tight text-on-surface-strong dark:text-on-surface-dark-strong">{{ product.name }}</span>
            <span class="text-sm font-extrabold text-primary dark:text-primary-dark">{% if product.has_options %}{{ t(key="from-price", price=product.price, lang=lang | default(value='sk')) }}{% else %}{{ product.price }}{% endif %} {{ currency_symbol }}</span>
          </span>
        </a>
      </li>
      {% endfor %}
    </ol>
    <a href="/shop" class="block border-t border-outline px-4 py-3 text-center text-[13px] font-semibold text-primary transition hover:bg-primary/5 dark:border-outline-dark dark:text-primary-dark">{{ t(key="home-bestsellers-all", lang=L) }}</a>
  </section>
  {% endif %}

  <!-- center column -->
  <div class="flex min-w-0 flex-col gap-6 lg:col-start-1 lg:row-span-2 lg:row-start-1">
    <!-- hero / heading -->
    <section>
      <h1 class="text-3xl font-extrabold tracking-tight text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="shop-title", lang=lang | default(value='sk')) }}</h1>
      <p class="mt-2 max-w-2xl text-sm text-on-surface/70 dark:text-on-surface-dark/70">{{ t(key="shop-subtitle", lang=lang | default(value='sk')) }}</p>
    </section>

    <!-- featured products -->
    {% if products | length > 0 %}
    <section class="space-y-4">
      <div class="flex items-end justify-between">
        <h2 class="text-xl font-bold text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="nav-shop", lang=lang | default(value='sk')) }}</h2>
        <a href="/shop" class="text-sm font-semibold text-primary dark:text-primary-dark">{{ t(key="cart-continue", lang=lang | default(value='sk')) }} →</a>
      </div>
      <div x-data="{ view: localStorage.getItem('shopView') === 'grid' ? 'grid' : 'list' }"
        x-init="$watch('view', v => localStorage.setItem('shopView', v))"
        :class="view === 'list' ? 'flex flex-col gap-4' : 'grid grid-cols-2 gap-4 sm:grid-cols-3'">
        {% for product in products %}
        {% include "shop/_card.html" %}
        {% endfor %}
      </div>
    </section>
    {% else %}
    <section class="rounded-radius border border-outline bg-surface-alt px-6 py-16 text-center dark:border-outline-dark dark:bg-surface-dark-alt">
      <p class="text-on-surface/70 dark:text-on-surface-dark/70">{{ t(key="shop-empty", lang=lang | default(value='sk')) }}</p>
      <a href="/shop" class="mt-4 inline-flex items-center justify-center rounded-radius bg-primary px-6 py-2.5 text-sm font-semibold 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>
    {% endif %}
  </div>

  <!-- right rail -->
  <aside class="flex flex-col gap-5 lg:col-start-2 lg:row-start-2">

    <!-- our stores (static) -->
    <section class="overflow-hidden rounded-radius border border-outline bg-surface-alt dark:border-outline-dark dark:bg-surface-dark-alt">
      <h2 class="border-b border-outline px-4 py-3.5 text-xs font-bold uppercase tracking-wider text-on-surface-strong dark:border-outline-dark dark:text-on-surface-dark-strong">{{ t(key="footer-stores", lang=L) }}</h2>
      <div class="p-3.5">
        <img src="/static/img/store.jpg" alt="{{ t(key='home-stores-photo', lang=L) }}" width="142" height="115" loading="lazy"
          class="h-28 w-full rounded-radius border border-outline object-cover dark:border-outline-dark" />
        <a href="/predajne" class="mt-3 inline-block text-sm font-bold text-primary transition hover:underline dark:text-primary-dark">{{ t(key="home-stores-discover", lang=L) }}</a>
      </div>
    </section>

    <!-- contact CTA (static, brand blue) -->
    <section class="overflow-hidden rounded-radius bg-primary text-on-primary dark:bg-primary-dark dark:text-on-primary-dark">
      <div class="p-5">
        <div class="text-xs font-bold uppercase tracking-wider opacity-80">{{ t(key="home-contact-title", lang=L) }}</div>
        <p class="mt-2.5 text-sm leading-relaxed opacity-90">{{ t(key="home-contact-text", lang=L) }}</p>
        <a href="tel:+421903410476" class="mt-3.5 flex items-center gap-2.5 text-xl font-extrabold tracking-tight">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 4h4l2 5-3 2a12 12 0 0 0 5 5l2-3 5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2Z"></path></svg>
          +421 903 410 476
        </a>
        <a href="tel:+421903410476" class="mt-3.5 block w-full rounded-radius bg-surface px-4 py-3 text-center text-sm font-bold text-primary transition hover:opacity-90 dark:bg-surface-dark dark:text-primary-dark">{{ t(key="home-contact-cta", lang=L) }}</a>
      </div>
    </section>

  </aside>
</div>
{% endblock content %}