@php
    $seoTitle = trim($siteSettings['meta_title'] ?? '');
    $layoutTitle = $seoTitle !== '' ? $seoTitle : ($siteSettings['site_name'] ?? 'Aura Fashion');

    $canonicalUrl = url('/');
    $firstSlider = $sliders->first(fn ($s) => ! empty($s->image ?? null));
    $homeOgImage = ($firstSlider && ! empty($firstSlider->image))
        ? rtrim((string) config('app.url'), '/').'/storage/'.ltrim($firstSlider->image, '/')
        : null;
@endphp
<x-layout
    :title="$layoutTitle"
    :og-title="$layoutTitle"
    :og-url="$canonicalUrl"
    :canonical="$canonicalUrl"
    :og-image="$homeOgImage"
    og-type="website"
>
    <!-- Page Content -->

    <!-- Hero Slider -->
    <section class="relative w-full aspect-[21/9] lg:aspect-[2.8/1] bg-gray-100 overflow-hidden" id="hero-slider">
        <div class="slider-wrapper flex w-full h-full transition-transform duration-1000 ease-in-out">
            @forelse($sliders as $slider)
                <div class="slide min-w-full h-full relative">
                    @if($slider->link)
                        <a href="{{ $slider->link }}" class="block w-full h-full">
                    @endif
                    <img src="{{ asset('storage/' . $slider->image) }}" alt="{{ $slider->title ?? 'Hero Slide' }}" class="w-full h-full object-cover">
                    @if($slider->link)
                        </a>
                    @endif
                </div>
            @empty
                <div class="slide min-w-full h-full bg-primary flex items-center justify-center">
                    <div class="text-white text-center">
                        <h2 class="text-5xl font-black uppercase tracking-tighter mb-4">{{ $siteSettings['site_name'] ?? 'Aura Fashion' }}</h2>
                        <p class="text-lg font-bold tracking-widest uppercase">{{ $siteSettings['site_description'] ?? 'New Collection 2026' }}</p>
                    </div>
                </div>
            @endforelse
        </div>
        
        <!-- Slider Dots -->
        <div class="absolute bottom-6 left-1/2 -translate-x-1/2 flex gap-3 z-20">
            @foreach($sliders as $index => $slider)
                <button class="w-2.5 h-2.5 rounded-full bg-white/40 hover:bg-white transition-all slider-dot {{ $index === 0 ? 'active' : '' }}" data-index="{{ $index }}"></button>
            @endforeach
        </div>
    </section>

    <!-- Features -->
    <section class="py-10 border-b border-gray-100">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-12">
                <div class="flex items-center gap-4">
                    <div class="p-3 bg-gray-50 rounded-full text-primary">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                    </div>
                    <div>
                        <h4 class="font-bold text-sm">{{ __('Fast Delivery') }}</h4>
                        <p class="text-xs text-gray-500">{{ __('Anywhere in Bangladesh') }}</p>
                    </div>
                </div>
                <div class="flex items-center gap-4">
                    <div class="p-3 bg-gray-50 rounded-full text-primary">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 15v-1a4 4 0 00-4-4H8m0 0l3 3m-3-3l3-3"/></svg>
                    </div>
                    <div>
                        <h4 class="font-bold text-sm">{{ __('Easy Returns') }}</h4>
                        <p class="text-xs text-gray-500">{{ __('Within 7 days for exchange') }}</p>
                    </div>
                </div>
                <div class="flex items-center gap-4">
                    <div class="p-3 bg-gray-50 rounded-full text-primary">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
                    </div>
                    <div>
                        <h4 class="font-bold text-sm">{{ __('24/7 Best Support') }}</h4>
                        <p class="text-xs text-gray-500">{{ __('Within 30 days online support') }}</p>
                    </div>
                </div>
                <div class="flex items-center gap-4">
                    <div class="p-3 bg-gray-50 rounded-full text-primary">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
                    </div>
                    <div>
                        <h4 class="font-bold text-sm">{{ __('Cash On Delivery') }}</h4>
                        <p class="text-xs text-gray-500">{{ __('Pay after receiving the product') }}</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Shop By Categories -->
    <section class="py-10 lg:py-16 bg-white">
        <div class="container mx-auto px-4">
            <div class="flex items-end justify-between mb-8 flex-wrap gap-4">
                <div class="text-left">
                    <h2 class="text-lg sm:text-2xl font-black uppercase tracking-tighter text-gray-900">{{ __('Shop By Category') }}</h2>
                    <div class="w-10 sm:w-16 h-1 bg-primary mt-2 rounded-full"></div>
                </div>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 lg:gap-6">
                @forelse($homeCategories as $hc)
                <a href="{{ route('category.show', ['slugs' => $hc->category->slug]) }}" class="relative group cursor-pointer overflow-hidden rounded-2xl aspect-[21/9] sm:aspect-[4/3] shadow-md hover:shadow-xl transition-shadow duration-300">
                    <img src="{{ asset('storage/' . $hc->image) }}" alt="{{ __($hc->title ?? $hc->category->name) }}" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
                    <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent group-hover:bg-black/40 transition-colors flex items-end justify-start p-6">
                        <h3 class="text-white text-xl sm:text-3xl font-extrabold uppercase tracking-tight">{{ __($hc->title ?? $hc->category->name) }}</h3>
                    </div>
                </a>
                @empty
                @foreach([__('Womens Collection'), __('Mens Collection'), __('Kids Collection')] as $category)
                <div class="relative group cursor-pointer overflow-hidden rounded-2xl aspect-[21/9] sm:aspect-[4/3] shadow-md hover:shadow-xl transition-shadow duration-300 bg-gray-100 flex items-center justify-center">
                    <div class="text-center p-8">
                        <i class="fas fa-tags text-4xl text-gray-200 mb-4"></i>
                        <h3 class="text-gray-400 text-sm font-black uppercase tracking-widest">{{ $category }}</h3>
                    </div>
                    <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent group-hover:bg-black/40 transition-colors flex items-end justify-start p-6">
                        <h3 class="text-white text-xl sm:text-3xl font-extrabold uppercase tracking-tight">{{ $category }}</h3>
                    </div>
                </div>
                @endforeach
                @endforelse
            </div>
        </div>
    </section>


    <!-- New Arrival Products -->
    <section class="py-10 lg:py-16 bg-white">
        <div class="container mx-auto px-4">
            <div class="flex items-end justify-between mb-8 flex-wrap gap-4">
                <div class="text-left">
                    <h2 class="text-lg sm:text-2xl font-black uppercase tracking-tighter text-gray-900">{{ __('New Arrivals') }}</h2>
                    <div class="w-10 sm:w-16 h-1 bg-primary mt-2 rounded-full"></div>
                </div>
                <a href="/shop" class="text-[10px] sm:text-xs font-bold text-gray-400 hover:text-primary transition-colors uppercase tracking-widest flex items-center gap-1 group pb-1">
                    {{ __('View All') }}
                    <svg class="w-3 h-3 group-hover:translate-x-1 transition-transform mb-[1px]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M9 5l7 7-7 7"/></svg>
                </a>
            </div>
            
            <div class="relative group/na-carousel px-0 lg:px-4">
                <!-- Navigation Buttons -->
                <button id="naPrevBtn" class="absolute left-0 top-1/2 -translate-y-1/2 z-20 bg-white p-3 rounded-full shadow-lg text-gray-400 hover:text-primary transition-all border border-gray-100 items-center justify-center -translate-x-4 hidden lg:flex">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
                </button>
                <button id="naNextBtn" class="absolute right-0 top-1/2 -translate-y-1/2 z-20 bg-white p-3 rounded-full shadow-lg text-gray-400 hover:text-primary transition-all border border-gray-100 items-center justify-center translate-x-4 hidden lg:flex">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                </button>

                <!-- Carousel Container -->
                <div id="naCarousel" class="carousel-container grid grid-cols-2 md:grid-cols-3 lg:flex gap-3 md:gap-6 lg:overflow-x-auto lg:pb-10 scroll-smooth">
                    @forelse($newArrivals as $product)
                    <div class="w-full lg:w-[calc((100%-6rem)/5)] lg:flex-shrink-0">
                        <x-product-card :product="$product" />
                    </div>
                    @empty
                        <div class="w-full text-center py-10">
                            <p class="text-gray-400 italic">{{ __('No new arrivals available at the moment.') }}</p>
                        </div>
                    @endforelse
                </div>
            </div>
        </div>
    </section>

    <!-- HOT SALE -->
    <section class="py-10 lg:py-16 bg-gray-50">
        <div class="container mx-auto px-4">
            <div class="flex items-end justify-between mb-8 flex-wrap gap-4">
                <div class="text-left">
                    <h2 class="text-lg sm:text-2xl font-black uppercase tracking-tighter text-gray-900">{{ __('HOT SALE') }}</h2>
                    <div class="w-10 sm:w-16 h-1 bg-primary mt-2 rounded-full"></div>
                </div>
                <a href="/shop" class="text-[10px] sm:text-xs font-bold text-gray-400 hover:text-primary transition-colors uppercase tracking-widest flex items-center gap-1 group pb-1">
                    {{ __('View All') }}
                    <svg class="w-3 h-3 group-hover:translate-x-1 transition-transform mb-[1px]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M9 5l7 7-7 7"/></svg>
                </a>
            </div>
            
            <div class="relative group/carousel px-0 lg:px-4">
                <!-- Navigation Buttons -->
                <button id="prevBtn" class="absolute left-0 top-1/2 -translate-y-1/2 z-20 bg-white p-3 rounded-full shadow-lg text-gray-400 hover:text-primary transition-all border border-gray-100 items-center justify-center -translate-x-4 hidden lg:flex">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
                </button>
                <button id="nextBtn" class="absolute right-0 top-1/2 -translate-y-1/2 z-20 bg-white p-3 rounded-full shadow-lg text-gray-400 hover:text-primary transition-all border border-gray-100 items-center justify-center translate-x-4 hidden lg:flex">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                </button>

                <!-- Carousel Container -->
                <div id="carousel" class="carousel-container grid grid-cols-2 md:grid-cols-3 lg:flex gap-3 md:gap-6 lg:overflow-x-auto lg:pb-10 scroll-smooth">
                    @forelse($hotSaleProducts as $product)
                    <div class="w-full lg:w-[calc((100%-6rem)/5)] lg:flex-shrink-0">
                        <x-product-card :product="$product" />
                    </div>
                    @empty
                        <div class="w-full text-center py-10">
                            <p class="text-gray-400 italic font-medium">{{ __('Coming soon! Special offers are on the way.') }}</p>
                        </div>
                    @endforelse
                </div>
            </div>
        </div>
    </section>

    <!-- Dynamic Featured Category Sections -->
    @foreach($featuredSections as $section)
    <section class="py-10 lg:py-16 bg-white border-b border-gray-50 last:border-b-0">
        <div class="container mx-auto px-4">
            <div class="flex items-end justify-between mb-8 flex-wrap gap-4">
                <div class="text-left">
                    <h2 class="text-lg sm:text-2xl font-black uppercase tracking-tighter text-gray-900">{{ __($section->category->name) }}</h2>
                    <div class="w-10 sm:w-16 h-1 bg-primary mt-2 rounded-full"></div>
                </div>
                <a href="{{ route('category.show', ['slugs' => $section->category->slug]) }}" class="text-[10px] sm:text-xs font-bold text-gray-400 hover:text-primary transition-colors uppercase tracking-widest flex items-center gap-1 group pb-1">
                    {{ __('View All') }}
                    <svg class="w-3 h-3 group-hover:translate-x-1 transition-transform mb-[1px]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M9 5l7 7-7 7"/></svg>
                </a>
            </div>
            
            <div class="grid grid-cols-2 lg:grid-cols-4 gap-8">
                @foreach($section->products as $product)
                <x-product-card :product="$product" />
                @endforeach
            </div>
        </div>
    </section>
    @endforeach

    @push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const setupCarousel = (id, prevId, nextId) => {
                const carousel = document.getElementById(id);
                const prevBtn = document.getElementById(prevId);
                const nextBtn = document.getElementById(nextId);
                if (carousel && prevBtn && nextBtn) {
                    const scrollAmount = 300;
                    prevBtn.addEventListener('click', () => carousel.scrollBy({ left: -scrollAmount, behavior: 'smooth' }));
                    nextBtn.addEventListener('click', () => carousel.scrollBy({ left: scrollAmount, behavior: 'smooth' }));
                }
            };

            setupCarousel('carousel', 'prevBtn', 'nextBtn');
            setupCarousel('naCarousel', 'naPrevBtn', 'naNextBtn');

            // Hero Slider Auto-play
            const sliderWrapper = document.querySelector('.slider-wrapper');
            const dots = document.querySelectorAll('.slider-dot');
            let currentSlide = 0;
            const totalSlides = dots.length;

            const updateSlider = (index) => {
                currentSlide = index;
                sliderWrapper.style.transform = `translateX(-${currentSlide * 100}%)`;
                dots.forEach((dot, i) => {
                    if (i === currentSlide) dot.classList.add('active', 'bg-white', 'w-6');
                    else dot.classList.remove('active', 'bg-white', 'w-6');
                });
            };

            const autoPlay = () => {
                currentSlide = (currentSlide + 1) % totalSlides;
                updateSlider(currentSlide);
            };

            let sliderInterval = setInterval(autoPlay, 5000);

            dots.forEach(dot => {
                dot.addEventListener('click', () => {
                    clearInterval(sliderInterval);
                    updateSlider(parseInt(dot.dataset.index));
                    sliderInterval = setInterval(autoPlay, 5000);
                });
            });
            updateSlider(0);
        });
    </script>
    @endpush

    <!-- Videos Carousel -->
    <section class="py-10 lg:py-16">
        <div class="container mx-auto px-4">
            <div class="flex items-end justify-between mb-8 flex-wrap gap-4">
                <div class="text-left">
                    <h2 class="text-lg sm:text-2xl font-black uppercase tracking-tighter text-gray-900">{{ __('VIDEOS') }}</h2>
                    <div class="w-10 sm:w-16 h-1 bg-primary mt-2 rounded-full"></div>
                </div>
            </div>
            
            <div class="relative group/video-carousel px-0 lg:px-4">
                <!-- Navigation Buttons -->
                <button id="vPrevBtn" class="absolute left-0 top-1/2 -translate-y-1/2 z-20 bg-white p-3 rounded-full shadow-lg text-gray-400 hover:text-primary transition-all border border-gray-100 items-center justify-center -translate-x-4 hidden lg:flex">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
                </button>
                <button id="vNextBtn" class="absolute right-0 top-1/2 -translate-y-1/2 z-20 bg-white p-3 rounded-full shadow-lg text-gray-400 hover:text-primary transition-all border border-gray-100 items-center justify-center translate-x-4 hidden lg:flex">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                </button>

                <!-- Carousel Container -->
                <div id="vCarousel" class="carousel-container grid grid-cols-2 md:grid-cols-3 lg:flex gap-3 md:gap-6 lg:overflow-x-auto lg:pb-10 scroll-smooth">
                    @forelse($homeVideos as $video)
                    @php
                        $videoId = null;
                        if (preg_match('%(?:youtube(?:-nocookie)?\.com/(?:[^/]+/.+/|(?:v|e(?:mbed)?)/|shorts/|.*[?&]v=)|youtu\.be/)([^"&?/ ]{11})%i', $video->video_url, $match)) {
                            $videoId = $match[1];
                        }
                        $thumb = $video->thumbnail ? asset('storage/' . $video->thumbnail) : ($videoId ? "https://img.youtube.com/vi/$videoId/hqdefault.jpg" : asset('images/placeholder.svg'));
                    @endphp
                    <div class="w-full lg:w-[calc((100%-6rem)/5)] lg:flex-shrink-0">
                        <a href="javascript:void(0)" data-video-id="{{ $videoId }}" class="video-trigger block relative group aspect-[9/16] rounded-xl overflow-hidden bg-gray-900 shadow-xl border border-gray-100">
                            <img src="{{ $thumb }}" class="w-full h-full object-cover opacity-60 group-hover:scale-110 transition-transform duration-700">
                            <div class="absolute inset-0 flex items-center justify-center">
                                <div class="w-16 h-16 bg-white/20 backdrop-blur-md rounded-full flex items-center justify-center text-white scale-90 group-hover:scale-100 transition-all duration-500 shadow-2xl border border-white/30">
                                    <svg class="w-8 h-8 fill-current" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
                                </div>
                            </div>
                            @if($video->title)
                            <div class="absolute bottom-4 left-4 right-4 text-left translate-y-2 group-hover:translate-y-0 opacity-0 group-hover:opacity-100 transition-all duration-500">
                                <p class="text-white text-xs font-black uppercase tracking-widest drop-shadow-lg leading-tight">{{ __($video->title) }}</p>
                            </div>
                            @endif
                        </a>
                    </div>
                    @empty
                        <div class="w-full text-center py-20 bg-gray-50 rounded-[2.5rem]">
                            <p class="text-gray-400 italic font-bold tracking-[0.2em] text-[10px] uppercase">{{ __('Coming Soon: New Fashion reels!') }}</p>
                        </div>
                    @endforelse
                </div>
            </div>

            <!-- Video Modal -->
            <div id="videoModal" class="fixed inset-0 z-[99999] hidden items-center justify-center bg-black/90 p-4 transition-all duration-300 opacity-0">
                <!-- Close Button Outside Iframe Container -->
                <button id="closeModal" class="absolute top-6 right-6 md:top-8 md:right-8 z-[999999] w-10 h-10 md:w-12 md:h-12 bg-white/20 hover:bg-white/30 backdrop-blur-md rounded-full flex items-center justify-center text-white border border-white/20 transition-all shadow-2xl">
                    <svg class="w-5 h-5 md:w-6 md:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                </button>
                
                <div class="relative w-full max-w-lg aspect-[9/16] bg-black rounded-3xl overflow-hidden shadow-2xl scale-90 transition-transform duration-300" id="modalContainer">
                    <iframe id="videoPlayer" class="w-full h-full pointer-events-auto" src="" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                </div>
            </div>

            <script>
                document.addEventListener('DOMContentLoaded', function() {
                    const vCarousel = document.getElementById('vCarousel');
                    const vPrevBtn = document.getElementById('vPrevBtn');
                    const vNextBtn = document.getElementById('vNextBtn');
                    const videoModal = document.getElementById('videoModal');
                    const videoPlayer = document.getElementById('videoPlayer');
                    const closeModal = document.getElementById('closeModal');
                    const modalContainer = document.getElementById('modalContainer');

                    if (vCarousel && vPrevBtn && vNextBtn) {
                        const scrollAmount = 300;
                        vPrevBtn.addEventListener('click', () => { vCarousel.scrollBy({ left: -scrollAmount, behavior: 'smooth' }); });
                        vNextBtn.addEventListener('click', () => { vCarousel.scrollBy({ left: scrollAmount, behavior: 'smooth' }); });
                    }

                    document.querySelectorAll('.video-trigger').forEach(trigger => {
                        trigger.addEventListener('click', function(e) {
                            e.preventDefault();
                            const vId = this.getAttribute('data-video-id');
                            if (vId) {
                                videoPlayer.src = `https://www.youtube.com/embed/${vId}?autoplay=1`;
                                videoModal.classList.remove('hidden');
                                videoModal.classList.add('flex');
                                setTimeout(() => {
                                    videoModal.classList.remove('opacity-0');
                                    modalContainer.classList.remove('scale-90');
                                }, 10);
                                document.body.style.overflow = 'hidden';
                            }
                        });
                    });

                    function hideModal(e) {
                        if (e) {
                            e.preventDefault();
                            e.stopPropagation();
                        }
                        videoModal.classList.add('opacity-0');
                        modalContainer.classList.add('scale-90');
                        setTimeout(() => {
                            videoModal.classList.add('hidden');
                            videoModal.classList.remove('flex');
                            videoPlayer.src = '';
                            document.body.style.overflow = '';
                        }, 300);
                    }

                    if (closeModal) {
                        closeModal.addEventListener('click', hideModal);
                        closeModal.addEventListener('touchstart', hideModal, {passive: false});
                    }
                    
                    videoModal?.addEventListener('click', (e) => {
                        if (e.target === videoModal) hideModal();
                    });
                });
            </script>
        </div>
    </section>

    <!-- Showrooms -->
    <section class="py-10 lg:py-16 bg-gray-50">
        <div class="container mx-auto px-4 text-center">
            <p class="text-[10px] font-black text-gray-300 uppercase tracking-[0.5em] mb-4 group-print:text-gray-200">{{ __('Thank you for shopping with') }} {{ $siteSettings['site_name'] ?? 'Aura' }}</p>
            
            <h2 class="text-2xl font-bold mb-10 uppercase tracking-widest text-gray-800">{{ __('Find Our Showrooms') }}</h2>
            
            @php
                $count = $showrooms->count();
                $gridClass = 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3';
                $containerClass = '';
                if ($count === 1) {
                    $gridClass = 'grid-cols-1';
                    $containerClass = 'max-w-md mx-auto';
                } elseif ($count === 2) {
                    $gridClass = 'grid-cols-1 md:grid-cols-2';
                    $containerClass = 'max-w-4xl mx-auto';
                }
            @endphp
            
            <div class="grid {{ $gridClass }} gap-8 {{ $containerClass }}">
                @forelse($showrooms as $index => $showroom)
                <div class="bg-white p-8 rounded-3xl shadow-sm text-left border-l-4 {{ $index % 2 == 0 ? 'border-primary' : 'border-secondary' }} group hover:shadow-xl hover:-translate-y-1 transition-all duration-300 relative overflow-hidden flex flex-col justify-center">
                    <div class="absolute -right-4 -top-4 w-24 h-24 bg-gray-50 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500 -z-0"></div>
                    <div class="relative z-10">
                        <h3 class="text-xl font-bold mb-4 flex items-center gap-3 text-gray-800 group-hover:text-primary transition-colors">
                            <i class="fas fa-map-marker-alt {{ $index % 2 == 0 ? 'text-primary' : 'text-secondary' }}"></i>
                            {{ $showroom->name }}
                        </h3>
                        <p class="text-gray-500 text-sm mb-6 leading-relaxed font-medium">{{ $showroom->address }}</p>
                        <div class="flex items-center gap-2 text-sm font-black {{ $index % 2 == 0 ? 'text-primary' : 'text-secondary' }} bg-gray-50 px-4 py-2 rounded-xl w-fit">
                            <i class="fas fa-phone-alt text-xs"></i>
                            <span>{{ $showroom->phone }}</span>
                        </div>
                    </div>
                </div>
                @empty
                <div class="col-span-full py-20 bg-white rounded-3xl shadow-sm border border-dashed border-gray-200">
                    <p class="text-gray-400 italic font-bold tracking-widest text-sm uppercase">{{ __('Our showroom locations will be listed here soon.') }}</p>
                </div>
                @endforelse
            </div>
        </div>
    </section>

</x-layout>