@php
    $promoBanners = $promoBanners ?? collect();
    $featuredSlugs = [
        'tws', 'wired-earphone', 'wireless-headset', 'speakers', 'neckband', 'powerbank', 'power-adapter', 'power-cable',
        'smartwatch', 'converters', 'backpack', 'hubs-docks', 'trimmer', 'mobiles-tabs', 'fan', 'smart-gadgets',
    ];
    $featuredCategories = collect($featuredSlugs)->map(function ($slug) use ($categories) {
        return $categories->firstWhere('slug', $slug);
    })->filter();
    $promoStyles = ['gm-promo--green', 'gm-promo--purple', 'gm-promo--cosmic'];
@endphp

{{-- Hero + Promo Banners --}}
@if($banners->count() > 0)
<section class="gm-hero-wrap" data-section="hero">
    <div class="container">
        <div id="gmHero" class="carousel slide gm-hero-carousel" data-bs-ride="carousel" data-bs-interval="{{ $sliderMs }}">
            @if($banners->count() > 1)
            <div class="carousel-indicators gm-hero-indicators">
                @foreach($banners as $i => $banner)
                <button type="button" data-bs-target="#gmHero" data-bs-slide-to="{{ $i }}" @if($i === 0) class="active" aria-current="true" @endif aria-label="Slide {{ $i + 1 }}"></button>
                @endforeach
            </div>
            @endif
            <div class="carousel-inner">
                @foreach($banners as $i => $banner)
                @php $bannerSrc = $mediaUrl($banner->image); @endphp
                <div class="carousel-item {{ $i === 0 ? 'active' : '' }}">
                    <div class="gm-hero-slide">
                        <div class="gm-hero-copy">
                            @if($banner->title)
                            <h2 class="gm-hero-title">{!! $banner->title !!}</h2>
                            @endif
                            @if($banner->subtitle)
                            <p class="gm-hero-specs">{{ $banner->subtitle }}</p>
                            @endif
                            @if($banner->link && $banner->button_text)
                            <a href="{{ $banner->link }}" class="gm-hero-shop">{{ $banner->button_text }}</a>
                            @endif
                        </div>
                        <div class="gm-hero-visual">
                            @if($bannerSrc)
                            <img src="{{ $bannerSrc }}" alt="{{ strip_tags($banner->title ?? 'Hero') }}" loading="{{ $i === 0 ? 'eager' : 'lazy' }}">
                            @endif
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
            @if($banners->count() > 1)
            <button class="gm-hero-nav gm-hero-nav-prev" type="button" data-bs-target="#gmHero" data-bs-slide="prev" aria-label="Previous">
                <i class="fas fa-chevron-left"></i>
            </button>
            <button class="gm-hero-nav gm-hero-nav-next" type="button" data-bs-target="#gmHero" data-bs-slide="next" aria-label="Next">
                <i class="fas fa-chevron-right"></i>
            </button>
            @endif
        </div>

        @if(!empty($hp['show_promo_banners']) && $promoBanners->count() > 0)
        <div class="gm-promo-grid">
            @foreach($promoBanners as $i => $promo)
            @php
                $promoSrc = $mediaUrl($promo->image);
                $promoClass = $promoStyles[$i] ?? 'gm-promo--green';
            @endphp
            <a href="{{ $promo->link ?: route('frontend.products') }}" class="gm-promo-card {{ $promoClass }}">
                @if($promoSrc)
                <img src="{{ $promoSrc }}" alt="{{ $promo->title }}" class="gm-promo-img" loading="lazy">
                @endif
                <div class="gm-promo-content">
                    @if($promo->title)<h3>{!! $promo->title !!}</h3>@endif
                    @if($promo->subtitle)<p>{{ $promo->subtitle }}</p>@endif
                </div>
            </a>
            @endforeach
        </div>
        @endif
    </div>
</section>
@endif

@if(!empty($hp['show_trust_bar']))
@include('themes.shared.trust-bar', ['hp' => $hp, 'colClass' => 'col-6 col-lg-3'])
@endif

{{-- Featured Categories --}}
@if(!empty($hp['show_categories']) && $featuredCategories->count() > 0)
<section class="gm-section gm-section-categories" data-section="categories">
    <div class="container">
        <div class="gm-sec-head">
            <h2 class="gm-sec-title">Featured Categories</h2>
            <p class="gm-sec-sub gm-sec-sub-green">Shop Your Desired Product from Featured Category</p>
        </div>
        <div class="gm-cat-grid">
            @foreach($featuredCategories as $cat)
            <a href="{{ route('frontend.category', $cat->slug) }}" class="gm-cat-card">
                <div class="gm-cat-icon-wrap">
                    @include('themes.gadget.partials.category-icon', ['slug' => $cat->slug])
                </div>
                <span>{{ $cat->name }}</span>
            </a>
            @endforeach
        </div>
        <div class="text-center mt-4">
            <a href="{{ route('frontend.products') }}" class="gm-view-all">View All</a>
        </div>
    </div>
</section>
@endif