@extends('layouts.app')

@section('content')
    <!-- Hero Section: Slider -->
    <section class="relative bg-gray-900 py-12">
        <div class="container mx-auto px-4">
            @if(isset($categories) && $categories->isNotEmpty())
                <div class="swiper hero-slider" aria-label="Featured Services Slider">
                    <div class="swiper-wrapper">
                        @php
                            // Prioritize featured categories for the slider
                            $featuredCategories = $categories->where('featured_item', 1)->take(9);
                            $nonFeaturedCategories = $categories->where('featured_item', 0)->take(9);
                            $sliderCategories = $featuredCategories->merge($nonFeaturedCategories)->chunk(3);
                        @endphp
                        @foreach($sliderCategories as $categoryGroup)
                            <div class="swiper-slide">
                                <div class="flex flex-col lg:flex-row gap-6">
                                    <!-- Large Feature Card -->
                                    <div class="lg:w-2/3 w-full">
                                        <x-category-card
                                            :category="$categoryGroup->first()"
                                            size="large"
                                            heightOverride="h-80 lg:h-96"
                                            class="shadow-2xl"
                                        />
                                    </div>
                                    <!-- Small Cards -->
                                    <div class="lg:w-1/3 w-full flex flex-col gap-6">
                                        @foreach($categoryGroup->slice(1) as $category)
                                            <x-category-card
                                                :category="$category"
                                                size="small"
                                                heightOverride="h-36 lg:h-40"
                                                class="shadow-lg"
                                            />
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    <!-- Slider Navigation -->
                    <div class="swiper-button-prev text-white bg-gray-800 rounded-full p-2 opacity-75 hover:opacity-100 transition" aria-label="Previous slide"></div>
                    <div class="swiper-button-next text-white bg-gray-800 rounded-full p-2 opacity-75 hover:opacity-100 transition" aria-label="Next slide"></div>
                    <div class="swiper-pagination mt-4"></div>
                </div>
            @else
                <div class="text-center py-12">
                    <p class="text-gray-300 text-lg">No services available at the moment.</p>
                    <a href="{{ route('inquire') }}" class="mt-4 inline-block bg-yellow-500 text-black px-6 py-3 rounded-full font-semibold hover:bg-yellow-600 transition">Contact Us</a>
                </div>
            @endif
        </div>
    </section>

    <!-- Banner Section -->
    <section class="bg-gradient-to-r from-gray-800 via-gray-400 to-gray-400 bg-[url('https://www.transparenttextures.com/patterns/subtle-grid.png')] bg-blend-overlay text-black py-6 border border-gradient-to-r from-gray-400 to-gray-700 shadow-lg">
        <div class="container mx-auto px-4 text-center">
            <h2 class="text-2xl md:text-3xl font-bold mb-2 text-shadow">Dallas VIP: Dallas' Premiere Destination Management Company</h2>
            <p class="text-lg md:text-xl text-shadow">Dallas VIP specializes in group event planning. We provide a VIP "hands on" dedicated event coordinator to secure the success of your party. From formulation to finale, Dallas VIP will be there every step of the way to create memories of a lifetime.</p>
            <a href="{{ route('inquire') }}" class="mt-4 inline-block bg-gradient-to-r from-yellow-500 to-yellow-600 text-black px-6 py-3 rounded-full font-semibold hover:from-yellow-600 hover:to-yellow-700 transition">Plan Your Event</a>
        </div>
    </section>

    <!-- YouTube Video Slider Section -->
    @php
        // Fetch active categories and their active children with non-null YouTube URLs
        $videoCategories = $categories->where('active', true)
            ->whereNotNull('youtube')
            ->merge(
                $categories->where('active', true)
                    ->flatMap(function ($category) {
                        return $category->children()->whereNotNull('youtube')->get();
                    })
            )
            ->take(9); // Take up to 9 to allow multiple slides
        $videoCategoryGroups = $videoCategories->chunk(3); // Group into sets of 3 for hierarchical layout
    @endphp
    @if($videoCategoryGroups->isNotEmpty())
        <section class="py-16 bg-white">
            <div class="container mx-auto px-4">
                <h2 class="text-4xl font-bold text-gray-800 text-center mb-12 animate-fade-in font-display">Discover DallasVIP in Action</h2>
                <div class="swiper youtube-slider" aria-label="YouTube Video Slider">
                    <div class="swiper-wrapper">
                        @foreach($videoCategoryGroups as $videoGroup)
                            <div class="swiper-slide">
                                <div class="flex flex-col lg:flex-row gap-6">
                                    <!-- Large Video Card -->
                                    <div class="lg:w-2/3 w-full">
                                        <div class="bg-white rounded-lg shadow-2xl overflow-hidden">
                                            <div class="relative w-full" style="padding-bottom: 56.25%;">
                                                <iframe
                                                    class="absolute top-0 left-0 w-full h-full"
                                                    src="{{ preg_replace('/^https?:\/\/(www\.)?(youtube\.com|youtu\.be)\/(watch\?v=)?([^\s&]+).*$/', 'https://www.youtube.com/embed/$4', $videoGroup->first()->youtube) }}"
                                                    title="{{ $videoGroup->first()->name }} Video"
                                                    frameborder="0"
                                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                                    allowfullscreen
                                                    loading="lazy"
                                                ></iframe>
                                            </div>
                                            <div class="p-6">
                                                <h3 class="text-xl font-semibold text-gray-800 mb-2">{{ $videoGroup->first()->name }}</h3>
                                                <a
                                                    href="{{ route('categories.show', $videoGroup->first()->slug) }}"
                                                    class="text-yellow-500 font-semibold hover:underline"
                                                    aria-label="Explore {{ $videoGroup->first()->name }}"
                                                >Explore {{ $videoGroup->first()->name }}</a>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- Small Video Cards -->
                                    <div class="lg:w-1/3 w-full flex flex-col gap-6">
                                        @foreach($videoGroup->slice(1) as $video)
                                            <div class="bg-white rounded-lg shadow-lg overflow-hidden">
                                                <div class="relative w-full" style="padding-bottom: 56.25%;">
                                                    <iframe
                                                        class="absolute top-0 left-0 w-full h-full"
                                                        src="{{ preg_replace('/^https?:\/\/(www\.)?(youtube\.com|youtu\.be)\/(watch\?v=)?([^\s&]+).*$/', 'https://www.youtube.com/embed/$4', $video->youtube) }}"
                                                        title="{{ $video->name }} Video"
                                                        frameborder="0"
                                                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                                        allowfullscreen
                                                        loading="lazy"
                                                    ></iframe>
                                                </div>
                                                <div class="p-4">
                                                    <h3 class="text-lg font-semibold text-gray-800 mb-2">{{ $video->name }}</h3>
                                                    <a
                                                        href="{{ route('categories.show', $video->slug) }}"
                                                        class="text-yellow-500 font-semibold hover:underline"
                                                        aria-label="Explore {{ $video->name }}"
                                                    >Explore {{ $video->name }}</a>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    <!-- Slider Navigation -->
                    <div class="swiper-button-prev text-white bg-gray-800 rounded-full p-2 opacity-75 hover:opacity-100 transition" aria-label="Previous video"></div>
                    <div class="swiper-button-next text-white bg-gray-800 rounded-full p-2 opacity-75 hover:opacity-100 transition" aria-label="Next video"></div>
                    <div class="swiper-pagination mt-4"></div>
                </div>
            </div>
        </section>
    @endif

    <!-- Featured Categories -->
    <section class="py-16 bg-gray-100">
        <div class="container mx-auto px-4">
            <h2 class="text-4xl font-bold text-center mb-12 text-gray-800">Our Exclusive Services</h2>
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
                @foreach($categories as $category)
                    <div class="bg-white rounded-lg shadow-lg overflow-hidden transform hover:scale-105 transition">
                        <img src="{{ $category->thumb ? asset('storage/' . $category->thumb) : 'https://picsum.photos/seed/' . rand(0, 100000) . '/800/800' }}"
                             alt="{{ $category->name }}"
                             class="w-full h-48 object-cover lazyload"
                             loading="lazy">
                        <div class="p-6">
                            <h3 class="text-2xl font-semibold text-gray-800 mb-2">{{ $category->name }}</h3>
                            <p class="text-gray-600 mb-4">{{ \Illuminate\Support\Str::limit(strip_tags($category->description), 100) }}</p>
                            <a href="{{ route('categories.show', $category->slug) }}" class="text-yellow-500 font-semibold hover:underline">Discover More</a>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-gray-900 text-white py-8">
        <div class="container mx-auto px-4 text-center">
            <p class="text-lg mb-4">© {{ date('Y') }} DallasVIP. All rights reserved.</p>
            <div class="space-x-4">
                <a href="{{ route('home') }}" class="hover:text-yellow-500">Home</a>
                <a href="{{ route('categories.index') }}" class="hover:text-yellow-500">Services</a>
                <a href="{{ route('inquire') }}" class="hover:text-yellow-500">Contact</a>
            </div>
        </div>
    </footer>
@endsection