<x-conference-layout :conference="$conference">
    <x-slot name="title">{{ $conference['title'] ?? 'Venue and Travel Info' }}</x-slot>

    <!-- Hero Section -->
    <x-conference-inner-hero
    pageTitle="Venue & Travel Info"
    label="Venue & Travel"
    subtitle="Get directions, venue details, and travel information to help you plan your journey."
/>

    <!-- Main Content Grid -->
    <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">
                    <div class="mb-12">
                        <span class="text-sm font-bold text-orange-500 tracking-widest uppercase mb-2 block">Conference Location</span>
                        <h2 class="text-3xl font-bold font-serif text-gray-900 mb-6 tracking-tight">Meeting Venue</h2>
                        <p class="text-gray-600 leading-relaxed text-lg mb-8">
                            We have carefully selected a premium venue to host our attendees, ensuring the highest standards of comfort, accessibility, and technology. Review the venue details and our recommended travel routes to plan your journey.
                        </p>
                    </div>

                    @if(isset($conference['venue_info']))
                    <!-- Venue Details -->
                    <div class="bg-white rounded-3xl overflow-hidden shadow-sm border border-gray-100 hover:shadow-2xl transition-all duration-500 mb-12">
                        <!-- Image Container -->
                        <div class="w-full h-64 md:h-80 relative overflow-hidden bg-gray-50 flex items-center justify-center">
                            @if(isset($conference['venue_info']['image']))
                            <img src="{{ $conference['venue_info']['image'] }}" alt="{{ $conference['venue_info']['name'] }}" 
                                class="w-full h-full object-cover">
                            @endif
                        </div>
                        
                        <!-- Content Container -->
                        <div class="p-8 md:p-10">
                            <h3 class="text-3xl font-extrabold text-gray-900 mb-4">
                                {{ $conference['venue_info']['name'] }}
                            </h3>
                            
                            <div class="flex items-start gap-3 mb-6">
                                <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-map-marker-alt text-orange-500 text-sm"></i>
                                </div>
                                <div class="flex flex-col">
                                    <span class="text-[10px] font-bold text-gray-400 uppercase tracking-widest">Address</span>
                                    <span class="text-base text-gray-700 font-medium">{{ $conference['venue_info']['address'] }}</span>
                                </div>
                            </div>

                            <p class="text-gray-600 leading-relaxed mb-8">
                                {{ $conference['venue_info']['description'] }}
                            </p>

                            @if(isset($conference['venue_info']['map_url']))
                            <div class="w-full h-72 rounded-2xl overflow-hidden border border-gray-100">
                                <iframe src="{{ $conference['venue_info']['map_url'] }}" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
                            </div>
                            @endif
                        </div>
                    </div>

                    <!-- Travel Routes -->
                    @if(isset($conference['venue_info']['travel_routes']) && is_array($conference['venue_info']['travel_routes']))
                    <div class="mb-12">
                        <span class="text-sm font-bold text-orange-500 tracking-widest uppercase mb-2 block">Getting There</span>
                        <h2 class="text-3xl font-bold font-serif text-gray-900 mb-8 tracking-tight">Travel Routes</h2>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            @foreach((array)$conference['venue_info']['travel_routes'] as $route)
                            <div class="bg-white rounded-2xl p-8 border border-gray-100 hover:border-orange-200 hover:shadow-lg transition-all duration-300 group">
                                <div class="w-14 h-14 rounded-2xl bg-orange-50 text-orange-500 flex items-center justify-center text-xl mb-6 group-hover:scale-110 group-hover:bg-orange-500 group-hover:text-white transition-all duration-300">
                                    <i class="{{ $route['icon'] }}"></i>
                                </div>
                                <h3 class="text-xl font-bold text-gray-900 mb-3">{{ $route['type'] }}</h3>
                                <p class="text-gray-500 text-sm leading-relaxed mb-4">
                                    {{ $route['description'] }}
                                </p>
                                <div class="inline-flex items-center gap-2 bg-gray-50 px-3 py-1.5 rounded-lg border border-gray-100">
                                    <i class="far fa-clock text-gray-400 text-xs"></i>
                                    <span class="text-xs font-bold text-gray-600 uppercase tracking-wider">Est. Time: {{ $route['duration'] }}</span>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                    @endif

                    @else
                        <!-- Substantive fallback if no specific venue data exists -->
                        <div class="bg-white rounded-3xl p-12 text-center border-2 border-dashed border-gray-200">
                            <div class="w-20 h-20 bg-gray-50 rounded-full flex items-center justify-center mx-auto mb-6">
                                <i class="fas fa-map text-gray-300 text-3xl"></i>
                            </div>
                            <h3 class="text-xl font-bold text-gray-900 mb-3">Venue Information Pending</h3>
                            <p class="text-gray-500 text-base max-w-md mx-auto">We are currently finalizing the venue and travel arrangements for this conference. Please check back later for detailed maps and routes.</p>
                        </div>
                    @endif
                </div>

                <!-- Right Sidebar -->
                <div class="lg:col-span-1">
                    <div class="sticky top-[130px] space-y-8">
                        <div class="bg-white rounded-2xl p-8 shadow-sm border border-gray-100">
                            <h4 class="text-sm font-bold tracking-widest text-gray-900 uppercase mb-6 flex items-center gap-3">
                                <i class="fas fa-headset text-orange-500"></i> Help Desk
                            </h4>
                            <ul class="space-y-4">
                                <li>
                                    <a href="{{ route('conference.accommodations', ['slug' => $conference['slug'] ?? '']) }}" class="flex items-center justify-between text-gray-600 hover:text-orange-500 transition-colors group">
                                        <span class="text-sm font-medium">Accommodations</span>
                                        <i class="fas fa-chevron-right text-[10px] opacity-0 group-hover:opacity-100 transform -translate-x-2 group-hover:translate-x-0 transition-all duration-300"></i>
                                    </a>
                                </li>
                                <li>
                                    <a href="{{ route('conference.visa', ['slug' => $conference['slug'] ?? '']) }}" class="flex items-center justify-between text-gray-600 hover:text-orange-500 transition-colors group">
                                        <span class="text-sm font-medium">Visa Information</span>
                                        <i class="fas fa-chevron-right text-[10px] opacity-0 group-hover:opacity-100 transform -translate-x-2 group-hover:translate-x-0 transition-all duration-300"></i>
                                    </a>
                                </li>
                                <li>
                                    <a href="{{ route('conference.contact-us', ['slug' => $conference['slug'] ?? '']) }}" class="flex items-center justify-between text-gray-600 hover:text-orange-500 transition-colors group">
                                        <span class="text-sm font-medium">Contact Us</span>
                                        <i class="fas fa-chevron-right text-[10px] opacity-0 group-hover:opacity-100 transform -translate-x-2 group-hover:translate-x-0 transition-all duration-300"></i>
                                    </a>
                                </li>
                                <li>
                                    <a href="{{ route('conference.tour', ['slug' => $conference['slug'] ?? '']) }}" class="flex items-center justify-between text-gray-600 hover:text-orange-500 transition-colors group">
                                        <span class="text-sm font-medium">Conference Tour</span>
                                        <i class="fas fa-chevron-right text-[10px] opacity-0 group-hover:opacity-100 transform -translate-x-2 group-hover:translate-x-0 transition-all duration-300"></i>
                                    </a>
                                </li>
                                <li class="pt-4 border-t border-gray-100">
                                    <a href="#faq" class="flex items-center justify-between text-gray-600 hover:text-orange-500 transition-colors group">
                                        <span class="text-sm font-medium">FAQ</span>
                                        <i class="fas fa-chevron-right text-[10px] opacity-0 group-hover:opacity-100 transform -translate-x-2 group-hover:translate-x-0 transition-all duration-300"></i>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>
</x-conference-layout>
