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

    <!-- Hero Section -->
    <section class="relative pt-48 pb-32 lg:pt-56 lg:pb-40 overflow-hidden bg-black">
        <div class="absolute inset-0 w-full h-full">
            @if(isset($conference) && isset($conference['cover_image']))
                <img src="{{ $conference['cover_image'] }}" alt="Conference Cover"
                    class="w-full h-full object-cover">
            @else
                <!-- Fallback gradient -->
                <div class="w-full h-full bg-gradient-to-br from-gray-900 to-black"></div>
            @endif
            <!-- Advanced Premium Overlay -->
            <div class="absolute inset-0 bg-gradient-to-t from-black via-black/80 to-transparent"></div>
            <div class="absolute inset-0 bg-gradient-to-b from-black/60 via-transparent to-transparent"></div>
        </div>

        <div class="max-w-7xl mx-auto px-6 lg:px-8 relative z-10">
            <div class="max-w-3xl">
                <!-- Hosted By text -->
                <div class="inline-flex items-center gap-3 mb-6">
                    <span class="h-px w-8 bg-orange-500"></span>
                    <span class="text-orange-500 font-medium tracking-widest text-sm uppercase">Help Desk</span>
                </div>
                <!-- Main Title -->
                <h1 class="text-5xl lg:text-7xl font-bold text-white mb-6 tracking-tight leading-tight">
                    Accommodations
                </h1>
                <!-- Subtitle -->
                <p class="text-xl text-gray-300 font-light leading-relaxed max-w-2xl">
                    Discover recommended places to stay during the conference for your maximum convenience.
                </p>
            </div>
        </div>
    </section>

    <!-- 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 Accommodations</span>
                        <h2 class="text-3xl font-bold font-serif text-gray-900 mb-6 tracking-tight">Where to Stay</h2>
                        <p class="text-gray-600 leading-relaxed text-lg mb-8">
                            We established on 2010 as independent service provider then wider range of experience GARI became a powerful arm of scientific research conference organizer in the industry. Sri Lanka has more-than 2500 years long history of culture and Education, that exposure we share with world today.
                        </p>
                    </div>

                    <div class="space-y-8">
                        @if(isset($conference['accommodations']) && count($conference['accommodations']) > 0)
                            @foreach($conference['accommodations'] as $accommodation)
                                <!-- Dynamic Accommodation Card -->
                                <div class="bg-white rounded-3xl overflow-hidden shadow-sm border border-gray-100 hover:shadow-2xl hover:-translate-y-1 transition-all duration-500 flex flex-col md:flex-row group lg:min-h-[300px]">
                                    <!-- Image Container -->
                                    <div class="w-full md:w-[350px] relative overflow-hidden bg-gray-50 flex items-center justify-center p-4">
                                        <img src="{{ $accommodation['image'] }}" alt="{{ $accommodation['name'] }}" 
                                            class="w-full h-full object-cover rounded-2xl group-hover:scale-105 transition-transform duration-700 shadow-md">
                                        
                                        <!-- Overlay label for image if needed -->
                                        <div class="absolute top-6 left-6">
                                            <span class="px-3 py-1 bg-white/90 backdrop-blur-md rounded-full text-[10px] font-bold text-orange-600 uppercase tracking-widest shadow-sm">Recommended</span>
                                        </div>
                                    </div>
                                    
                                    <!-- Content Container -->
                                    <div class="p-8 md:p-10 flex flex-col justify-between flex-grow">
                                        <div>
                                            <div class="flex flex-wrap items-center justify-between gap-4 mb-4">
                                                <h3 class="text-2xl font-extrabold text-gray-900 group-hover:text-orange-500 transition-colors">
                                                    {{ $accommodation['name'] }}
                                                </h3>
                                            </div>
                                            
                                            <!-- Details Section -->
                                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-y-4 gap-x-8 mb-6">
                                                <div class="flex items-start gap-3">
                                                    <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-sm text-gray-600 leading-relaxed">{{ $accommodation['address'] }}</span>
                                                    </div>
                                                </div>
                                                
                                                <div class="flex items-start gap-3">
                                                    <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-phone text-orange-500 text-sm"></i>
                                                    </div>
                                                    <div class="flex flex-col">
                                                        <span class="text-[10px] font-bold text-gray-400 uppercase tracking-widest">Contact</span>
                                                        <a href="tel:{{ $accommodation['phone'] }}" class="text-sm text-gray-600 hover:text-orange-500 transition-colors">{{ $accommodation['phone'] }}</a>
                                                    </div>
                                                </div>

                                                <div class="flex items-start gap-3">
                                                    <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-envelope text-orange-500 text-sm"></i>
                                                    </div>
                                                    <div class="flex flex-col">
                                                        <span class="text-[10px] font-bold text-gray-400 uppercase tracking-widest">Email</span>
                                                        <a href="mailto:{{ $accommodation['email'] }}" class="text-sm text-gray-600 hover:text-orange-500 transition-colors truncate max-w-[150px]">{{ $accommodation['email'] }}</a>
                                                    </div>
                                                </div>
                                            </div>

                                            <p class="text-gray-500 text-sm leading-relaxed mb-8 line-clamp-3">
                                                {{ $accommodation['description'] }}
                                            </p>
                                        </div>

                                        <div class="flex items-center justify-between pt-6 border-t border-gray-50">
                                            <a href="{{ $accommodation['link'] }}" target="_blank" 
                                                class="inline-flex items-center gap-2 text-gray-900 font-bold text-xs uppercase tracking-widest hover:text-orange-600 transition-all group/btn">
                                                More Details 
                                                <i class="fas fa-arrow-right text-[10px] transform group-hover/btn:translate-x-1 transition-transform"></i>
                                            </a>
                                            
                                            <div class="flex items-center gap-1">
                                                @php $rating = $accommodation['star_rating'] ?? 5; @endphp
                                                @for($i = 1; $i <= 5; $i++)
                                                    <i class="fas fa-star {{ $i <= $rating ? 'text-orange-400' : 'text-orange-200' }} text-[10px]"></i>
                                                @endfor
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        @else
                            <div class="bg-white rounded-3xl p-12 text-center border-2 border-dashed border-gray-100">
                                <div class="w-16 h-16 bg-gray-50 rounded-full flex items-center justify-center mx-auto mb-4">
                                    <i class="fas fa-hotel text-gray-300 text-2xl"></i>
                                </div>
                                <h3 class="text-lg font-bold text-gray-900 mb-2">No Accommodations Listed</h3>
                                <p class="text-gray-500 text-sm">We are currently curating the best places for your stay. Please check back soon.</p>
                            </div>
                        @endif
                    </div>
                </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="#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>
                                <li>
                                    <a href="https://www.garitour.com/" target="_blank" class="flex items-center justify-between text-gray-600 hover:text-orange-500 transition-colors group">
                                        <span class="text-sm font-medium">Visit Sri Lanka</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="#testimonials" class="flex items-center justify-between text-gray-600 hover:text-orange-500 transition-colors group">
                                        <span class="text-sm font-medium">Testimonials</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="#gari-publications" class="flex items-center justify-between text-gray-600 hover:text-orange-500 transition-colors group">
                                        <span class="text-sm font-medium">GARI Publications</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="#research-library" class="flex items-center justify-between text-gray-600 hover:text-orange-500 transition-colors group">
                                        <span class="text-sm font-medium">Research Library</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>
