dictia-public/templates/macros/pricing_card.html

{# Reusable pricing card macro (v7.0). 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 — entity-free expected: "Cloud BASIC", "DictIA LOCAL"…)
     target           : Target audience tagline — piped through | safe (may contain entities)
     features         : List of feature strings, each piped through | safe (may contain   entities)
     badge            : Top eyebrow chip text above the title — e.g. 'Cloud · Souverain QC' or 'Local · 100% hors-ligne'
     recommended      : If True, wraps the card in grad-bg gradient frame + RECOMMANDÉ badge
     setup            : One-shot setup price NUMBER (CAD, no NBSP) — None to hide. Cloud Basic/Essentiel = None,
                        Cloud Pro = 485, DictIA Local = 5998.
     monthly          : Monthly recurring price NUMBER (CAD, no NBSP) — None for DictIA Local (one-shot only).
     yearly_renewal   : Year-2+ renewal NUMBER (CAD, no NBSP) — only for DictIA Local (500$/an dès An 2).
     capacity_audio   : Capacity chip (audio hours / month) — e.g. '~165 h audio/mois'
     capacity_storage : Capacity chip (storage) — e.g. '100 Go'
     gpu              : GPU chip — e.g. 'NVIDIA L4 partagé'
     cta_label        : Button text — e.g. 'Démarrer en Cloud', 'Configurer DictIA Local'
     cta_url          : Base URL for the CTA — slug appended (NOT piped through | safe — URL injection guard)

   The numeric `setup` / `monthly` / `yearly_renewal` are formatted server-side
   with French (fr-CA) thousands separator (NBSP) — `5998` → `5 998 $`.
   This avoids requiring callers to remember OQLF NBSP conventions for every
   price string.

   Note: pre-launch hygiene (LPC art. 219) — CTA wording is supplied by the
   caller (`cta_label`) so we no longer hardcode "Réserver" everywhere. #}

{# Format an integer like 5998 → '5 998' (OQLF thousands separator) #}
{%- macro fmt_price(n) -%}
{%- set s = n | string -%}
{%- if s | length > 3 -%}{{ s[:-3] }} {{ s[-3:] }}{%- else -%}{{ s }}{%- endif -%}
{%- endmacro -%}

{%- macro pricing_card(slug, name, target, features,
                      badge=None, recommended=False,
                      setup=None, monthly=None, yearly_renewal=None,
                      capacity_audio=None, capacity_storage=None, gpu=None,
                      cta_label='Choisir ce forfait', cta_url='/checkout') -%}
<div class="relative {% if recommended %}grad-bg p-[1.5px] rounded shadow-cta{% 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 inline-flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-3 h-3" aria-hidden="true"><path d="M12 2l2.9 6.9L22 10l-5.5 4.8L18 22l-6-3.6L6 22l1.5-7.2L2 10l7.1-1.1z"/></svg>RECOMMANDÉ</span>{% endif %}
  <div class="bg-white p-6 rounded border border-brand-border h-full flex flex-col">

    {# Eyebrow badge (optional) — Cloud · Souverain QC / Local · 100% hors-ligne #}
    {% if badge %}
    <p class="eyebrow grad-text mb-3 text-[11px]">{{ badge | safe }}</p>
    {% endif %}

    {# Title + target audience #}
    <div class="mb-5">
      <h3 class="text-xl font-black mb-1.5 text-brand-navy">{{ name | safe }}</h3>
      <p class="text-sm text-brand-navy/70 leading-snug">{{ target | safe }}</p>
    </div>

    {# Pricing block — 3 layouts:
       - DictIA Local : setup (one-shot An 1) + yearly_renewal tagline
       - Cloud Pro    : setup (one-time onboarding) + monthly recurring
       - Cloud Basic/Essentiel : monthly only #}
    <div class="mb-5 pb-5 border-b border-brand-border">
      {% if monthly is none and setup is not none %}
        {# DictIA Local — one-shot An 1 + yearly renewal #}
        <div class="text-4xl font-black grad-text leading-none">{{ fmt_price(setup) }}&nbsp;$</div>
        <div class="text-xs text-brand-navy/70 mt-2">An&nbsp;1 (matériel + installation + 1<sup>re</sup> année logiciel)</div>
        {% if yearly_renewal %}
        <div class="text-xs text-brand-navy/70 mt-1">puis <strong class="text-brand-navy">{{ fmt_price(yearly_renewal) }}&nbsp;$/an</strong> dès An&nbsp;2</div>
        {% endif %}
      {% elif setup is not none and monthly is not none %}
        {# Cloud Pro — setup + monthly #}
        <div class="text-4xl font-black grad-text leading-none">{{ fmt_price(monthly) }}&nbsp;$<span class="text-base text-brand-navy/60 font-bold">&nbsp;/&nbsp;mois</span></div>
        <div class="text-xs text-brand-navy/70 mt-2">+ {{ fmt_price(setup) }}&nbsp;$ onboarding (unique)</div>
      {% else %}
        {# Cloud Basic / Essentiel — monthly only #}
        <div class="text-4xl font-black grad-text leading-none">{{ fmt_price(monthly) }}&nbsp;$<span class="text-base text-brand-navy/60 font-bold">&nbsp;/&nbsp;mois</span></div>
        <div class="text-xs text-brand-navy/70 mt-2">Aucun frais d'installation</div>
      {% endif %}
    </div>

    {# Capacity chips — audio / storage / GPU (only if provided) #}
    {% if capacity_audio or capacity_storage or gpu %}
    <div class="flex flex-wrap gap-1.5 mb-5" role="list" aria-label="Caractéristiques techniques">
      {% if capacity_audio %}
      <span role="listitem" class="inline-flex items-center gap-1 px-2 py-1 rounded-full bg-brand-b1/[0.08] border border-brand-b1/20 text-[11px] font-semibold text-brand-navy/85">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-3 h-3 text-brand-b1" aria-hidden="true"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
        <span>{{ capacity_audio | safe }}</span>
      </span>
      {% endif %}
      {% if capacity_storage %}
      <span role="listitem" class="inline-flex items-center gap-1 px-2 py-1 rounded-full bg-brand-b2/[0.08] border border-brand-b2/20 text-[11px] font-semibold text-brand-navy/85">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-3 h-3 text-brand-b2" aria-hidden="true"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5v14a9 3 0 0 0 18 0V5"/><path d="M3 12a9 3 0 0 0 18 0"/></svg>
        <span>{{ capacity_storage | safe }}</span>
      </span>
      {% endif %}
      {% if gpu %}
      <span role="listitem" class="inline-flex items-center gap-1 px-2 py-1 rounded-full bg-brand-b3/[0.08] border border-brand-b3/20 text-[11px] font-semibold text-brand-navy/85">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-3 h-3 text-brand-b3" aria-hidden="true"><rect x="2" y="6" width="20" height="12" rx="2"/><path d="M6 18v2"/><path d="M18 18v2"/><path d="M6 10h.01"/><path d="M10 10h4"/></svg>
        <span>{{ gpu | safe }}</span>
      </span>
      {% endif %}
    </div>
    {% endif %}

    {# Features list #}
    <ul class="space-y-2.5 mb-6 flex-grow" role="list">
      {% for f in features %}
      <li class="flex items-start gap-2 text-sm text-brand-navy/80">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 mt-0.5 flex-shrink-0 text-brand-b3" aria-hidden="true"><path d="M5 13l4 4L19 7"/></svg>
        <span>{{ f | safe }}</span>
      </li>
      {% endfor %}
    </ul>

    {# CTA #}
    {% from 'macros/button.html' import button %}
    {{ button(cta_label, href=cta_url.rstrip('/') + '/' + slug, variant='primary' if recommended else 'secondary', size='lg') }}
  </div>
</div>
{%- endmacro -%}