<x-conference-layout>
    <x-slot name="title">{{ $conference['title'] ?? 'Past Proceedings' }}</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">Conference Archive</span>
                </div>
                <!-- Main Title -->
                <h1 class="text-5xl lg:text-7xl font-bold text-white mb-6 tracking-tight leading-tight">
                    Past Proceedings
                </h1>
                <!-- Subtitle -->
                <p class="text-xl text-gray-300 font-light leading-relaxed max-w-2xl">
                    Explore a rich history of academic excellence and global dialogue. Access the proceedings, research insights, and achievements from our past conferences.
                </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">
            <!-- Full Width Content -->
                    <div class="mb-16 flex flex-col sm:flex-row items-end justify-between gap-8 border-b border-gray-200 pb-8">
                        <div class="max-w-xl">
                            <span class="inline-block py-1 px-3 rounded-full bg-orange-100 text-orange-600 font-bold tracking-widest text-[10px] uppercase mb-4 border border-orange-200 shadow-sm">Archive Database</span>
                            <h2 class="text-4xl font-extrabold text-gray-900 tracking-tight leading-tight">Explore The <span class="text-transparent bg-clip-text bg-gradient-to-r from-orange-600 to-red-600">Conference History</span></h2>
                        </div>
                        <div class="relative w-full sm:w-96 flex-shrink-0 group">
                            <div class="absolute -inset-1 bg-gradient-to-r from-orange-500 to-red-500 rounded-full blur opacity-25 group-hover:opacity-50 transition duration-500"></div>
                            <div class="relative flex items-center">
                                <span class="absolute left-4 flex items-center">
                                    <i class="fas fa-search text-gray-400 group-hover:text-orange-500 transition-colors"></i>
                                </span>
                                <input type="text"
                                       class="w-full py-4 pl-12 pr-6 text-sm text-gray-700 bg-white/90 backdrop-blur-sm border-0 rounded-full shadow-lg focus:outline-none focus:ring-2 focus:ring-orange-500 focus:bg-white transition-all duration-300 placeholder-gray-400"
                                       placeholder="Search past proceedings by year, title, or location...">
                            </div>
                        </div>
                    </div>

                    <!-- Proceedings Grid -->
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                        @foreach ($proceedings as $index => $item)
                            <div class="group relative bg-white rounded-3xl overflow-hidden hover:shadow-[0_20px_50px_rgba(0,0,0,0.1)] transition-all duration-500 flex flex-col h-full border border-gray-100/50 hover:-translate-y-2 z-10 w-full hover:z-20">
                                
                                <!-- Background Gradient Effect -->
                                <div class="absolute inset-0 bg-gradient-to-b from-gray-50/50 to-white opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                                
                                <!-- Image Header -->
                                <div class="relative h-48 sm:h-56 w-full overflow-hidden shrink-0">
                                    <img src="{{ isset($item['image']) ? $item['image'] : asset('images/proceedings_cover_mockup.png') }}" alt="{{ $item['title'] }}" class="w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-700 ease-in-out">
                                    <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-gray-900/40 to-transparent"></div>
                                    
                                    <!-- Year & Location Badges Overlay -->
                                    <div class="absolute bottom-4 left-4 right-4 flex items-center justify-between">
                                        <span class="px-3 py-1 bg-white/20 backdrop-blur-md text-white text-xs font-black rounded-lg uppercase tracking-widest border border-white/20">
                                            {{ $item['year'] }}
                                        </span>
                                        <span class="flex items-center text-xs font-bold text-gray-200 tracking-widest uppercase">
                                            <i class="fas fa-map-marker-alt text-orange-400 mr-1.5"></i>
                                            {{ $item['location'] }}
                                        </span>
                                    </div>
                                </div>
                                
                                <div class="p-6 sm:p-8 flex-grow flex flex-col relative z-20">
                                    
                                    <!-- Main Content -->
                                    <h3 class="text-xl sm:text-2xl font-extrabold text-gray-800 mb-6 leading-tight group-hover:text-orange-600 transition-colors duration-300">
                                        {{ $item['title'] }}
                                    </h3>
                                    
                                    <p class="text-sm text-gray-500 leading-relaxed mb-8 flex-grow opacity-0 group-hover:opacity-100 h-0 group-hover:h-auto overflow-hidden transition-all duration-500 transform translate-y-4 group-hover:translate-y-0">
                                        Access the official publication records, speaker abstracts, and research papers presented during this specific conference symposium.
                                    </p>
                                    
                                    <!-- Footer Actions -->
                                    <div class="mt-auto pt-6 flex items-center justify-between">
                                        <a href="#" class="inline-flex items-center text-xs font-black uppercase tracking-[0.2em] text-gray-400 hover:text-orange-600 transition-all group/link relative">
                                            <span class="relative z-10">Access Archive</span>
                                            <span class="absolute bottom-0 left-0 w-full h-0.5 bg-orange-600 transform scale-x-0 origin-left group-hover/link:scale-x-100 transition-transform duration-300"></span>
                                            <i class="fas fa-arrow-right ml-3 text-[10px] transform group-hover/link:translate-x-2 transition-transform duration-300"></i>
                                        </a>
                                        <div class="w-10 h-10 rounded-full bg-gray-50 flex items-center justify-center text-gray-400 group-hover:bg-orange-500 group-hover:text-white group-hover:shadow-md transition-all duration-300 transform group-hover:scale-110">
                                            <i class="fas fa-file-pdf text-sm"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>

                    <div class="mt-16 text-center">
                        <button class="inline-flex items-center justify-center px-8 py-3 text-sm font-bold uppercase tracking-widest text-gray-600 bg-white border border-gray-200 rounded-full hover:bg-orange-50 hover:text-orange-600 hover:border-orange-200 transition-all shadow-sm">
                            <i class="fas fa-sync-alt mr-2"></i>
                            Load More
                        </button>
            <!-- Sidebar removed per user request -->
        </div>
    </section>
</x-conference-layout>
