@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;
    }

    .expired-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;
    }

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

    .icon-container {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
        border: 3px solid #f87171;
    }

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

    .header-bar {
        background: white;
        border-bottom: 1px solid #e5e7eb;
        padding: 20px 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">Candidatura scaduta</p>
                </div>
            </div>
        </div>
    </div>

    <div class="py-16">
        <div class="max-w-xl mx-auto px-4">
            <div class="expired-card">
                <div class="p-10">
                    <div class="text-center">
                        <div class="icon-container">
                            <svg class="w-10 h-10 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                        </div>

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

                        <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">
                            Il termine per completare la candidatura alla 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">
                            è scaduto il <strong class="text-red-600">{{ $invite->docentSelection->expires_at->format('d/m/Y') }}</strong>
                            alle ore <strong class="text-red-600">{{ $invite->docentSelection->expires_at->format('H:i') }}</strong>.
                        </p>

                        <div class="info-box mt-6">
                            <div class="flex gap-3 items-start">
                                <svg class="w-5 h-5 text-red-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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                                </svg>
                                <p class="text-sm text-red-800">
                                    Non è più possibile completare la candidatura per questa selezione.
                                </p>
                            </div>
                        </div>

                        <div class="mt-8 pt-6 border-t border-gray-100">
                            <p class="text-sm text-gray-500">
                                Per informazioni o chiarimenti contatta
                            </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>
@endsection