{# Reusable pricing card macro. FlexiHub style — recommended tier gets a grad-bg outer border (1.5px gradient frame).

   Args:
     slug          : URL-safe identifier (goes into href, NOT piped through | safe — autoescape protects URL)
     name          : Display name (piped through | safe — may contain entities; current names like "DictIA 8" are entity-free)
     price_setup   : Setup price string with NBSP (e.g. '3 450 $') — piped through | safe
     price_monthly : Monthly price string with NBSP (e.g. '173 $') — piped through | safe
     target        : Target audience tagline — piped through | safe (may contain entities)
     features      : List of feature strings, each piped through | safe (will contain   entities)
     recommended   : If True, wraps the card in grad-bg gradient frame + RECOMMANDÉ badge
     cta_url       : Base URL for the CTA — slug appended (NOT piped through | safe — URL injection guard)

   Note: CTA label is "Réserver [name]" not "Choisir" because product is in pre-launch
   (cf. trust bar "Pré-inscription ouverte") — LPC art. 219 hygiene.
   The button macro autoescapes its `text` arg, so `name` MUST NOT contain HTML entities
   (verified: "DictIA 8", "DictIA 16", "DictIA Cloud" are all entity-free). #}
{%- macro pricing_card(slug, name, price_setup, price_monthly, target, features, recommended=False, cta_url='/checkout') -%}
<div class="relative {% if recommended %}grad-bg p-[1.5px] rounded-xl{% endif %}">
  {% if recommended %}<span class="absolute -top-3 left-1/2 -translate-x-1/2 grad-bg text-white text-xs font-bold px-3 py-1 rounded-full shadow-cta">★ RECOMMANDÉ</span>{% endif %}
  <div class="bg-white p-8 rounded-xl border border-brand-border h-full flex flex-col">
    <div class="mb-6">
      <h3 class="text-xl font-black mb-1 text-brand-navy">{{ name | safe }}</h3>
      <p class="text-sm text-brand-navy/70">{{ target | safe }}</p>
    </div>
    <div class="mb-6">
      <div class="text-4xl font-black grad-text">{{ price_setup | safe }}</div>
      <div class="text-sm text-brand-navy/70">+ {{ price_monthly | safe }} / mois</div>
    </div>
    <ul class="space-y-3 mb-8 flex-grow">
      {% for f in features %}
      <li class="flex items-start gap-2 text-sm text-brand-navy/80">
        <span class="grad-text font-black flex-shrink-0" aria-hidden="true">✓</span>
        <span>{{ f | safe }}</span>
      </li>
      {% endfor %}
    </ul>
    {% from 'macros/button.html' import button %}
    {{ button('Réserver ' + name, href=cta_url.rstrip('/') + '/' + slug, variant='primary' if recommended else 'secondary', size='lg') }}
  </div>
</div>
{%- endmacro -%}