{# Affiliate product comparison grid — editorial picks layout.
   Variables: products (list of dicts), category (str), t (translations), lang.
   Rendered bake-time by bake_product_cards(). #}
{% if products %}
<div style="margin:2rem 0;">

  {# Section header #}
  <div style="text-transform:uppercase;font-size:.75rem;font-weight:600;color:#64748B;letter-spacing:.06em;margin-bottom:1rem;padding-bottom:.75rem;border-bottom:2px solid #E2E8F0;">
    {{ t.affiliate_our_picks }} · {{ category | capitalize }}
  </div>

  {# Responsive grid of compact cards #}
  <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem;">
    {% for product in products %}
    {%- set price_eur = (product.price_cents / 100) if product.price_cents else none -%}
    {%- set cta = product.cta_label if product.cta_label else t.affiliate_cta_buy -%}
    <div class="aff-card-compact" style="background:#fff;border:1px solid #E2E8F0;border-radius:16px;padding:1rem;display:flex;flex-direction:column;gap:.5rem;transition:transform .2s,box-shadow .2s;" onmouseover="this.style.transform='translateY(-2px)';this.style.boxShadow='0 8px 24px rgba(0,0,0,.08)'" onmouseout="this.style.transform='';this.style.boxShadow=''">

      {# Image #}
      <div style="aspect-ratio:1;border-radius:10px;background:#F8FAFC;border:1px solid #E2E8F0;overflow:hidden;display:flex;align-items:center;justify-content:center;">
        {% if product.image_url %}
        <img src="{{ product.image_url }}" alt="{{ product.name }}" style="width:100%;height:100%;object-fit:contain;" loading="lazy">
        {% else %}
        <svg width="36" height="36" fill="none" stroke="#CBD5E1" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Z"/></svg>
        {% endif %}
      </div>

      {# Brand #}
      {% if product.brand %}
      <span style="text-transform:uppercase;font-size:.625rem;font-weight:600;letter-spacing:.06em;color:#94A3B8;">{{ product.brand }}</span>
      {% endif %}

      {# Name #}
      <h4 style="font-family:'Bricolage Grotesque',sans-serif;font-size:1rem;font-weight:700;color:#0F172A;letter-spacing:-.01em;margin:0;line-height:1.3;">{{ product.name }}</h4>

      {# Rating + pros/cons counts #}
      <div style="display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;">
        {% if product.rating %}
        <span style="color:#D97706;font-size:.8125rem;">★</span>
        <span style="font-size:.75rem;color:#64748B;">{{ "%.1f" | format(product.rating) }}</span>
        {% endif %}
        {% if product.pros %}
        <span style="font-size:.6875rem;color:#16A34A;background:#F0FDF4;border-radius:999px;padding:1px 6px;">{{ product.pros | length }} {{ t.affiliate_pros_label }}</span>
        {% endif %}
      </div>

      {# Price #}
      {% if price_eur %}
      <div style="font-family:'Commit Mono',monospace;font-size:1.0625rem;font-weight:700;color:#0F172A;">{{ "%.2f" | format(price_eur) | replace('.', ',') }} €</div>
      {% endif %}

      {# CTA — pushed to bottom via margin-top:auto #}
      <a href="/go/{{ product.slug }}" rel="sponsored nofollow noopener" target="_blank"
         style="display:block;background:#1D4ED8;color:#fff;border-radius:10px;padding:.5rem 1rem;font-weight:600;font-size:.8125rem;text-align:center;text-decoration:none;margin-top:auto;transition:background .2s;"
         onmouseover="this.style.background='#1E40AF'"
         onmouseout="this.style.background='#1D4ED8'">
        {{ cta }} →
      </a>

    </div>
    {% endfor %}
  </div>

  {# Shared disclosure #}
  <p style="font-size:.6875rem;color:#94A3B8;font-style:italic;margin:.75rem 0 0;text-align:center;">{{ t.affiliate_disclosure }}</p>

</div>
{% endif %}
