{# Affiliate product card — editorial recommendation style.
   Variables: product (dict with parsed pros/cons lists), t (translations), lang.
   Rendered bake-time by bake_product_cards(); no request context available. #}
{%- 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" style="background:#fff;border:1px solid #E2E8F0;border-radius:16px;padding:1.5rem;margin:1.5rem 0;box-shadow:0 1px 3px rgba(0,0,0,.05);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='0 1px 3px rgba(0,0,0,.05)'">
  <div style="display:flex;gap:1.25rem;align-items:flex-start;flex-wrap:wrap;">

    {# ── Image ── #}
    <div style="width:160px;flex-shrink:0;aspect-ratio:1;border-radius:12px;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="48" height="48" 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>

    {# ── Content ── #}
    <div style="flex:1;min-width:0;">

      {# Brand + retailer #}
      <div style="display:flex;align-items:center;gap:.5rem;margin-bottom:.375rem;">
        {% if product.brand %}
        <span style="text-transform:uppercase;font-size:.6875rem;font-weight:600;letter-spacing:.06em;color:#64748B;">{{ product.brand }}</span>
        {% endif %}
        {% if product.retailer %}
        <span style="background:#F1F5F9;border-radius:999px;padding:2px 8px;font-size:.625rem;font-weight:600;color:#64748B;letter-spacing:.04em;text-transform:uppercase;">{{ t.affiliate_at_retailer | tformat(retailer=product.retailer) }}</span>
        {% endif %}
      </div>

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

      {# Rating #}
      {% if product.rating %}
      {%- set stars_full = product.rating | int -%}
      {%- set has_half = (product.rating - stars_full) >= 0.5 -%}
      <div style="display:flex;align-items:center;gap:.25rem;margin-bottom:.375rem;">
        <span style="color:#D97706;font-size:.9375rem;">
          {%- for i in range(stars_full) %}★{% endfor -%}
          {%- if has_half %}★{% endif -%}
          {%- for i in range(5 - stars_full - (1 if has_half else 0)) %}<span style="color:#E2E8F0;">★</span>{% endfor -%}
        </span>
        <span style="font-size:.8125rem;color:#64748B;">{{ "%.1f" | format(product.rating) }}</span>
      </div>
      {% endif %}

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

      {# Description #}
      {% if product.description %}
      <p style="font-size:.875rem;color:#475569;line-height:1.55;margin:.625rem 0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;">{{ product.description }}</p>
      {% endif %}

      {# Pros #}
      {% if product.pros %}
      <ul style="list-style:none;padding:0;margin:.625rem 0 .25rem;">
        {% for pro in product.pros %}
        <li style="font-size:.8125rem;color:#475569;line-height:1.7;"><span style="color:#16A34A;margin-right:.25rem;">✓</span>{{ pro }}</li>
        {% endfor %}
      </ul>
      {% endif %}

      {# Cons #}
      {% if product.cons %}
      <ul style="list-style:none;padding:0;margin:.25rem 0 .75rem;">
        {% for con in product.cons %}
        <li style="font-size:.8125rem;color:#475569;line-height:1.7;"><span style="color:#EF4444;margin-right:.25rem;">✗</span>{{ con }}</li>
        {% endfor %}
      </ul>
      {% endif %}

      {# CTA #}
      <a href="/go/{{ product.slug }}" rel="sponsored nofollow noopener" target="_blank"
         style="display:block;width:100%;background:#1D4ED8;color:#fff;border-radius:12px;padding:.625rem 1.25rem;font-weight:600;font-size:.875rem;text-align:center;text-decoration:none;box-shadow:0 2px 10px rgba(29,78,216,.25);transition:background .2s,transform .2s;margin-top:.5rem;"
         onmouseover="this.style.background='#1E40AF';this.style.transform='translateY(-1px)'"
         onmouseout="this.style.background='#1D4ED8';this.style.transform=''">
        {{ cta }} →
      </a>

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

    </div>
  </div>
</div>
