{% set blockedDisabledCountry = null %}
{% if blockedCountryCode %}
    {% for disabledCountry in config.disableCountries %}
        {% if disabledCountry.country == blockedCountryCode %}
            {% set blockedDisabledCountry = disabledCountry %}
        {% endif %}
    {% endfor %}
{% endif %}

<div class="mx-auto w-full max-w-4xl border border-primary/10 bg-surface-container-low p-5 shadow-[0_20px_60px_rgba(51,38,28,0.06)] md:p-7">
    <div class="border border-primary/8 bg-white/70 px-5 py-7 text-center md:px-8 md:py-10">
        <p class="font-label text-[11px] font-semibold uppercase tracking-[0.22em] text-secondary">
            {{ 'shop.title'|trans }}
        </p>
        <h2 class="mt-4 font-display text-[30px] leading-[1.04] font-semibold [font-optical-sizing:auto] text-primary md:text-[40px]">
            {{ 'shop.blockShop'|trans({'%country%': blockedCountryCode|country_name}) }}
        </h2>

        {% if blockedDisabledCountry and blockedDisabledCountry.description|default('')|striptags|trim is not empty %}
            <div class="mx-auto mt-6 max-w-2xl text-[15px] leading-7 text-primary/75 [&_a]:text-secondary [&_a]:underline [&_a]:underline-offset-4 [&_p]:mb-4 [&_p:last-child]:mb-0">
                {{ blockedDisabledCountry.description|raw }}
            </div>
        {% endif %}

        <p class="mx-auto mt-6 max-w-2xl text-[15px] leading-7 text-primary/65">
            {{ 'shop.blockShopContact'|trans }}
        </p>

        <a
            href="{{ path('contact') }}"
            class="mt-6 inline-flex min-h-[46px] cursor-pointer items-center justify-center border border-primary bg-primary px-6 py-3 font-label text-[10px] font-semibold uppercase tracking-[0.18em] text-white transition hover:border-secondary hover:bg-secondary"
        >
            {{ 'shop.blockShopContactLink'|trans }}
        </a>
    </div>
</div>
