{#
  _upsell.html — Reusable badge macros for the upsell / plan-gating UI.

  Usage:
    {% from '_upsell.html' import crown_badge, max_badge, beta_pill, locked_btn %}

  Macros:
    crown_badge()           — small amber crown SVG (Premium-locked)
    max_badge()             — small "MAX" pill (MAX-locked)
    beta_pill()             — "Beta" pill (e.g. guide generation)
    locked_btn(plan, label, extra_classes='')
                            — renders a button that opens the upgrade modal
                              instead of performing any action.
                              plan = 'premium' | 'max'
                              label = human label used in modal title
                              extra_classes = additional Tailwind classes
#}

{# Inline crown SVG — 14×14, amber, used for Premium-gated items #}
{% macro crown_badge() %}<span class="upsell-crown inline-flex items-center justify-center align-middle ml-1 flex-shrink-0" title="{{ _('Premium feature') }}" aria-label="{{ _('Premium feature') }}"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-3.5 h-3.5 text-amber-500 dark:text-amber-400"><path fill-rule="evenodd" d="M10 1a.75.75 0 0 1 .67.415L13.16 6.5l5.09.743a.75.75 0 0 1 .416 1.279l-3.683 3.591.869 5.07a.75.75 0 0 1-1.088.79L10 15.347l-4.764 2.506a.75.75 0 0 1-1.088-.79l.869-5.07L1.334 8.522a.75.75 0 0 1 .416-1.279l5.09-.743 2.49-5.085A.75.75 0 0 1 10 1Z" clip-rule="evenodd"/></svg></span>{% endmacro %}

{# MAX pill #}
{% macro max_badge() %}<span class="upsell-max inline-flex items-center align-middle ml-1 px-1 py-0.5 rounded text-[9px] font-bold tracking-wide bg-purple-100 dark:bg-purple-500/20 text-purple-600 dark:text-purple-400 border border-purple-200 dark:border-purple-500/30 flex-shrink-0" title="{{ _('MAX plan feature') }}" aria-label="{{ _('MAX plan feature') }}">MAX</span>{% endmacro %}

{# Beta pill #}
{% macro beta_pill() %}<span class="upsell-beta inline-flex items-center align-middle ml-1 px-1.5 py-0.5 rounded-full text-[9px] font-semibold bg-sky-100 dark:bg-sky-500/20 text-sky-600 dark:text-sky-400 border border-sky-200 dark:border-sky-500/30 flex-shrink-0" aria-label="{{ _('Beta feature') }}">{{ _('Beta') }}</span>{% endmacro %}