@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=Inter:wght@100..900&display=swap" rel="stylesheet">

<style>
  body {
    font-family: 'Inter', sans-serif;
  }
</style>

@section('content')
    <div class="py-10">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between mb-8">
                <img class="max-w-[160px]" src="/assets/loghi/iul.jpg" alt="IUL">

                <div>
                    <h3 class="text-2xl font-bold text-[#C7160E]">
                        Selezione Docenti TFA
                    </h3>
                    <p class="text-sm text-gray-500">
                        Conferma anagrafica e disponibilità insegnamenti
                    </p>
                </div>
            </div>

            <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg p-6">
                <div class="max-w-2xl mx-auto text-center py-12">
                    <div class="bg-green-50 rounded-xl p-8">
                        <svg class="mx-auto h-16 w-16 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>

                        <h2 class="mt-6 text-2xl font-bold text-gray-900">
                            Selezione completata
                        </h2>

                        <p class="mt-4 text-gray-600">
                            Gentile <strong>{{ $invite->anagrafica->nome ?? '' }} {{ $invite->anagrafica->cognome ?? '' }}</strong>,
                        </p>

                        <p class="mt-2 text-gray-600">
                            Le tue disponibilità sono state registrate in data
                            <strong>{{ $invite->completed_at?->format('d/m/Y H:i') }}</strong>.
                        </p>

                        <p class="mt-6 text-gray-500">
                            Riceverai una comunicazione quando saranno definiti i nuovi contratti.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection