{% set user = app.user %}
{% set kidNames = [] %}
{% for p in user.participants %}
    {% if p.firstname %}
        {% set kidNames = kidNames|merge([p.firstname ~ (p.age is not null ? ' (' ~ p.age ~ ')' : '')]) %}
    {% endif %}
{% endfor %}
{% set address = user.postalAddresses|first %}

<div class="flex items-center gap-3 border-b border-gray-200 bg-gray-50 px-6 py-5 dark:border-gray-700 dark:bg-gray-800/60">
    <div class="grid h-8 w-8 flex-none place-items-center rounded-lg bg-emerald-600 text-white">
        <svg class="h-[18px] w-[18px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="m5 13 4 4L19 7"/></svg>
    </div>
    <div>
        <h2 class="text-xl font-bold leading-tight text-gray-900 dark:text-white">{{ 'onboarding.done.cardTitle'|trans({}, 'cms') }}</h2>
        <div class="mt-0.5 text-sm font-medium text-gray-500 dark:text-gray-400">{{ 'onboarding.done.cardSub'|trans({}, 'cms') }}</div>
    </div>
</div>

<div class="px-6 py-6">

    <div class="py-3 text-center">
        <div class="relative mx-auto mb-4 grid h-[72px] w-[72px] place-items-center rounded-full bg-emerald-600 text-white shadow-[0_0_0_8px_theme(colors.emerald.100)] dark:shadow-[0_0_0_8px_theme(colors.emerald.900/40)]">
            <svg class="h-8 w-8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="m5 13 4 4L19 7"/></svg>

            {# Confetti dots #}
            <span aria-hidden="true" class="pointer-events-none absolute -left-2.5 -top-1.5 h-2 w-2 rounded-full bg-primary-500"></span>
            <span aria-hidden="true" class="pointer-events-none absolute -right-3 -bottom-1 h-2.5 w-2.5 rounded-full bg-amber-400"></span>
            <span aria-hidden="true" class="pointer-events-none absolute -top-3.5 right-4 h-1.5 w-1.5 rounded-full bg-rose-400"></span>
            <span aria-hidden="true" class="pointer-events-none absolute -bottom-2.5 left-3 h-1.5 w-1.5 rounded-full bg-sky-400"></span>
            <span aria-hidden="true" class="pointer-events-none absolute top-1 -right-4 h-1.5 w-1.5 rounded-full bg-emerald-400"></span>
            <span aria-hidden="true" class="pointer-events-none absolute -left-4 top-5 h-2 w-2 rounded-full bg-amber-300"></span>
        </div>
        <h3 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">{{ 'onboarding.done.title'|trans({}, 'cms') }}</h3>
        <p class="mx-auto max-w-[42ch] text-[15px] leading-relaxed text-gray-600 dark:text-gray-300">{{ 'onboarding.done.text'|trans({}, 'cms') }}</p>
    </div>

    <div class="mt-7 grid gap-3 sm:grid-cols-2">
        <div class="rounded-xl border border-gray-200 bg-gray-50 px-4 py-3.5 dark:border-gray-700 dark:bg-gray-800/60">
            <div class="text-[11px] font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">{{ 'onboarding.done.summary.account'|trans({}, 'cms') }}</div>
            <div class="mt-1.5 text-[15px] font-semibold text-gray-900 dark:text-white">
                {{ user.name }}
                {% if user.email %}<small class="mt-0.5 block text-[12px] font-medium text-gray-500 dark:text-gray-400">{{ user.email }}</small>{% endif %}
            </div>
        </div>

        <div class="rounded-xl border border-gray-200 bg-gray-50 px-4 py-3.5 dark:border-gray-700 dark:bg-gray-800/60">
            <div class="text-[11px] font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">{{ 'onboarding.done.summary.children'|trans({}, 'cms') }}</div>
            <div class="mt-1.5 text-[15px] font-semibold text-gray-900 dark:text-white">
                {% if kidNames|length %}
                    {{ 'onboarding.done.summary.childrenCount'|trans({'count': kidNames|length}, 'cms') }}
                    <small class="mt-0.5 block text-[12px] font-medium text-gray-500 dark:text-gray-400">{{ kidNames|join(' · ') }}</small>
                {% else %}
                    {{ 'onboarding.done.summary.childrenEmpty'|trans({}, 'cms') }}
                {% endif %}
            </div>
        </div>

        <div class="rounded-xl border border-gray-200 bg-gray-50 px-4 py-3.5 dark:border-gray-700 dark:bg-gray-800/60">
            <div class="text-[11px] font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">{{ 'onboarding.done.summary.address'|trans({}, 'cms') }}</div>
            <div class="mt-1.5 text-[15px] font-semibold text-gray-900 dark:text-white">
                {% if address and address.street %}
                    {{ address.street }}
                    <small class="mt-0.5 block text-[12px] font-medium text-gray-500 dark:text-gray-400">{{ (address.postalCode ~ ' ' ~ address.city)|trim }}</small>
                {% else %}
                    {{ 'onboarding.done.summary.addressEmpty'|trans({}, 'cms') }}
                {% endif %}
            </div>
        </div>

        <div class="rounded-xl border border-gray-200 bg-gray-50 px-4 py-3.5 dark:border-gray-700 dark:bg-gray-800/60">
            <div class="text-[11px] font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">{{ 'onboarding.done.summary.contact'|trans({}, 'cms') }}</div>
            <div class="mt-1.5 text-[15px] font-semibold text-gray-900 dark:text-white">
                {{ user.mobile ?: user.phone ?: user.email }}
                <small class="mt-0.5 block text-[12px] font-medium text-gray-500 dark:text-gray-400">{{ 'onboarding.done.summary.contactHint'|trans({}, 'cms') }}</small>
            </div>
        </div>
    </div>

    <div class="mt-7 grid gap-2.5 sm:grid-cols-2">
        {# `py-3.5` is one tick tighter than the xl default `py-3` — kept as
           an override on the class attribute; tailwind_merge resolves it. #}
        <twig:Cms:Button variant="primary" size="xl" rounded="xl"
                href="{{ path('cms', { to: 'offer_list' }) }}"
                class="gap-2 py-3.5">
            <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
            {{ 'onboarding.done.browseOffers'|trans({}, 'cms') }}
        </twig:Cms:Button>
        <twig:Cms:Button variant="secondary" size="xl" rounded="xl"
                href="{{ path('cms', { to: 'user_account', alias: 'account' }) }}"
                class="gap-2 py-3.5">
            <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg>
            {{ 'onboarding.done.openAccount'|trans({}, 'cms') }}
        </twig:Cms:Button>
    </div>

</div>
