<x-main-inner-page 
    category="Contact" title="Visa Apply" 
    subtitle="Explore information regarding Visa Apply and discover how GARI brings value to the global research community."
>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16">

    <!-- Left: Info / Steps -->
    <div>
        <span class="text-brand-600 text-xs font-bold uppercase tracking-widest mb-2 block">Application</span>
        <h2 class="text-3xl font-bold text-slate-900 mb-4 leading-snug">Apply &amp; Join the GARI Community</h2>
        <p class="text-slate-600 leading-relaxed mb-8">Please fill out the form carefully. Our committee reviews all applications within 3–5 business days. Ensure your document is in PDF/DOCX format before submitting.</p>

        <!-- Steps -->
        <div class="space-y-6 mb-10">
            @foreach([
                ['icon'=>'fa-file-alt','step'=>'01','title'=>'Prepare Documents','desc'=>'Have your CV, abstract, or relevant portfolio ready in PDF format.'],
                ['icon'=>'fa-edit','step'=>'02','title'=>'Complete the Form','desc'=>'Fill in your personal and institutional details accurately.'],
                ['icon'=>'fa-paper-plane','step'=>'03','title'=>'Submit & Await Review','desc'=>'We will contact you within 3–5 business days regarding your application.'],
            ] as $step)
            <div class="flex items-start gap-5">
                <div class="shrink-0 w-12 h-12 rounded-2xl bg-brand-100 flex items-center justify-center text-brand-600 shadow-sm">
                    <i class="fas {{ $step['icon'] }} text-lg"></i>
                </div>
                <div>
                    <span class="text-brand-400 font-bold text-xs uppercase tracking-widest">Step {{ $step['step'] }}</span>
                    <h5 class="font-bold text-slate-900 mb-1">{{ $step['title'] }}</h5>
                    <p class="text-sm text-slate-500 leading-relaxed">{{ $step['desc'] }}</p>
                </div>
            </div>
            @endforeach
        </div>

        <!-- Info Pills -->
        <div class="grid grid-cols-2 gap-3">
            @foreach(['Free Application','Expert Review','Fast Response','Certificate Issued'] as $pill)
            <div class="flex items-center gap-2 bg-white border border-slate-100 rounded-xl p-3 shadow-sm">
                <div class="w-7 h-7 rounded-full bg-brand-100 flex items-center justify-center shrink-0">
                    <i class="fas fa-check text-brand-600 text-xs"></i>
                </div>
                <span class="text-slate-700 text-sm font-medium">{{ $pill }}</span>
            </div>
            @endforeach
        </div>
    </div>

    <!-- Right: Form Card -->
    <div class="bg-white border border-slate-100 rounded-2xl shadow-xl relative overflow-hidden">
        <!-- Accent bar -->
        <div class="h-1.5 w-full bg-gradient-to-r from-brand-500 via-cyan-400 to-brand-700"></div>
        <div class="p-10 sm:p-12">
            <h3 class="text-xl font-bold text-slate-900 mb-6">Complete Application</h3>
            <form class="space-y-6">
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-xs font-bold text-slate-600 uppercase tracking-wide mb-1.5">First Name <span class="text-red-500">*</span></label>
                        <input type="text" placeholder="John" class="w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-800 placeholder-slate-400 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 focus:bg-white transition">
                    </div>
                    <div>
                        <label class="block text-xs font-bold text-slate-600 uppercase tracking-wide mb-1.5">Last Name <span class="text-red-500">*</span></label>
                        <input type="text" placeholder="Doe" class="w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-800 placeholder-slate-400 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 focus:bg-white transition">
                    </div>
                </div>
                <div>
                    <label class="block text-xs font-bold text-slate-600 uppercase tracking-wide mb-1.5">Email Address <span class="text-red-500">*</span></label>
                    <input type="email" placeholder="researcher@university.edu" class="w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-800 placeholder-slate-400 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 focus:bg-white transition">
                </div>
                <div>
                    <label class="block text-xs font-bold text-slate-600 uppercase tracking-wide mb-1.5">Institution / Affiliation <span class="text-red-500">*</span></label>
                    <input type="text" placeholder="University Name, Country" class="w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-800 placeholder-slate-400 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 focus:bg-white transition">
                </div>
                <div>
                    <label class="block text-xs font-bold text-slate-600 uppercase tracking-wide mb-1.5">Research Area <span class="text-red-500">*</span></label>
                    <select class="w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-800 focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 focus:bg-white transition">
                        <option value="">— Select your discipline —</option>
                        <option>Business Management & Economics</option>
                        <option>Health & Medicine</option>
                        <option>Engineering & Technology</option>
                        <option>Social Sciences</option>
                        <option>Education</option>
                        <option>Environmental Studies</option>
                        <option>Law & Political Science</option>
                        <option>Other</option>
                    </select>
                </div>
                <div>
                    <label class="block text-xs font-bold text-slate-600 uppercase tracking-wide mb-1.5">Upload CV / Document</label>
                    <label class="flex items-center gap-4 w-full border-2 border-dashed border-slate-200 rounded-xl px-4 py-4 cursor-pointer hover:border-brand-400 hover:bg-brand-50 transition-all group">
                        <div class="w-10 h-10 bg-slate-100 group-hover:bg-brand-100 rounded-xl flex items-center justify-center shrink-0 transition-colors">
                            <i class="fas fa-cloud-upload-alt text-slate-400 group-hover:text-brand-600 transition-colors"></i>
                        </div>
                        <div>
                            <p class="text-sm font-semibold text-slate-700 group-hover:text-brand-700 transition-colors">Click to upload file</p>
                            <p class="text-xs text-slate-400">PDF or DOCX • Max 5MB</p>
                        </div>
                        <input type="file" class="hidden" accept=".pdf,.doc,.docx">
                    </label>
                </div>
                <button type="submit" class="w-full bg-slate-900 text-white font-bold rounded-xl py-3.5 hover:bg-brand-600 transition-all duration-300 shadow-xl shadow-slate-900/20 flex items-center justify-center gap-2 text-sm">
                    <i class="fas fa-paper-plane"></i> Submit Application
                </button>
            </form>
        </div>
    </div>
</div>
</x-main-inner-page>