{# Герой-блок: аватар, имя, должность·компания, опционально кнопки Call/Email/City/Save Contact #}
{# Параметры: user, variant: 'bcard' | 'profile' | 'edit' #}
{% set _variant = variant|default('profile') %}
<section class="w-full {{ _variant == 'edit' ? '-mt-16 sm:-mt-20' : '-mt-20 sm:-mt-24' }} relative z-10 pb-10">
    <div class="profile-bcard-wrap">
        <div class="flex flex-col items-center text-center">
            <div class="{{ _variant == 'edit' ? 'mb-4' : 'profile-avatar mb-4' }}">
                {% if user.myPicture %}
                    <img src="{{ asset('images') }}/{{ user.myPicture }}" alt="{{ user.firstName }} {{ user.lastName }}"
                         class="{{ _variant == 'edit' ? 'w-20 h-20 sm:w-24 sm:h-24' : 'w-28 h-28 sm:w-32 sm:h-32' }} rounded-full border-4 border-white shadow-xl object-cover bg-white">
                {% else %}
                    <div class="{{ _variant == 'edit' ? 'w-20 h-20 sm:w-24 sm:h-24 rounded-full border-4 border-white shadow-xl bg-gray-200 flex items-center justify-center' : 'w-28 h-28 sm:w-32 sm:h-32 rounded-full border-4 border-white shadow-xl bg-primary flex items-center justify-center' }}">
                        <i class="fas fa-user {{ _variant == 'edit' ? 'text-gray-500 text-2xl sm:text-3xl' : 'text-white text-4xl sm:text-5xl' }}"></i>
                    </div>
                {% endif %}
            </div>
            {% if _variant == 'edit' %}
                <h1 class="text-xl sm:text-2xl font-bold text-gray-900">{{ 'lang.editProfile'|trans }}</h1>
                <p class="text-gray-600 text-sm">{{ user.firstName }} {{ user.lastName }}</p>
            {% else %}
                <h1 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-1">
                    {{ user.firstName }} {{ user.lastName }}
                    {% if user.isVerified %}
                        <span class="inline-flex items-center justify-center w-6 h-6 rounded-full bg-primary text-white text-xs ml-1" title="{{ 'lang.verified'|trans }}"><i class="fas fa-check"></i></span>
                    {% endif %}
                </h1>
                {% if user.companyPosition or user.company %}
                    <p class="text-gray-600 {{ _variant == 'bcard' or (_variant == 'profile' and show_actions|default(false)) ? 'text-base sm:text-lg mb-4' : 'text-base sm:text-lg' }}">
                        {% if user.companyPosition %}{{ user.companyPosition }}{% endif %}
                        {% if user.companyPosition and user.company %} · {% endif %}
                        {% if user.company %}{{ user.company }}{% endif %}
                    </p>
                {% endif %}
                {% if _variant == 'profile' and show_actions|default(false) and http_host is defined %}
                    <span id="myUrl" class="sr-only">https://{{ http_host }}{{ path('app_bcard', {'id': user.id, '_locale': app.request.locale}) }}</span>
                    <div class="flex flex-wrap gap-2 justify-center">
                        <button type="button" id="myUrlBtn" class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-primary hover:bg-primary-light text-white text-sm font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2">
                            <i class="fa-solid fa-copy text-xs"></i>
                            {{ 'lang.copyLink'|trans }}
                        </button>
                        <a href="{{ path('app_user_edit', {'id': user.id}) }}" class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-primary hover:bg-primary-light text-white text-sm font-medium rounded-lg transition-colors">
                            <i class="fas fa-pen text-xs"></i>
                            {{ 'lang.editProfile'|trans }}
                        </a>
                        <a href="{{ path('app_bcard', {'id': user.id, '_locale': app.request.locale}) }}" target="_blank" rel="noopener" class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-primary hover:bg-primary-light text-white text-sm font-medium rounded-lg transition-colors">
                            <i class="fas fa-external-link-alt text-xs"></i>
                            {{ 'lang.preview'|trans }}
                        </a>
                    </div>
                {% endif %}
                {% if _variant == 'bcard' %}
                    <div class="flex flex-wrap gap-2 justify-center">
                        {% if user.cellphone or user.phone %}
                            <a href="tel:{{ user.cellphone ?: user.phone }}" class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-primary hover:bg-primary-light text-white text-sm font-medium rounded-lg transition-colors">
                                <i class="fas fa-phone text-xs"></i>
                                {{ 'lang.call'|trans }}
                            </a>
                        {% endif %}
                        {% if user.email %}
                            <a href="mailto:{{ user.email }}" class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-primary hover:bg-primary-light text-white text-sm font-medium rounded-lg transition-colors">
                                <i class="fas fa-envelope text-xs"></i>
                                {{ 'lang.email'|trans }}
                            </a>
                        {% endif %}
                        {% if maps_pre_link is defined and maps_pre_link and (user.street or user.zip or user.city) %}
                            <a href="{{ maps_pre_link }}" target="_blank" rel="noopener" class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-primary hover:bg-primary-light text-white text-sm font-medium rounded-lg transition-colors">
                                <i class="fas fa-map-marker-alt text-xs"></i>
                                {{ 'lang.city'|trans }}
                            </a>
                        {% endif %}
                        <a href="{{ path('app_bcard_vcard', {'id': user.id}) }}" target="_blank" class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-primary hover:bg-primary-light text-white text-sm font-medium rounded-lg transition-colors">
                            <i class="fas fa-address-card text-xs"></i>
                            {{ 'lang.addToContacts'|trans }}
                        </a>
                    </div>
                {% endif %}
            {% endif %}
        </div>
    </div>
</section>