<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">
                    <i class="fas fa-shield-alt text-white text-3xl"></i>
                </div>
                <div>
                    <h1 class="text-3xl md:text-4xl font-serif font-bold text-white">Certificate Verification</h1>
                    <p class="text-amber-100 mt-2">Verify the authenticity of any mentorship certificate.</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>
                <span class="text-gray-900 font-medium">Verify Certificate</span>
            </nav>
        </div>
    </div>

    <div class="py-12">
        <div class="max-w-5xl mx-auto sm:px-6 lg:px-8">
            {{-- Header --}}
            <div class="text-center mb-8">
                <div class="w-20 h-20 mx-auto bg-gradient-to-br from-amber-400 to-amber-600 rounded-full flex items-center justify-center mb-6">
                    <i class="fas fa-shield-alt text-white text-3xl"></i>
                </div>
                <h1 class="text-3xl font-bold text-gray-800 dark:text-gray-200">Certificate Verification</h1>
                <p class="text-gray-600 dark:text-gray-400 mt-3 max-w-lg mx-auto">
                    Enter the verification code from your certificate to verify its authenticity. You can find this code on the certificate document.
                </p>
            </div>

            {{-- Verification Form --}}
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-8">
                <form method="GET" action="#" id="verifyForm">
                    <div class="mb-6">
                        <label for="code" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            Verification Code
                        </label>
                        <input type="text" name="code" id="code" required
                            class="w-full px-4 py-3 text-center font-mono text-lg rounded-lg border-2 border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white focus:border-amber-500 focus:ring-amber-500"
                            placeholder="Enter verification code (e.g., CERT-XXXX-XXXX)"
                            style="text-transform: uppercase;">
                        <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
                            The verification code can be found at the bottom of your certificate.
                        </p>
                    </div>

                    <button type="submit" class="w-full py-3 px-6 bg-gradient-to-r from-amber-500 to-amber-600 text-white font-semibold rounded-lg hover:from-amber-600 hover:to-amber-700 transition focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2">
                        <i class="fas fa-search mr-2"></i>Verify Certificate
                    </button>
                </form>
            </div>

            {{-- Information Box --}}
            <div class="mt-8 bg-amber-50 dark:bg-amber-900/30 border border-amber-200 dark:border-amber-800 rounded-lg p-6">
                <h3 class="text-lg font-semibold text-amber-800 dark:text-amber-300 mb-3">
                    <i class="fas fa-info-circle mr-2"></i>About Certificate Verification
                </h3>
                <ul class="space-y-2 text-amber-700 dark:text-amber-400">
                    <li class="flex items-start">
                        <i class="fas fa-check text-amber-500 mt-1 mr-2"></i>
                        <span>All certificates issued by our platform are uniquely identifiable</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fas fa-check text-amber-500 mt-1 mr-2"></i>
                        <span>Verification confirms the authenticity and validity of the certificate</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fas fa-check text-amber-500 mt-1 mr-2"></i>
                        <span>Revoked or expired certificates will show as invalid</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fas fa-check text-amber-500 mt-1 mr-2"></i>
                        <span>For employers: Use this tool to verify candidate credentials</span>
                    </li>
                </ul>
            </div>

            {{-- Recent Verifications --}}
            <div class="mt-8 text-center">
                <p class="text-sm text-gray-500 dark:text-gray-400">
                    Need help? <a href="#" class="text-amber-600 hover:text-amber-700 dark:text-amber-400 dark:hover:text-amber-300">Contact Support</a>
                </p>
            </div>
        </div>
    </div>

    @push('scripts')
    <script>
        document.getElementById('verifyForm').addEventListener('submit', function(e) {
            const codeInput = document.getElementById('code');
            const code = codeInput.value.trim().toUpperCase();
            
            if (!code) {
                e.preventDefault();
                alert('Please enter a verification code.');
                return;
            }
            
            // Update the form action with the code
            this.action = '{{ route('mentorship.certificates.verify', ['code' => 'CODE_PLACEHOLDER']) }}'.replace('CODE_PLACEHOLDER', code);
        });

        // Auto-format the code input
        document.getElementById('code').addEventListener('input', function(e) {
            this.value = this.value.toUpperCase().replace(/[^A-Z0-9-]/g, '');
        });
    </script>
    @endpush
</x-site-layout>
