<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-primary-600 text-sm font-bold text-white">2</div>
    <div>
        <h2 class="text-xl font-bold leading-tight text-gray-900 dark:text-white">{{ 'onboarding.welcome.cardTitle'|trans({}, 'cms') }}</h2>
        <div class="mt-0.5 text-sm font-medium text-gray-500 dark:text-gray-400">{{ 'onboarding.welcome.cardSub'|trans({}, 'cms') }}</div>
    </div>
</div>

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

    <div class="relative overflow-hidden rounded-2xl border border-primary-100 bg-gradient-to-b from-primary-50 to-primary-100/60 px-7 py-8 dark:border-gray-700 dark:from-gray-700/40 dark:to-gray-700/20">
        <span class="inline-flex items-center gap-2 rounded-full border border-primary-100 bg-white/80 px-3 py-1.5 text-[11px] font-semibold uppercase tracking-wide text-primary-700 dark:border-gray-600 dark:bg-gray-900/70 dark:text-primary-200">
            <span class="grid h-4 w-4 place-items-center rounded-full bg-emerald-600 text-white">
                <svg class="h-2.5 w-2.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"><path d="m5 13 4 4L19 7"/></svg>
            </span>
            {{ 'onboarding.welcome.badge'|trans({}, 'cms') }}
        </span>
        <h3 class="mb-2 mt-3.5 text-2xl font-bold leading-tight tracking-tight text-gray-900 dark:text-white">{{ 'onboarding.welcome.greeting'|trans({'name': app.user.firstname}, 'cms') }}</h3>
        <p class="max-w-[46ch] text-[15px] leading-relaxed text-gray-700 dark:text-gray-200">{{ 'onboarding.welcome.text'|trans({}, 'cms') }}</p>
    </div>

    <div class="mt-6 space-y-2.5">
        {# Done #}
        <div class="grid grid-cols-[36px_1fr_auto] items-center gap-3.5 rounded-xl border border-gray-200 bg-white px-4 py-3.5 dark:border-gray-700 dark:bg-gray-900">
            <div class="grid h-9 w-9 place-items-center rounded-xl bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300">
                <svg class="h-[18px] w-[18px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="m5 13 4 4L19 7"/></svg>
            </div>
            <div>
                <div class="text-[14px] font-semibold text-gray-900 dark:text-white">{{ 'onboarding.welcome.progress.accountTitle'|trans({}, 'cms') }}</div>
                <div class="mt-0.5 text-[12px] text-gray-500 dark:text-gray-400">{{ 'onboarding.welcome.progress.accountDesc'|trans({'email': app.user.email}, 'cms') }}</div>
            </div>
            <span class="rounded-full bg-emerald-100 px-2.5 py-1 text-[12px] font-semibold text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300">{{ 'onboarding.welcome.progress.accountState'|trans({}, 'cms') }}</span>
        </div>
        {# Now #}
        <div class="grid grid-cols-[36px_1fr_auto] items-center gap-3.5 rounded-xl border border-gray-200 bg-white px-4 py-3.5 dark:border-gray-700 dark:bg-gray-900">
            <div class="grid h-9 w-9 place-items-center rounded-xl bg-primary-100 text-primary-700 dark:bg-primary-600/20 dark:text-primary-200">
                <svg class="h-[18px] w-[18px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="8" r="3"/><path d="M2 21a7 7 0 0 1 14 0"/><circle cx="18" cy="6" r="2"/><path d="M21 13a4 4 0 0 0-4-3"/></svg>
            </div>
            <div>
                <div class="text-[14px] font-semibold text-gray-900 dark:text-white">{{ 'onboarding.welcome.progress.childrenTitle'|trans({}, 'cms') }}</div>
                <div class="mt-0.5 text-[12px] text-gray-500 dark:text-gray-400">{{ 'onboarding.welcome.progress.childrenDesc'|trans({}, 'cms') }}</div>
            </div>
            <span class="rounded-full bg-gray-100 px-2.5 py-1 text-[12px] font-medium text-gray-500 dark:bg-gray-700 dark:text-gray-300">{{ 'onboarding.welcome.progress.childrenState'|trans({}, 'cms') }}</span>
        </div>
        {# Next #}
        <div class="grid grid-cols-[36px_1fr_auto] items-center gap-3.5 rounded-xl border border-gray-200 bg-white px-4 py-3.5 dark:border-gray-700 dark:bg-gray-900">
            <div class="grid h-9 w-9 place-items-center rounded-xl bg-gray-100 text-gray-500 dark:bg-gray-700 dark:text-gray-300">
                <svg class="h-[18px] w-[18px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9.5 12 3l9 6.5V21H3z"/><path d="M9 21V12h6v9"/></svg>
            </div>
            <div>
                <div class="text-[14px] font-semibold text-gray-900 dark:text-white">{{ 'onboarding.welcome.progress.addressTitle'|trans({}, 'cms') }}</div>
                <div class="mt-0.5 text-[12px] text-gray-500 dark:text-gray-400">{{ 'onboarding.welcome.progress.addressDesc'|trans({}, 'cms') }}</div>
            </div>
            <span class="rounded-full bg-gray-100 px-2.5 py-1 text-[12px] font-medium text-gray-500 dark:bg-gray-700 dark:text-gray-300">{{ 'onboarding.welcome.progress.addressState'|trans({}, 'cms') }}</span>
        </div>
    </div>

</div>

<div class="flex items-center justify-end border-t border-gray-200 bg-gray-50 px-6 py-4 dark:border-gray-700 dark:bg-gray-800/60">
    <twig:Cms:Button variant="primary" size="xl" rounded="xl"
            data-action="live#action:prevent"
            data-live-action-param="continue"
            class="gap-2">
        {{ 'onboarding.welcome.submit'|trans({}, 'cms') }}
        <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m13 6 6 6-6 6"/></svg>
    </twig:Cms:Button>
</div>
