@extends('frontend::layouts.master')

@php
$assetPath = 'frontend_assets';
$pageName = 'home';
@endphp

@section('content')

    <section class="majarat-home-hero" aria-label="Special offer" @if($homeSections->where('type', 'Banner')->isNotEmpty()) hidden @endif>
        <img src="{{ asset('frontend_assets/images/Banner.png') }}" alt="Special offer" fetchpriority="high">
        <div class="majarat-home-hero-copy" aria-hidden="true">
            <span>Special Offer</span>
            <h1>Welcome</h1>
            <p>Up to 50% Off</p>
            <small>www.majarat.ae</small>
        </div>
    </section>

    @forelse($homeSections as $section)

    @if($section->type === 'Banner')
    {{-- ─── BANNER SECTION ─── --}}
    @include('frontend::home.sections.banner', ['section' => $section])

    @elseif($section->type === 'Category')
    {{-- ─── CATEGORY SECTION ─── --}}
    @include('frontend::home.sections.category', ['section' => $section])

    @elseif($section->type === 'Product')
    {{-- ─── PRODUCT SECTION ─── --}}
    @include('frontend::home.sections.product', ['section' => $section])

    @endif

    @empty
    {{-- Fallback: nothing configured yet in admin --}}
    <section class="featured">
        <div class="container-fluid px-2 px-lg-5 py-5 text-center text-muted">
            <p>{{ webTrans('home_page_not_configure_message',' home')}}.</p>
        </div>
    </section>
    @endforelse

    <script>
        window.addEventListener('load', function () {
            document.querySelectorAll('.category-item img').forEach(image => {
                if (image.naturalWidth === 0) image.src = "{{ asset('frontend_assets/images/image-placeholder.png') }}";
            });

            const bannerImages = Array.from(document.querySelectorAll('main .carousel-item img'));
            if (bannerImages.some(image => image.naturalWidth > 0)) return;

            const fallback = document.querySelector('.majarat-home-hero');
            if (!fallback) return;
            fallback.hidden = false;
            bannerImages.forEach(image => {
                const banner = image.closest('section.my-3') || image.closest('[id^="banner-carousel-"]');
                if (banner) banner.hidden = true;
            });
        });
    </script>

@endsection