<script setup>
import { Head, Link } from '@inertiajs/vue3';
</script>

<template>
    <Head title="Merci !" />

    <div class="min-h-screen bg-slate-900 text-slate-100 flex flex-col items-center justify-center p-8 selection:bg-indigo-500/30">
        <div class="max-w-xl text-center">
            <div class="w-24 h-24 bg-emerald-500/10 border border-emerald-500/20 text-emerald-500 rounded-full flex items-center justify-center mx-auto mb-8 shadow-[0_0_50px_rgba(16,185,129,0.2)] scale-110">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                </svg>
            </div>

            <h1 class="text-4xl font-black mb-4 tracking-tight">Merci pour votre participation !</h1>
            <p class="text-slate-400 text-lg mb-12">
                Votre test technique a été validé avec succès. Notre équipe va maintenant analyser vos résultats et reviendra vers vous dès que possible.
            </p>

            <Link 
                :href="route('dashboard')"
                class="inline-block bg-white text-slate-900 px-10 py-4 rounded-2xl font-black uppercase tracking-[0.2em] text-sm hover:bg-emerald-500 hover:text-white transition-all duration-500 shadow-xl shadow-white/5 active:scale-95"
            >
                Retour à l'accueil
            </Link>
        </div>

        <footer class="mt-20 text-[10px] text-slate-600 uppercase tracking-[0.4em] font-bold">
            RecruitQuizz Pro • Système de recrutement automatisé
        </footer>
    </div>
</template>
