<x-front-layout>
    <x-front.page-hero
        eyebrow="Exclusive Event"
        :title="ucwords(str_replace('-', ' ', $slug))"
        description="An exclusive gathering of investors, advisors, and international mobility leaders shaping the next chapter of cross-border strategy."
        image="https://images.unsplash.com/photo-1511578314322-379afb476865?auto=format&fit=crop&w=1600&q=80"
        imageAlt="Exclusive international event audience"
        :back-url="route('front.events')"
        back-label="Back to Events"
        align="left"
        :meta="['Dubai, UAE', 'March 15-17, 2026', '500+ Attendees']" />

    <!-- Event Details -->
    <section class="py-20 px-4">
        <div class="max-w-7xl mx-auto">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-12">
                <!-- Main Content -->
                <div class="lg:col-span-2 space-y-12">
                    <!-- Description -->
                    <div>
                        <h2 class="text-3xl font-bold text-secondary dark:text-white mb-6">About This Event</h2>
                        <p class="text-slate-600 dark:text-slate-300 text-lg leading-relaxed mb-6">
                            Join us for an exclusive gathering of industry leaders, investors, and experts in the field of global citizenship and residency programs. This premier event brings together thought leaders from around the world to discuss the latest trends, opportunities, and strategies in international mobility.
                        </p>
                        <p class="text-slate-600 dark:text-slate-300 text-lg leading-relaxed">
                            Network with fellow investors, attend expert panels, and discover new opportunities in citizenship by investment programs. This is your chance to connect with decision-makers and gain valuable insights into the future of global residency solutions.
                        </p>
                    </div>

                    <!-- Agenda -->
                    <div>
                        <h3 class="text-2xl font-bold text-secondary dark:text-white mb-6">Event Agenda</h3>
                        <div class="space-y-4">
                            <div class="flex gap-4 p-4 bg-slate-50 dark:bg-slate-800 rounded-lg">
                                <div class="text-primary font-bold min-w-[80px]">09:00</div>
                                <div>
                                    <h4 class="font-semibold text-secondary dark:text-white">Registration & Welcome Coffee</h4>
                                    <p class="text-sm text-slate-500 dark:text-slate-400">Network with fellow attendees</p>
                                </div>
                            </div>
                            <div class="flex gap-4 p-4 bg-slate-50 dark:bg-slate-800 rounded-lg">
                                <div class="text-primary font-bold min-w-[80px]">10:00</div>
                                <div>
                                    <h4 class="font-semibold text-secondary dark:text-white">Opening Keynote</h4>
                                    <p class="text-sm text-slate-500 dark:text-slate-400">Global Citizenship Trends 2026</p>
                                </div>
                            </div>
                            <div class="flex gap-4 p-4 bg-slate-50 dark:bg-slate-800 rounded-lg">
                                <div class="text-primary font-bold min-w-[80px]">14:00</div>
                                <div>
                                    <h4 class="font-semibold text-secondary dark:text-white">Panel Discussion</h4>
                                    <p class="text-sm text-slate-500 dark:text-slate-400">Investment Strategies & Due Diligence</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Gallery -->
                    <div>
                        <h3 class="text-2xl font-bold text-secondary dark:text-white mb-6">Event Gallery</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                            <div class="group relative overflow-hidden rounded-lg">
                                <img src="https://images.unsplash.com/photo-1511578314322-379afb476865?auto=format&fit=crop&w=400&q=80"
                                     alt="Event Gallery 1"
                                     class="w-full h-48 object-cover group-hover:scale-110 transition-transform duration-300">
                                <div class="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors duration-300"></div>
                            </div>
                            <div class="group relative overflow-hidden rounded-lg">
                                <img src="https://images.unsplash.com/photo-1511632765486-a01980e01a18?auto=format&fit=crop&w=400&q=80"
                                     alt="Event Gallery 2"
                                     class="w-full h-48 object-cover group-hover:scale-110 transition-transform duration-300">
                                <div class="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors duration-300"></div>
                            </div>
                            <div class="group relative overflow-hidden rounded-lg">
                                <img src="https://images.unsplash.com/photo-1556761175-b413da4baf72?auto=format&fit=crop&w=400&q=80"
                                     alt="Event Gallery 3"
                                     class="w-full h-48 object-cover group-hover:scale-110 transition-transform duration-300">
                                <div class="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors duration-300"></div>
                            </div>
                            <div class="group relative overflow-hidden rounded-lg">
                                <img src="https://images.unsplash.com/photo-1540575467063-178a50c2df87?auto=format&fit=crop&w=400&q=80"
                                     alt="Event Gallery 4"
                                     class="w-full h-48 object-cover group-hover:scale-110 transition-transform duration-300">
                                <div class="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors duration-300"></div>
                            </div>
                            <div class="group relative overflow-hidden rounded-lg">
                                <img src="https://images.unsplash.com/photo-1515187029135-18ee286d815b?auto=format&fit=crop&w=400&q=80"
                                     alt="Event Gallery 5"
                                     class="w-full h-48 object-cover group-hover:scale-110 transition-transform duration-300">
                                <div class="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors duration-300"></div>
                            </div>
                            <div class="group relative overflow-hidden rounded-lg">
                                <img src="https://images.unsplash.com/photo-1559136555-9303baea8ebd?auto=format&fit=crop&w=400&q=80"
                                     alt="Event Gallery 6"
                                     class="w-full h-48 object-cover group-hover:scale-110 transition-transform duration-300">
                                <div class="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors duration-300"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Sidebar -->
                <div class="space-y-8">
                    <!-- Event Details -->
                    <div class="navy-card p-8 rounded-2xl">
                        <h4 class="text-lg font-bold text-secondary dark:text-white mb-4">Event Details</h4>
                        <div class="space-y-3 text-sm">
                            <div class="flex items-center gap-3">
                                <span class="material-symbols-outlined text-primary">location_on</span>
                                <span>Dubai, UAE</span>
                            </div>
                            <div class="flex items-center gap-3">
                                <span class="material-symbols-outlined text-primary">calendar_today</span>
                                <span>March 15-17, 2026</span>
                            </div>
                            <div class="flex items-center gap-3">
                                <span class="material-symbols-outlined text-primary">schedule</span>
                                <span>3 Days</span>
                            </div>
                            <div class="flex items-center gap-3">
                                <span class="material-symbols-outlined text-primary">group</span>
                                <span>500+ Attendees</span>
                            </div>
                        </div>
                    </div>

                    <!-- Speakers -->
                    <div class="navy-card p-8 rounded-2xl">
                        <h4 class="text-lg font-bold text-secondary dark:text-white mb-4">Featured Speakers</h4>
                        <div class="space-y-4">
                            <div class="flex items-center gap-3">
                                <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?auto=format&fit=crop&w=100&q=80"
                                     alt="Speaker 1"
                                     class="w-12 h-12 rounded-full object-cover">
                                <div>
                                    <div class="font-semibold text-secondary dark:text-white">Dr. Sarah Johnson</div>
                                    <div class="text-sm text-slate-500 dark:text-slate-400">Citizenship Expert</div>
                                </div>
                            </div>
                            <div class="flex items-center gap-3">
                                <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=100&q=80"
                                     alt="Speaker 2"
                                     class="w-12 h-12 rounded-full object-cover">
                                <div>
                                    <div class="font-semibold text-secondary dark:text-white">Michael Chen</div>
                                    <div class="text-sm text-slate-500 dark:text-slate-400">Investment Strategist</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Back Button -->
                    <a href="{{ route('front.events') }}"
                       class="navy-card p-6 rounded-2xl hover:shadow-lg transition-all block text-center">
                        <span class="flex items-center justify-center gap-2 text-primary font-semibold">
                            <span class="material-symbols-outlined">arrow_back</span>
                            Back to Events
                        </span>
                    </a>
                </div>
            </div>
        </div>
    </section>
</x-front-layout>
