<x-site-layout>
    {{-- Hero Section --}}
    <div class="bg-gradient-to-r from-amber-500 to-amber-600 shadow-lg">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
            <div class="flex items-center gap-6">
                <div class="hidden md:flex w-20 h-20 rounded-xl shadow-lg bg-white/20 items-center justify-center flex-shrink-0">
                    @if($found)
                        <i class="fas fa-check-circle text-white text-3xl"></i>
                    @else
                        <i class="fas fa-times-circle text-white text-3xl"></i>
                    @endif
                </div>
                <div>
                    <h1 class="text-3xl md:text-4xl font-serif font-bold text-white">
                        @if($found) Certificate Verified @else Certificate Not Found @endif
                    </h1>
                    <p class="text-amber-100 mt-2">
                        @if($found) This certificate has been verified as authentic. @else The verification code could not be matched. @endif
                    </p>
                </div>
            </div>
        </div>
    </div>

    {{-- Breadcrumb --}}
    <div class="bg-gray-50 border-b border-gray-200">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3">
            <nav class="flex items-center space-x-2 text-sm text-gray-600" aria-label="Breadcrumb">
                <a href="{{ url('/') }}" class="hover:text-amber-600 transition flex items-center">
                    <i class="fas fa-home mr-1"></i>Home
                </a>
                <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
                <a href="{{ route('mentorship.public.index') }}" class="hover:text-amber-600 transition">Mentorship</a>
                <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
                <a href="{{ route('mentorship.certificates.verify-page') }}" class="hover:text-amber-600 transition">Verify Certificate</a>
                <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
                <span class="text-gray-900 font-medium">Result</span>
            </nav>
        </div>
    </div>

    <div class="py-12">
        <div class="max-w-4xl mx-auto sm:px-6 lg:px-8">
            {{-- Verification Result --}}
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
                @if($found)
                    {{-- Success Result --}}
                    <div class="bg-gradient-to-r from-green-500 to-green-600 p-6 text-center">
                        <div class="w-20 h-20 mx-auto bg-white/20 rounded-full flex items-center justify-center mb-4">
                            <i class="fas fa-check-circle text-white text-4xl"></i>
                        </div>
                        <h1 class="text-2xl font-bold text-white">Valid Certificate</h1>
                        <p class="text-green-100 mt-2">This certificate has been verified as authentic</p>
                    </div>

                    <div class="p-8">
                        <div class="text-center mb-8">
                            <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-2">
                                {{ $certificate->recipient_name }}
                            </h2>
                            <p class="text-gray-500 dark:text-gray-400">
                                has successfully completed
                            </p>
                            <h3 class="text-lg font-semibold text-amber-600 mt-2">
                                {{ $certificate->programme_name }}
                            </h3>
                        </div>

                        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
                            <div class="text-center p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
                                <p class="text-sm text-gray-500 dark:text-gray-400">Certificate Number</p>
                                <p class="font-mono font-semibold text-gray-800 dark:text-gray-200">{{ $certificate->certificate_number }}</p>
                            </div>
                            <div class="text-center p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
                                <p class="text-sm text-gray-500 dark:text-gray-400">Issue Date</p>
                                <p class="font-semibold text-gray-800 dark:text-gray-200">{{ $certificate->issue_date?->format('M d, Y') }}</p>
                            </div>
                            <div class="text-center p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
                                <p class="text-sm text-gray-500 dark:text-gray-400">Completion Date</p>
                                <p class="font-semibold text-gray-800 dark:text-gray-200">{{ $certificate->completion_date?->format('M d, Y') }}</p>
                            </div>
                            <div class="text-center p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
                                <p class="text-sm text-gray-500 dark:text-gray-400">Status</p>
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
                                    {{ ucfirst($certificate->status) }}
                                </span>
                            </div>
                        </div>

                        <div class="text-center">
                            <p class="text-sm text-gray-500 dark:text-gray-400">
                                Issued by <strong>{{ $certificate->organization_name ?? config('app.name') }}</strong>
                            </p>
                        </div>
                    </div>
                @else
                    {{-- Not Found Result --}}
                    <div class="bg-gradient-to-r from-red-500 to-red-600 p-6 text-center">
                        <div class="w-20 h-20 mx-auto bg-white/20 rounded-full flex items-center justify-center mb-4">
                            <i class="fas fa-times-circle text-white text-4xl"></i>
                        </div>
                        <h1 class="text-2xl font-bold text-white">Certificate Not Found</h1>
                        <p class="text-red-100 mt-2">The verification code provided could not be matched to any certificate</p>
                    </div>

                    <div class="p-8 text-center">
                        <p class="text-gray-600 dark:text-gray-400 mb-6">
                            {{ $message ?? 'The certificate verification code you entered is invalid or the certificate may have been revoked. Please check the code and try again.' }}
                        </p>
                        <a href="{{ route('mentorship.certificates.verify-page') }}" class="inline-flex items-center px-6 py-3 bg-amber-500 text-white rounded-lg font-semibold hover:bg-amber-600 transition">
                            <i class="fas fa-search mr-2"></i>Try Again
                        </a>
                    </div>
                @endif
            </div>
        </div>
    </div>
</x-site-layout>
