<x-conference-layout>
    <x-slot name="title">{{ $conference['title'] }} - Contact Us</x-slot>

    <!-- Page Header (Smaller Hero style modeled after home page) -->
    <section class="relative pt-48 pb-32 flex items-center justify-center text-white overflow-hidden bg-black">
        <!-- Background Image with Overlay -->
        <div class="absolute inset-0 z-0">
            <img src="{{ $conference['image'] }}" alt="Conference Venue" class="w-full h-full object-cover opacity-60">
            <!-- Complex Gradient Overlay for "Premium" feel -->
            <div class="absolute inset-0 bg-gradient-to-b from-black/80 via-transparent to-black"></div>
            <div class="absolute inset-0 bg-gradient-to-r from-black/50 via-transparent to-black/50"></div>
        </div>

        <div class="relative z-10 max-w-7xl mx-auto px-4 text-center">
            @if(isset($conference['prefix']))
                <span
                    class="block text-brand-200 text-lg md:text-xl font-bold tracking-widest uppercase mb-4">{{ $conference['prefix'] }}</span>
            @endif

            <h1 class="flex flex-col items-center justify-center leading-none tracking-tighter mb-6 select-none">
                <span
                    class="text-4xl md:text-5xl lg:text-6xl font-bold text-transparent bg-clip-text bg-gradient-to-b from-white to-gray-400 opacity-90 filter drop-shadow-2xl text-center">
                    CONTACT US
                </span>
            </h1>

            <p class="text-lg md:text-xl text-gray-300 font-light tracking-wide max-w-4xl mx-auto">
                {{ strtoupper($conference['title']) }}
            </p>
        </div>
    </section>

    <!-- Content Area -->
    <section class="py-24 bg-gray-50 border-b border-gray-200 relative">
        <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 Column: Main Form Area -->
                <div class="lg:col-span-2">
                    <span
                        class="text-orange-600 font-bold tracking-widest uppercase text-xs mb-2 block">Get In Touch</span>
                    <h2 class="text-4xl font-bold text-gray-900 font-serif mb-6">We would love to hear from you!</h2>

                    <div class="prose prose-lg text-gray-600 mb-10 leading-relaxed max-w-none">
                        <p>We appreciate that sometimes you can't always find what you are looking for. Or it may be that no matter how good a web site is, it still doesn't answer a specific question or clarify a particular issue. Whatever it is you need to talk to us about, please fill out this form and we will get in touch with you within 48 hours (excluding weekends and bank holidays).</p>
                    </div>

                    <!-- Contact Form Card -->
                    <div class="bg-white rounded-2xl p-8 md:p-10 border border-gray-100 shadow-xl relative overflow-hidden">
                        <!-- Decorative Top Right Graphic -->
                        <div class="absolute top-0 right-0 w-32 h-32 bg-orange-50 rounded-bl-full -z-10"></div>
                        
                        <form action="#" method="POST" class="space-y-6 relative z-10">
                            @csrf
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div>
                                    <label for="name" class="block text-sm font-bold text-gray-700 mb-2 uppercase tracking-wide">Your Name</label>
                                    <input type="text" id="name" name="name" class="w-full px-5 py-4 rounded-xl border-gray-200 bg-gray-50 focus:bg-white focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition-all duration-300" placeholder="John Doe" required>
                                </div>
                                <div>
                                    <label for="email" class="block text-sm font-bold text-gray-700 mb-2 uppercase tracking-wide">Email Address</label>
                                    <input type="email" id="email" name="email" class="w-full px-5 py-4 rounded-xl border-gray-200 bg-gray-50 focus:bg-white focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition-all duration-300" placeholder="john@example.com" required>
                                </div>
                            </div>
                            
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div>
                                    <label for="phone" class="block text-sm font-bold text-gray-700 mb-2 uppercase tracking-wide">Phone Number</label>
                                    <input type="tel" id="phone" name="phone" class="w-full px-5 py-4 rounded-xl border-gray-200 bg-gray-50 focus:bg-white focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition-all duration-300" placeholder="+1 (555) 000-0000">
                                </div>
                                <div>
                                    <label for="subject" class="block text-sm font-bold text-gray-700 mb-2 uppercase tracking-wide">Subject</label>
                                    <input type="text" id="subject" name="subject" class="w-full px-5 py-4 rounded-xl border-gray-200 bg-gray-50 focus:bg-white focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition-all duration-300" placeholder="How can we help?" required>
                                </div>
                            </div>
                            
                            <div>
                                <label for="message" class="block text-sm font-bold text-gray-700 mb-2 uppercase tracking-wide">Message</label>
                                <textarea id="message" name="message" rows="5" class="w-full px-5 py-4 rounded-xl border-gray-200 bg-gray-50 focus:bg-white focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition-all duration-300 resize-none" placeholder="Write your message here..." required></textarea>
                            </div>
                            
                            <button type="submit" class="w-full md:w-auto px-10 py-4 bg-orange-600 hover:bg-orange-700 text-white font-bold rounded-xl transition-all shadow-lg hover:shadow-orange-500/30 active:scale-95 flex items-center justify-center gap-3">
                                Send Message <i class="fas fa-paper-plane"></i>
                            </button>
                        </form>
                    </div>
                </div>

                <!-- Right Column: Sidebar -->
                <div class="lg:col-span-1 space-y-8 tracking-tight">

                    <!-- Contact Details Sidebar Widget (Dark Theme) -->
                    <div class="bg-gray-900 text-white rounded-2xl p-8 shadow-2xl relative overflow-hidden group">
                        <div
                            class="absolute top-0 right-0 w-32 h-32 bg-orange-500/20 rounded-full blur-3xl -mr-10 -mt-10 group-hover:bg-orange-500/30 transition-all duration-700">
                        </div>
                        <div class="absolute -bottom-20 -left-20 w-64 h-64 bg-blue-500/10 rounded-full blur-[80px]"></div>

                        <h3 class="text-2xl font-bold font-serif mb-8 border-b border-gray-700 pb-4 relative z-10">Contact Details
                        </h3>

                        <div class="space-y-8 relative z-10">
                            <div class="flex items-start gap-5">
                                <div class="w-12 h-12 rounded-full bg-white/5 flex items-center justify-center flex-shrink-0 text-orange-500 border border-white/10 group-hover:scale-110 transition-transform duration-300">
                                    <i class="fas fa-envelope text-lg"></i>
                                </div>
                                <div>
                                    <p class="text-xs text-gray-400 font-bold uppercase tracking-wider mb-1">Email</p>
                                    <a href="mailto:helpdesk@gariteam.com" class="text-white hover:text-orange-400 transition-colors font-medium">helpdesk@gariteam.com</a>
                                </div>
                            </div>
                            
                            <div class="flex items-start gap-5">
                                <div class="w-12 h-12 rounded-full bg-white/5 flex items-center justify-center flex-shrink-0 text-orange-500 border border-white/10 group-hover:scale-110 transition-transform duration-300">
                                    <i class="fas fa-phone-alt text-lg"></i>
                                </div>
                                <div>
                                    <p class="text-xs text-gray-400 font-bold uppercase tracking-wider mb-1">Phone</p>
                                    <div class="space-y-1">
                                        <a href="tel:(+94)812849268" class="block text-white hover:text-orange-400 transition-colors font-medium">(+94) 812 849 268</a>
                                        <a href="tel:(+94)773940838" class="block text-white hover:text-orange-400 transition-colors font-medium">(+94) 77 394 0838</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Side Menu: Help Desk -->
                    <div class="bg-white rounded-2xl p-6 border border-gray-100 shadow-sm relative overflow-hidden transition-shadow hover:shadow-md">
                        <div class="absolute top-0 left-0 w-1 h-full bg-orange-400"></div>
                        <h3
                            class="font-bold text-gray-900 uppercase tracking-wider text-sm mb-4 pb-2 border-b border-gray-100 flex items-center gap-2">
                            <i class="fas fa-headset text-orange-500"></i> Help Desk</h3>
                        <div class="space-y-1">
                            <a href="#" class="flex items-center gap-3 px-3 py-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded-lg transition-colors group">
                                <i class="fas fa-angle-right text-gray-400 group-hover:text-orange-500"></i> FAQ
                            </a>
                            <a href="https://www.garitour.com/" target="_blank"
                                class="flex items-center gap-3 px-3 py-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded-lg transition-colors group">
                                <i class="fas fa-angle-right text-gray-400 group-hover:text-orange-500"></i> Visit Sri Lanka
                            </a>
                            <a href="#"
                                class="flex items-center gap-3 px-3 py-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded-lg transition-colors group">
                                <i class="fas fa-angle-right text-gray-400 group-hover:text-orange-500"></i> Testimonials
                            </a>
                            <a href="#"
                                class="flex items-center gap-3 px-3 py-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded-lg transition-colors group">
                                <i class="fas fa-angle-right text-gray-400 group-hover:text-orange-500"></i> GARI Publications
                            </a>
                        </div>
                    </div>

                    <!-- Side Menu: Guidelines -->
                    <div class="bg-white rounded-2xl p-6 border border-gray-100 shadow-sm transition-shadow hover:shadow-md mt-8">
                        <h3
                            class="font-bold text-gray-900 uppercase tracking-wider text-sm mb-4 pb-2 border-b border-gray-100 flex items-center gap-2">
                            <i class="fas fa-book-open text-orange-500"></i> Guidelines</h3>
                        <div class="space-y-1">
                            <a href="#"
                                class="flex items-center gap-3 px-3 py-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded-lg transition-colors group">
                                <i class="fas fa-angle-right text-gray-400 group-hover:text-orange-500"></i> Abstract Guideline
                            </a>
                            <a href="#"
                                class="flex items-center gap-3 px-3 py-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded-lg transition-colors group">
                                <i class="fas fa-angle-right text-gray-400 group-hover:text-orange-500"></i> Full Paper Guideline
                            </a>
                            <a href="#"
                                class="flex items-center gap-3 px-3 py-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded-lg transition-colors group">
                                <i class="fas fa-angle-right text-gray-400 group-hover:text-orange-500"></i> Presentation Guideline
                            </a>
                        </div>
                    </div>

                </div> <!-- Closes Right Column: lg:col-span-1 -->
            </div> <!-- Closes Grid: grid-cols-1 lg:grid-cols-3 -->
        </div> <!-- Closes Container: max-w-7xl -->
    </section>

</x-conference-layout>
