<template>
    <LandingLayout>
        <main class="flex flex-grow items-center justify-center">
            <div class="w-full max-w-2xl px-4 py-20 sm:px-6 lg:px-8">
                <div
                    class="relative flex flex-col items-center overflow-hidden rounded-3xl border border-[var(--c-purple)]/30 bg-gradient-to-br from-[var(--c-purple)]/20 to-[var(--c-gold)]/10 p-6 p-12 text-center shadow-2xl ring-1 ring-[var(--c-purple)]/40 backdrop-blur-lg"
                >
                    <div class="pointer-events-none absolute -top-16 -left-16 h-40 w-40 rounded-full bg-[var(--c-purple)]/20 blur-3xl"></div>
                    <div class="pointer-events-none absolute -right-16 -bottom-16 h-40 w-40 rounded-full bg-[var(--c-gold)]/15 blur-3xl"></div>
                    <div class="relative z-10 mb-8 flex h-20 w-20 items-center justify-center rounded-full bg-red-500/80 shadow-lg">
                        <svg class="h-10 w-10 text-white" fill="currentColor" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"
                            ></path>
                        </svg>
                    </div>
                    <h1 class="text-4xl font-black text-white md:text-5xl">Paiement Échoué</h1>
                    <p class="mx-auto mt-4 max-w-md text-lg text-white/80">
                        Une erreur est survenue lors du traitement de votre paiement, ou vous avez annulé la transaction.
                    </p>
                    <div class="mt-10 w-full border-t border-[var(--linen)]"></div>
                    <p class="mt-10 text-lg font-medium text-white/90">Veuillez réessayer ou contactez le support si le problème persiste.</p>
                    <button
                        @click="tryAgain"
                        class="group relative mt-8 flex h-12 max-w-[480px] min-w-[200px] cursor-pointer items-center justify-center overflow-hidden rounded-full border border-white/30 bg-transparent px-8 text-base font-bold tracking-wide text-white transition-all hover:bg-white/10"
                    >
                        <span class="relative z-10">Réessayer</span>
                    </button>
                </div>
            </div>
        </main>
    </LandingLayout>
</template>

<script setup lang="ts">
import LandingLayout from '@/layouts/app/LandingLayout.vue';
import { router } from '@inertiajs/vue3';

const tryAgain = () => {
    // Redirect back to the card selection page
    router.visit('/tirage');
};
</script>
