{% extends "base.html" %}

{% block title %}{{ t('home.meta.title') }}{% endblock %}
{% block description %}{{ t('home.meta.description') }}{% endblock %}

{% block content %}
<section class="hero">
  <div class="hero-copy">
    <h1>{{ t('home.hero.title') }}</h1>
    <p class="lead">{{ t('home.hero.subtitle') }}</p>
    <a class="button" href="/producto/mochila-cactus">{{ t('home.hero.cta') }}</a>
  </div>
  {# An `image` field: the src is editable copy, so clicking the picture in the editor
     opens it in the side panel and a pasted URL swaps it live. The alt text is its own
     (invisible) field right beside it.

     The narrow copies are generated ahead of time for the photo that ships with the
     site, so they are only offered while that is still the photo: a replaced one has
     no variants, and a `srcset` left behind outranks `src` — the browser would go on
     painting the old picture. Any site with responsive images needs this guard. #}
  <img class="hero-photo" src="{{ t('home.hero.image') }}" alt="{{ t('home.hero.alt') }}"
       {% if is_stock_photo('home.hero.image') %}srcset="/static/hero-400.svg 400w, /static/hero-800.svg 800w" sizes="100vw"{% endif %}>
</section>

<section class="values">
  <h2>{{ t('home.values.heading') }}</h2>
  <ul class="value-list">
    {% for item in t_lines('home.values.items') %}
      <li>{{ item }}</li>
    {% endfor %}
  </ul>
</section>

{# A collection: the count lives in the data, so this template never says "three".
   Adding a photo in the panel adds one here, with no deploy. #}
<section class="galeria">
  <h2>{{ t('home.galeria.heading') }}</h2>
  <div class="galeria-grid">
    {% for foto in t_list('home.galeria') %}
      <figure>
        <img src="{{ foto.img }}" alt="{{ foto.cap }}" loading="lazy">
        <figcaption>{{ foto.cap }}</figcaption>
      </figure>
    {% endfor %}
  </div>
</section>

<section class="catalogue">
  <h2>La colección</h2>
  <div class="product-grid">
    {% for slug, item in products.items() %}
      {# .product-card is declared as external_content: its name/price come from the
         catalogue, so a click in the editor says so instead of shrugging. #}
      <a class="product-card" href="/producto/{{ slug }}">
        <span class="product-emoji">{{ item.emoji }}</span>
        <span class="product-name">{{ item.name }}</span>
        <span class="product-price">{{ item.price }}</span>
      </a>
    {% endfor %}
  </div>
</section>
{% endblock %}