<div class="min-h-screen grid lg:grid-cols-2">

    {{-- LEFT SIDE (wie Login) --}}
    <div class="hidden lg:flex flex-col justify-between bg-gradient-to-br from-primary to-primary/80 text-white p-10">

        <div>
            <x-logo mode="!fill-white" class="w-40 h-16"/>
        </div>

        <div class="space-y-6 max-w-md">
            <h1 class="text-3xl font-semibold leading-tight">
                {{ t('auth.verify.hero.title') }}
            </h1>

            <p class="text-sm text-white/80">
                {{ t('auth.verify.hero.subtitle') }}
            </p>
        </div>

        <div class="text-xs text-white/50">
            © {{ date('Y') }} {{ config('app.name') }}
        </div>

    </div>


    {{-- RIGHT SIDE --}}
    <div class="flex items-center justify-center p-6">

        <div class="w-full max-w-md space-y-6">

            {{-- ERROR MESSAGE --}}
            @if(session('error.auth.verify.link_expired'))
                <div class="bg-red-50 border border-red-200 text-red-600 text-sm px-4 py-3 rounded-xl text-center">
                    {{ session('error.auth.verify.link_expired') }}
                </div>
            @endif

            {{-- CARD --}}
            <div class="bg-surface border border-border rounded-2xl p-6 shadow-card space-y-6 text-center">

                {{-- ICON --}}
                <div class="flex justify-center">
                    <div class="w-14 h-14 rounded-xl bg-primary/10 flex items-center justify-center">
                        <x-heroicon-o-envelope class="w-7 h-7 text-primary"/>
                    </div>
                </div>

                {{-- TEXT --}}
                <div>
                    <h2 class="text-lg font-semibold text-text">
                        {{ t('auth.verify.title') }}
                    </h2>

                    <p class="text-sm text-text-muted mt-1">
                        {{ t('auth.verify.subtitle') }}
                    </p>
                </div>

                {{-- ACTIONS --}}
                <div @if($cooldown > 0 || $blockedUntil ) wire:poll.1s="tick" @endif class="space-y-3">

                    <button
                        wire:click="resend"
                        @if($cooldown > 0 || $blockedUntil) disabled @endif
                        class="w-full text-white py-3 rounded-xl transition
    {{ $blockedUntil ? 'bg-red-500' : 'bg-primary' }}
    {{ ($cooldown > 0 || $blockedUntil) ? 'opacity-50 cursor-not-allowed' : 'hover:opacity-90' }}">

                        @if($blockedUntil)
                            {{ t('auth.verify.resend_wait_until', [
                                'time' => $blockedUntil->format('H:i')
                            ]) }}

                        @elseif($cooldown > 0)
                            {{ t('auth.verify.resend_in_seconds', [
                                'seconds' => $cooldown
                            ]) }}
                        @else
                            {{ t('auth.verify.resend') }}
                        @endif

                    </button>
                    <p class="text-xs text-text-muted">
                        {{ t('auth.verify.hint') }}
                    </p>

                </div>
            </div>
        </div>

    </div>

</div>
