<div class="max-w-lg mx-auto py-16 text-center space-y-8" wire:poll.2000ms="checkStatus">

    {{-- ============================================================
         PROCESSING STATE — solange noch nicht fertig
    ============================================================ --}}
    @if(!$done)

        {{-- Spinner Icon --}}
        <div class="flex justify-center">
            <div class="w-20 h-20 rounded-full bg-indigo-50 border border-indigo-100 flex items-center justify-center">
                <svg class="w-9 h-9 text-indigo-500 animate-spin" fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
                </svg>
            </div>
        </div>

        <div class="space-y-1">
            <h1 class="text-2xl font-bold text-gray-900">{{ t('checkout.success.processing') }}</h1>
            <p class="text-sm text-gray-400">{{ t('checkout.success.wait') }}</p>
        </div>

        {{-- Step list --}}
        <div class="bg-white border border-gray-100 rounded-2xl shadow-sm divide-y divide-gray-50 text-left overflow-hidden">

            {{-- Step 1: Subscription --}}
            <div class="flex items-center gap-4 px-5 py-4">
                @if($subscriptionReady)
                    <div class="w-8 h-8 rounded-full bg-green-50 border border-green-100 flex items-center justify-center shrink-0">
                        <x-heroicon-o-check class="w-4 h-4 text-green-500"/>
                    </div>
                @else
                    <div class="w-8 h-8 rounded-full bg-indigo-50 border border-indigo-100 flex items-center justify-center shrink-0">
                        <svg class="w-4 h-4 text-indigo-400 animate-spin" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
                        </svg>
                    </div>
                @endif
                <div>
                    <p class="text-sm font-medium {{ $subscriptionReady ? 'text-gray-800' : 'text-gray-500' }}">
                        {{ t('checkout.success.activate_sub') }}
                    </p>
                    <p class="text-xs {{ $subscriptionReady ? 'text-green-600' : 'text-gray-400' }}">
                        {{ $subscriptionReady ? t('checkout.success.sub_created') : t('checkout.success.waiting_stripe') }}
                    </p>
                </div>
                @if($subscriptionReady)
                    <span class="ml-auto text-[10px] font-semibold px-2 py-0.5 rounded-md bg-green-50 text-green-700">{{ t('checkout.success.done') }}</span>
                @endif
            </div>

            {{-- Step 2: Payment --}}
            <div class="flex items-center gap-4 px-5 py-4 {{ !$subscriptionReady ? 'opacity-40' : '' }}">
                @if($paymentReady)
                    <div class="w-8 h-8 rounded-full bg-green-50 border border-green-100 flex items-center justify-center shrink-0">
                        <x-heroicon-o-check class="w-4 h-4 text-green-500"/>
                    </div>
                @elseif($subscriptionReady)
                    <div class="w-8 h-8 rounded-full bg-indigo-50 border border-indigo-100 flex items-center justify-center shrink-0">
                        <svg class="w-4 h-4 text-indigo-400 animate-spin" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
                        </svg>
                    </div>
                @else
                    <div class="w-8 h-8 rounded-full bg-gray-50 border border-gray-100 flex items-center justify-center shrink-0">
                        <x-heroicon-o-credit-card class="w-4 h-4 text-gray-300"/>
                    </div>
                @endif
                <div>
                    <p class="text-sm font-medium {{ $paymentReady ? 'text-gray-800' : 'text-gray-500' }}">
                        {{ t('checkout.success.capture') }}
                    </p>
                    <p class="text-xs {{ $paymentReady ? 'text-green-600' : 'text-gray-400' }}">
                        {{ $paymentReady ? t('checkout.success.payment_saved') : t('checkout.success.confirming') }}
                    </p>
                </div>
                @if($paymentReady)
                    <span class="ml-auto text-[10px] font-semibold px-2 py-0.5 rounded-md bg-green-50 text-green-700">{{ t('checkout.success.done') }}</span>
                @endif
            </div>

            {{-- Step 3: Fertig --}}
            <div class="flex items-center gap-4 px-5 py-4 opacity-40">
                <div class="w-8 h-8 rounded-full bg-gray-50 border border-gray-100 flex items-center justify-center shrink-0">
                    <x-heroicon-o-bolt class="w-4 h-4 text-gray-300"/>
                </div>
                <div>
                    <p class="text-sm font-medium text-gray-500">{{ t('checkout.success.unlock_plan') }}</p>
                    <p class="text-xs text-gray-400">{{ t('checkout.success.features_on') }}</p>
                </div>
            </div>

        </div>

    @else

    {{-- ============================================================
         SUCCESS STATE — alles fertig
    ============================================================ --}}

        {{-- Check Icon --}}
        <div class="flex justify-center">
            <div class="w-20 h-20 rounded-full bg-green-50 border border-green-100 flex items-center justify-center">
                <x-heroicon-o-check-circle class="w-10 h-10 text-green-500"/>
            </div>
        </div>

        <div class="space-y-2">
            <h1 class="text-2xl font-bold text-gray-900">{{ t('checkout.success.all_ready') }}</h1>
            <p class="text-gray-500">
                {{ t('checkout.success.sub_active') }}
            </p>
        </div>

        {{-- Completed steps summary --}}
        <div class="bg-white border border-gray-100 rounded-2xl shadow-sm divide-y divide-gray-50 text-left overflow-hidden">

            @foreach([
                ['label' => t('checkout.success.sub_activated'),  'desc' => t('checkout.success.plan_created')],
                ['label' => t('checkout.success.payment_captured'), 'desc' => t('checkout.success.invoice_hint')],
                ['label' => t('checkout.success.plan_unlocked'),    'desc' => t('checkout.success.all_features')],
            ] as $step)
                <div class="flex items-center gap-4 px-5 py-4">
                    <div class="w-8 h-8 rounded-full bg-green-50 border border-green-100 flex items-center justify-center shrink-0">
                        <x-heroicon-o-check class="w-4 h-4 text-green-500"/>
                    </div>
                    <div>
                        <p class="text-sm font-medium text-gray-800">{{ $step['label'] }}</p>
                        <p class="text-xs text-gray-400">{{ $step['desc'] }}</p>
                    </div>
                    <span class="ml-auto text-[10px] font-semibold px-2 py-0.5 rounded-md bg-green-50 text-green-700">{{ t('checkout.success.done') }}</span>
                </div>
            @endforeach

        </div>

        {{-- Actions --}}
        <div class="flex flex-col sm:flex-row gap-3 justify-center">
            <a href="{{ route('dashboard.index') }}"
               class="inline-flex items-center justify-center gap-2 px-5 py-2.5 rounded-xl bg-indigo-600 text-white font-semibold hover:bg-indigo-700 transition-colors">
                <x-heroicon-o-home class="w-4 h-4"/>
                {{ t('checkout.success.to_dashboard') }}
            </a>
            <a href="{{ route('invoices.index') }}"
               class="inline-flex items-center justify-center gap-2 px-5 py-2.5 rounded-xl bg-white border border-gray-200 text-gray-700 font-semibold hover:bg-gray-50 transition-colors">
                <x-heroicon-o-document-text class="w-4 h-4"/>
                {{ t('checkout.success.view_invoices') }}
            </a>
        </div>

    @endif

</div>
