<x-conference-layout :conference="$conference">
<x-slot name="title">Research Library – {{ $conference['title'] ?? 'Conference' }}</x-slot>

{{-- ── HERO ── --}}
<x-conference-inner-hero
    pageTitle="Research Library"
    label="Knowledge Hub"
    subtitle="Access past proceedings, journal publications, and research resources in our digital library."
/>

{{-- ── MAIN CONTENT ── --}}
    <section class="py-20 bg-gray-50">
        <div class="max-w-7xl mx-auto px-6 lg:px-8">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-16">
                
                <!-- Left Content -->
                <div class="lg:col-span-2">
                    
                    {{-- About Section --}}
                    <div class="mb-12">
                        <span class="text-sm font-bold text-orange-500 tracking-widest uppercase mb-2 block">Global Publisher</span>
                        <h2 class="text-3xl font-bold font-serif text-gray-900 mb-6 tracking-tight">Research Library</h2>
                        <div class="space-y-6 text-gray-600 leading-relaxed text-lg mb-8">
                            <p>
                                <strong class="text-gray-900 font-medium">GARI Conference Research Library</strong> is a global publisher linking research and practice to the benefit of society as well as providing an extensive range of online products and additional customer resources and services. Our beliefs has always been to help our communities create a meaningful impact that boosts knowledge, business practice, supports for teaching, progresses of society and the environment.
                            </p>
                            <p>
                                All submitted articles undergo a fast but rigorous peer-review procedure, with prompt publication. Authors publishing with Academic Research Journals retain the copyright to their work. Authors have the opportunity to publish short communications, full-length research, reviews.
                            </p>
                            <p>
                                We provide worldwide research publications. Our dedicated technical and editorial team members ensure the qualities of the published research articles are high. We have very reputable and dedicated editorial board members from different academic fields which ensure the quality and review standards according to the international research publishing standards and quick publication of research articles.
                            </p>
                        </div>
                    </div>

                    {{-- Benefits Section --}}
                    <div class="mb-12">
                        <span class="text-sm font-bold text-orange-500 tracking-widest uppercase mb-2 block">Not Yet Registered?</span>
                        <h2 class="text-3xl font-bold font-serif text-gray-900 mb-8 tracking-tight">Registration Benefits</h2>
                        
                        <div class="bg-white rounded-3xl overflow-hidden shadow-sm border border-gray-100 p-8 md:p-10">
                            <ul class="space-y-6">
                                @php $benefits = [
                                    'A Unique User Profile that will allow you to manage your current subscriptions.',
                                    'Subscriptions for new research article.',
                                    'All articles are made freely and permanently accessible online immediately after publication.',
                                    'All interested readers can read, download and/or print open access articles at ZERO cost.',
                                    'Receive instant email alerts when new publications matching your research field are released.',
                                    'Authors retain full copyright to their published work.',
                                ]; @endphp
                                @foreach($benefits as $benefit)
                                <li class="flex items-start gap-4">
                                    <div class="w-8 h-8 rounded-full bg-orange-50 flex items-center justify-center shrink-0 mt-0.5">
                                        <i class="fas fa-check text-orange-500 text-sm"></i>
                                    </div>
                                    <p class="text-gray-700 text-base leading-relaxed pt-1">{{ $benefit }}</p>
                                </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>

                    {{-- Submission Types --}}
                    <div>
                        <span class="text-sm font-bold text-orange-500 tracking-widest uppercase mb-2 block">Accepted Papers</span>
                        <h2 class="text-2xl font-bold font-serif text-gray-900 mb-6 tracking-tight">Submission Types</h2>
                        
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                            @php $types = [
                                'Full-Length Research Papers',
                                'Short Communications',
                                'Literature Reviews',
                                'Case Studies',
                                'Work-in-Progress Papers',
                                'Abstract Submissions',
                            ]; @endphp
                            @foreach($types as $type)
                            <div class="bg-white rounded-xl p-4 border border-gray-100 flex items-center gap-4">
                                <i class="fas fa-file-alt text-gray-300"></i>
                                <span class="text-sm font-semibold text-gray-700">{{ $type }}</span>
                            </div>
                            @endforeach
                        </div>
                    </div>

                </div>

                <!-- Right Sidebar (Form) -->
                <div class="lg:col-span-1">
                    <div class="sticky top-[130px] space-y-8">
                        <div class="bg-white rounded-3xl p-8 shadow-sm border border-gray-100">
                            
                            <h4 class="text-lg font-bold font-serif text-gray-900 mb-2">Apply / Register</h4>
                            <p class="text-gray-500 text-sm mb-6">Join a global network of researchers.</p>

                            <form action="#" method="POST" class="space-y-4">
                                @csrf

                                <div>
                                    <select required class="w-full bg-gray-50 border border-gray-200 rounded-lg px-4 py-3 text-sm text-gray-700 focus:outline-none focus:border-orange-500 focus:ring-1 focus:ring-orange-500 transition-colors">
                                        <option value="">— Select Designation * —</option>
                                        <option>Prof.</option>
                                        <option>Dr.</option>
                                        <option>Assoc. Prof.</option>
                                        <option>Mr.</option>
                                        <option>Ms.</option>
                                        <option>Mrs.</option>
                                    </select>
                                </div>

                                <div>
                                    <input type="text" required placeholder="Full Name *"
                                        class="w-full bg-gray-50 border border-gray-200 rounded-lg px-4 py-3 text-sm text-gray-700 placeholder-gray-400 focus:outline-none focus:border-orange-500 focus:ring-1 focus:ring-orange-500 transition-colors">
                                </div>

                                <div>
                                    <input type="text" required placeholder="Research Area *"
                                        class="w-full bg-gray-50 border border-gray-200 rounded-lg px-4 py-3 text-sm text-gray-700 placeholder-gray-400 focus:outline-none focus:border-orange-500 focus:ring-1 focus:ring-orange-500 transition-colors">
                                </div>

                                <div>
                                    <input type="url" required placeholder="LinkedIn Profile URL *"
                                        class="w-full bg-gray-50 border border-gray-200 rounded-lg px-4 py-3 text-sm text-gray-700 placeholder-gray-400 focus:outline-none focus:border-orange-500 focus:ring-1 focus:ring-orange-500 transition-colors">
                                </div>

                                <div>
                                    <input type="tel" required placeholder="Contact Number *"
                                        class="w-full bg-gray-50 border border-gray-200 rounded-lg px-4 py-3 text-sm text-gray-700 placeholder-gray-400 focus:outline-none focus:border-orange-500 focus:ring-1 focus:ring-orange-500 transition-colors">
                                </div>

                                <div>
                                    <label class="flex items-center gap-3 bg-gray-50 border border-dashed border-gray-300 rounded-lg p-3 cursor-pointer hover:bg-orange-50 hover:border-orange-300 transition-all group">
                                        <span class="w-8 h-8 rounded bg-white shadow-sm flex items-center justify-center shrink-0 border border-gray-100">
                                            <i class="fas fa-upload text-gray-400 group-hover:text-orange-500 transition-colors text-xs"></i>
                                        </span>
                                        <div class="overflow-hidden">
                                            <p class="text-xs font-bold text-gray-700 group-hover:text-orange-600 truncate transition-colors">Upload Document *</p>
                                        </div>
                                        <input type="file" class="hidden" accept=".pdf,.doc,.docx">
                                    </label>
                                </div>

                                <button type="submit"
                                    class="w-full mt-2 bg-orange-500 hover:bg-orange-600 text-white font-bold text-sm py-3 rounded-lg transition-colors shadow-sm">
                                    Submit Application
                                </button>
                            </form>

                            <div class="mt-8 pt-6 border-t border-gray-100">
                                <h4 class="text-xs font-bold tracking-widest text-gray-900 uppercase mb-3 flex items-center gap-2">
                                    <i class="fas fa-headset text-orange-500"></i> Help Desk
                                </h4>
                                <div class="space-y-2">
                                    <a href="mailto:helpdesk@gariteam.com" class="block text-sm text-gray-600 hover:text-orange-500 transition-colors">helpdesk@gariteam.com</a>
                                    <a href="tel:+94773940838" class="block text-sm text-gray-600 hover:text-orange-500 transition-colors">(+94) 77 394 0838</a>
                                </div>
                            </div>
                            
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>

</x-conference-layout>
