<x-app-layout>
    <div class="min-h-screen flex flex-col justify-center items-center py-6 relative overflow-hidden">
        <!-- Background Image -->
        <div class="absolute inset-0 z-0">
            @livewire('welcome.login-landing-post', ['type' => 'SiteContents\Welcome\Landing' ?? null, 'random' => true, 'limit' => 1])
        </div>

        <!-- Verification Card -->
        <div class="mx-8 sm:max-w-md px-12 py-6 bg-theme-background dark:bg-theme-secondary backdrop-blur-sm shadow-2xl rounded-lg z-20 relative">
            <div class="flex justify-center mb-8">
                <x-jetstream.application-mark class="h-20 xl:h-28 w-auto" />
            </div>

            <div class="mb-4 text-sm text-theme-secondary">
                {{ __('Before continuing, could you verify your email address by clicking on the link we just emailed to you? If you didn\'t receive the email, we will gladly send you another.') }}
            </div>

            @if (session('status') == 'verification-link-sent')
                <div class="mb-4 font-medium text-sm text-green-600">
                    {{ __('A new verification link has been sent to the email address you provided in your profile settings.') }}
                </div>
            @endif

            <div class="mt-4 mb-4 flex flex-col gap-4">
                <form method="POST" action="{{ route('verification.send') }}" class="flex justify-center">
                    @csrf

                    <div>
                        <x-jetstream.button type="submit">
                            {{ __('Resend Verification Email') }}
                        </x-jetstream.button>
                    </div>
                </form>

                <div class="flex flex-col gap-2">
                    <a
                    href="{{ LaravelLocalization::localizeURL(route('profile.settings')) }}"
                    class="underline text-sm text-theme-secondary hover:text-theme-primary"
                    >
                        {{ __('Edit Profile') }}</a>

                    <form method="POST" action="{{ route('logout') }}" class="inline">
                        @csrf

                        <button type="submit" class="underline text-sm text-theme-secondary hover:text-theme-primary">
                            {{ __('Log out') }}
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>
