{# Левая панель для страниц входа и регистрации #}
{# Параметры: title_key, title_icon, lead_key, lead2_key, benefits, benefit_icons, cta_teaser_key, cta_label_key, cta_url, cta_icon #}
<div class="auth-left-panel flex flex-col h-full w-full">
    <div class="flex-shrink-0 flex items-center justify-between pt-8 px-10 lg:px-12 w-full">
        {% include '_components/logo_auth.html.twig' %}
        <span class="text-white font-semibold text-lg lg:text-xl">{{ 'lang.digitalBusinessCard'|trans }}</span>
    </div>

    <div class="flex-1 flex flex-col justify-center px-10 lg:px-14 py-8 overflow-y-auto">
        <div class="auth-left-content w-full max-w-lg text-left">
            {# Заголовок с иконкой слева (опционально) #}
            {% if title_key|default('') %}
            <div class="flex items-start gap-4 mb-6">
                {% if title_icon|default('') %}
                <span class="auth-title-icon flex-shrink-0 w-12 h-12 rounded-xl bg-white/10 flex items-center justify-center text-secondary" aria-hidden="true">
                    <i class="fas {{ title_icon }} text-xl"></i>
                </span>
                {% endif %}
                <h1 class="text-3xl lg:text-4xl font-bold text-white leading-tight pt-1">
                    {{ title_key|trans }}
                </h1>
            </div>
            {% endif %}

            <p class="text-lg text-white/90 leading-relaxed mb-4">
                {{ lead_key|trans }}
            </p>
            {% if lead2_key|default('') %}
            <p class="text-base text-white/80 leading-relaxed mb-8">
                {{ lead2_key|trans }}
            </p>
            {% endif %}

            {# Преимущества: иконка слева + текст #}
            <ul class="auth-benefits space-y-5 mb-10">
                {% for benefit_key in benefits %}
                <li class="flex items-start gap-4 text-white/90">
                    <span class="auth-benefit-icon flex-shrink-0 w-10 h-10 rounded-lg bg-secondary/20 flex items-center justify-center text-secondary mt-0.5" aria-hidden="true">
                        <i class="fas {{ benefit_icons[loop.index0]|default('fa-check') }} text-sm"></i>
                    </span>
                    <span class="text-base leading-relaxed pt-2">{{ benefit_key|trans }}</span>
                </li>
                {% endfor %}
            </ul>

            <div class="pt-6 border-t border-white/20">
                <p class="text-white/80 text-sm mb-4">{{ cta_teaser_key|default('lang.noAccountYet')|trans }}</p>
                <a href="{{ cta_url }}" class="inline-flex items-center gap-1.5 px-4 py-2 bg-secondary hover:bg-secondary-light text-white text-sm font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-white/50">
                    <span>{{ cta_label_key|trans }}</span>
                    {% if cta_icon|default('') %}
                    <i class="fas {{ cta_icon }}" aria-hidden="true"></i>
                    {% endif %}
                </a>
            </div>
        </div>
    </div>

    <div class="flex-shrink-0 pb-8 pt-4 pl-10 lg:pl-14">
        {% include '_components/demo_picture_section.html.twig' %}
    </div>
</div>