@extends('layouts.app')

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">

<style>
    body {
        font-family: 'DM Sans', sans-serif;
        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
        min-height: 100vh;
    }

    .success-card {
        background: white;
        border-radius: 24px;
        box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 10px 40px -10px rgb(0 0 0 / 0.1);
        overflow: hidden;
        position: relative;
    }

    .success-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #10b981, #059669);
    }

    .icon-container {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
        border: 3px solid #6ee7b7;
        animation: scaleIn 0.5s ease-out;
    }

    @keyframes scaleIn {
        0% {
            transform: scale(0);
            opacity: 0;
        }
        50% {
            transform: scale(1.1);
        }
        100% {
            transform: scale(1);
            opacity: 1;
        }
    }

    @keyframes checkmark {
        0% {
            stroke-dashoffset: 24;
        }
        100% {
            stroke-dashoffset: 0;
        }
    }

    .checkmark-icon {
        stroke-dasharray: 24;
        stroke-dashoffset: 24;
        animation: checkmark 0.4s ease-out 0.3s forwards;
    }

    .info-box {
        background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
        border: 1px solid #86efac;
        border-radius: 12px;
        padding: 16px 20px;
    }

    .header-bar {
        background: white;
        border-bottom: 1px solid #e5e7eb;
        padding: 20px 0;
    }

    .fade-in {
        animation: fadeIn 0.6s ease-out 0.2s both;
    }

    .fade-in-delay {
        animation: fadeIn 0.6s ease-out 0.4s both;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
</style>

@section('content')
    <div class="header-bar">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between">
                <img class="h-12" src="/assets/loghi/iul.jpg" alt="IUL">
                <div class="text-right">
                    <h3 class="text-lg font-semibold text-[#C7160E]">Selezione Docenti TFA</h3>
                    <p class="text-sm text-gray-500">Cancellazione confermata</p>
                </div>
            </div>
        </div>
    </div>

    <div class="py-16">
        <div class="max-w-xl mx-auto px-4">
            <div class="success-card">
                <div class="p-10">
                    <div class="text-center">
                        <div class="icon-container">
                            <svg class="w-10 h-10 text-emerald-600 checkmark-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
                            </svg>
                        </div>

                        <h2 class="mt-6 text-2xl font-bold text-gray-900 fade-in">
                            Cancellazione effettuata
                        </h2>

                        <div class="fade-in-delay">
                            <p class="mt-4 text-gray-600 leading-relaxed">
                                Gentile <strong class="text-gray-900">{{ $invite->anagrafica->nome ?? '' }} {{ $invite->anagrafica->cognome ?? '' }}</strong>,
                            </p>

                            <p class="mt-3 text-gray-600 leading-relaxed">
                                La tua richiesta di cancellazione dalla selezione
                            </p>

                            <p class="mt-1 text-lg font-semibold text-gray-900">
                                "{{ $invite->docentSelection->nome ?? 'Selezione Docenti' }}"
                            </p>

                            <p class="mt-3 text-gray-600">
                                è stata registrata correttamente.
                            </p>

                            <div class="info-box mt-6">
                                <div class="flex gap-3 items-start">
                                    <svg class="w-5 h-5 text-emerald-600 flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                                    </svg>
                                    <p class="text-sm text-emerald-800">
                                        Non riceverai ulteriori comunicazioni relative a questa selezione.
                                    </p>
                                </div>
                            </div>

                            <div class="mt-8 pt-6 border-t border-gray-100">
                                <p class="text-sm text-gray-500">
                                    Hai cambiato idea o hai bisogno di assistenza?
                                </p>
                                <p class="mt-2">
                                    <a href="mailto:reclutamentotfa@iuline.it" class="inline-flex items-center gap-2 text-[#C7160E] hover:underline font-medium">
                                        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                                        </svg>
                                        reclutamentotfa@iuline.it
                                    </a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection