<x-site-layout title="Application Submitted">

    {{-- Hero --}}
    <section class="relative bg-gradient-to-r from-green-600 to-emerald-700 py-16">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <div class="w-20 h-20 bg-white bg-opacity-20 rounded-full flex items-center justify-center mx-auto mb-6">
                <i class="fas fa-check-circle text-white text-4xl"></i>
            </div>
            <h1 class="text-4xl font-bold text-white mb-3">Application Submitted!</h1>
            <p class="text-green-100 text-lg">Your {{ $role }} application has been received and is under review.</p>
        </div>
    </section>

    {{-- 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-green-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>
                <span class="text-gray-500">Register</span>
                <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
                <span class="text-gray-900 font-medium">Application Submitted</span>
            </nav>
        </div>
    </div>

    {{-- Content --}}
    <section class="py-16 bg-gray-50">
        <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">

            {{-- Reference Card --}}
            <div class="bg-white rounded-2xl shadow-md p-8 mb-6 text-center">
                @if($referenceNumber)
                    <p class="text-sm text-gray-500 mb-2">Your Reference Number</p>
                    <div class="inline-block bg-green-50 border border-green-200 rounded-xl px-8 py-4 mb-4">
                        <span class="text-2xl font-bold text-green-700 tracking-widest">{{ $referenceNumber }}</span>
                    </div>
                    <p class="text-sm text-gray-500">Please save this reference number for tracking your application.</p>
                @endif

                @if($email)
                    <div class="mt-4 pt-4 border-t border-gray-100">
                        <p class="text-sm text-gray-600">
                            A confirmation email has been sent to <strong class="text-gray-800">{{ $email }}</strong>
                        </p>
                    </div>
                @endif
            </div>

            {{-- What Happens Next --}}
            <div class="bg-white rounded-2xl shadow-md p-8 mb-6">
                <h2 class="text-lg font-semibold text-gray-900 mb-5 flex items-center">
                    <i class="fas fa-list-ol text-green-600 mr-2"></i>
                    What Happens Next
                </h2>
                <ol class="space-y-4">
                    <li class="flex items-start gap-4">
                        <span class="flex-shrink-0 w-8 h-8 bg-green-100 text-green-700 rounded-full flex items-center justify-center text-sm font-bold">1</span>
                        <div>
                            <p class="font-medium text-gray-800">Application Review</p>
                            <p class="text-sm text-gray-500">Our team will review your application within 3–5 business days.</p>
                        </div>
                    </li>
                    <li class="flex items-start gap-4">
                        <span class="flex-shrink-0 w-8 h-8 bg-green-100 text-green-700 rounded-full flex items-center justify-center text-sm font-bold">2</span>
                        <div>
                            <p class="font-medium text-gray-800">Email Notification</p>
                            <p class="text-sm text-gray-500">You will receive an email with the outcome of your application.</p>
                        </div>
                    </li>
                    <li class="flex items-start gap-4">
                        <span class="flex-shrink-0 w-8 h-8 bg-green-100 text-green-700 rounded-full flex items-center justify-center text-sm font-bold">3</span>
                        <div>
                            <p class="font-medium text-gray-800">Account Activation</p>
                            <p class="text-sm text-gray-500">Once approved, your account will be activated and you can log in.</p>
                        </div>
                    </li>
                </ol>
            </div>

            {{-- Actions --}}
            <div class="flex flex-col sm:flex-row gap-3">
                <a href="{{ route('home') }}"
                   class="flex-1 flex items-center justify-center gap-2 px-6 py-3 bg-green-600 text-white rounded-xl font-semibold hover:bg-green-700 transition">
                    <i class="fas fa-home"></i> Back to Home
                </a>
                <a href="{{ route('login') }}"
                   class="flex-1 flex items-center justify-center gap-2 px-6 py-3 border border-gray-300 text-gray-700 rounded-xl font-semibold hover:bg-gray-50 transition">
                    <i class="fas fa-sign-in-alt"></i> Already Approved? Login
                </a>
            </div>
        </div>
    </section>

</x-site-layout>
