{# Pricing cards partial — include with variant: 'compact' (landing) or 'full' (pricing page) #}
{% set is_full = variant|default('full') == 'full' %}
{% set heading_tag = is_full ? 'h2' : 'h3' %}
{% set price_size = is_full ? 'text-5xl' : 'text-4xl' %}
{% set btn_variant = is_full ? 'btn-lg' : 'btn-md' %}

<div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-3xl mx-auto">
    {# Free #}
    <div class="bg-white rounded-2xl p-8 border-2 border-gray-200">
        <{{ heading_tag }} class="text-xl font-bold text-dark">{{ 'pricing.free.name'|trans }}</{{ heading_tag }}>
        <p class="mt-2 {{ price_size }} font-extrabold text-dark">{{ 'pricing.free.price'|trans }}</p>
        <p class="text-sm text-gray-500 mt-1">{{ 'pricing.free.period'|trans }}</p>

        <ul class="mt-{{ is_full ? '8' : '6' }} space-y-{{ is_full ? '4' : '3' }} text-sm text-gray-600">
            <li class="flex items-start gap-{{ is_full ? '3' : '2' }}"><span class="text-echo{{ is_full ? ' text-lg leading-none' : '' }}">✓</span> {{ 'pricing.free.missions'|trans }}</li>
            <li class="flex items-start gap-{{ is_full ? '3' : '2' }}"><span class="text-echo{{ is_full ? ' text-lg leading-none' : '' }}">✓</span> {{ 'pricing.free.characters'|trans }}</li>
            {% if is_full %}
            <li class="flex items-start gap-3"><span class="text-echo text-lg leading-none">✓</span> {{ 'pricing.free.locations'|trans }}</li>
            <li class="flex items-start gap-3"><span class="text-echo text-lg leading-none">✓</span> {{ 'pricing.free.badges'|trans }}</li>
            {% endif %}
            <li class="flex items-start gap-{{ is_full ? '3' : '2' }}"><span class="text-echo{{ is_full ? ' text-lg leading-none' : '' }}">✓</span> {{ 'pricing.free.no_ads'|trans }}</li>
        </ul>

        <a href="{{ path('app_download') }}" class="btn btn-secondary {{ btn_variant }} mt-8 block w-full">
            {{ 'pricing.free.cta'|trans }}
        </a>
    </div>

    {# Pakiet Misji #}
    <div class="bg-white rounded-2xl p-8 border-2 border-nova relative">
        <span class="absolute -top-3 right-6 bg-nova text-white text-xs font-bold px-{{ is_full ? '4' : '3' }} py-1 rounded-full">{{ 'pricing.plus.badge'|trans }}</span>

        <{{ heading_tag }} class="text-xl font-bold text-dark">{{ 'pricing.plus.name'|trans }}</{{ heading_tag }}>
        <p class="mt-2 {{ price_size }} font-extrabold text-dark">{{ 'pricing.plus.price'|trans }}</p>
        <p class="text-sm text-gray-500 mt-1">{{ 'pricing.plus.period'|trans }}</p>

        <ul class="mt-{{ is_full ? '8' : '6' }} space-y-{{ is_full ? '4' : '3' }} text-sm text-gray-600">
            <li class="flex items-start gap-{{ is_full ? '3' : '2' }}"><span class="text-echo{{ is_full ? ' text-lg leading-none' : '' }}">✓</span> {{ 'pricing.plus.all_free'|trans }}</li>
            <li class="flex items-start gap-{{ is_full ? '3' : '2' }}"><span class="text-nova{{ is_full ? ' text-lg leading-none' : '' }}">✓</span> <strong>{{ 'pricing.plus.package'|trans }}</strong></li>
            <li class="flex items-start gap-{{ is_full ? '3' : '2' }}"><span class="text-nova{{ is_full ? ' text-lg leading-none' : '' }}">✓</span> {{ 'pricing.plus.exclusive_badges'|trans }}</li>
            {% if is_full %}
            <li class="flex items-start gap-3"><span class="text-nova text-lg leading-none">✓</span> {{ 'pricing.plus.boardgame'|trans }}</li>
            {% endif %}
        </ul>

        <a href="{{ path('purchase_index') }}" class="btn btn-primary {{ btn_variant }} mt-8 block w-full">
            {{ 'pricing.plus.cta'|trans }}
        </a>
    </div>
</div>