@php
    /** @var \App\DTOs\BlockGroup $group */
    $bgStyle         = $group->bgStyle;
    $customBg        = $group->customBg;
    $containerWidth  = $group->containerWidth;
    $containerHeight = $group->containerHeight ?? 'medium';
    $showGradient    = $group->showGradient ?? true;
    $blocks          = $group->blocks;
@endphp

{{-- ========================================== --}}
{{-- 1. DARK STYLE: IMAGE WITH BLACK OVERLAY    --}}
{{-- ========================================== --}}
@if ($bgStyle === 'dark')
    <section class="{{ $containerWidth }} position-relative mb-4 dark-section">
        <div class="pattern-layer-one" style="background-image:url({{ asset('images/background/pattern-5.png') }})"></div>
        <div class="pattern-layer-two" style="background-image:url({{ asset('images/background/pattern-7.png') }})"></div>
        <div class="pattern-layer-three" style="background-image:url({{ asset('images/background/pattern-3.png') }})">
        </div>

        @if (!empty($customBg))
            <div class="pattern-layer-custom-map" style="background-image: url('{{ asset('storage/' . $customBg) }}');">
            </div>
        @endif

        <div class="auto-container d-flex flex-column gap-5 position-relative z-1">

            {{-- Iterate through the blocks in this group --}}
            @foreach ($blocks as $block)
                @include('frontend.content-section.block-renderer', ['block' => $block])
            @endforeach
        </div>
    </section>

    {{-- ========================================== --}}
    {{-- 2. WHITE STYLE: SOLID WHITE BACKGROUND     --}}
    {{-- ========================================== --}}
@elseif($bgStyle === 'white')
    <section class="{{ $containerWidth }}  bg-white text-dark mb-4">
        <div class="d-flex flex-column mx-auto gap-5 position-relative z-1">

            {{-- Iterate through the blocks in this group --}}
            @foreach ($blocks as $block)
                @include('frontend.content-section.block-renderer', ['block' => $block])
            @endforeach

        </div>
    </section>

    {{-- ========================================== --}}
    {{-- 3. CUSTOM STYLE: FULL CUSTOM BG IMAGE      --}}
    {{-- ========================================== --}}
@elseif($bgStyle === 'custom')
    <section class="{{ $containerWidth }} custom-section custom-section--{{ $containerHeight }} position-relative mb-4"
        @if (!empty($customBg))
            style="background-image: {{ $showGradient ? 'linear-gradient(to bottom, rgba(0,0,0,0.35), rgba(0,0,0,0.75)), ' : '' }}url('{{ asset('storage/' . $customBg) }}');"
        @endif
    >
        <div class="d-flex flex-column mx-auto gap-5 position-relative z-1">

            {{-- Iterate through the blocks in this group --}}
            @foreach ($blocks as $block)
                @include('frontend.content-section.block-renderer', ['block' => $block])
            @endforeach

        </div>
    </section>

    {{-- ========================================== --}}
    {{-- 4. DEFAULT STYLE                           --}}
    {{-- ========================================== --}}
@else
    <section class="{{ $containerWidth }}  text-dark mb-4">
        <div class="d-flex flex-column mx-auto gap-5 position-relative z-1">

            {{-- Iterate through the blocks in this group --}}
            @foreach ($blocks as $block)
                @include('frontend.content-section.block-renderer', ['block' => $block])
            @endforeach

        </div>
    </section>
@endif