{{-- Banner section component
     Usage: @include('florial::sections.banner', ['sectionKey' => 'homepage_hero'])
--}}
@php
    $ts = themeService()->boot();
    $section = $ts->section($sectionKey ?? '');
    if (!$section) return;

    $settings = $ts->settings($sectionKey);
    $bannerId = $settings['banner_id'] ?? null;
    $layout = $settings['layout'] ?? 'default';

    if (!$bannerId) return;

    $banner = \ViartasCore\BannersManager\Models\Banner::with('items')->find($bannerId);
    if (!$banner) return;

    $items = $banner->items()->where('is_active', true)->orderBy('position')->get();
    if ($items->isEmpty()) return;
@endphp

@if($layout === 'hero_sidebar')
    {{-- Hero: Big left (col-xl-8) + 2 small right (col-xl-4) --}}
    @php
        $mainItem = $items->first();
        $sideItems = $items->slice(1, 2);
    @endphp
    <section class="home-section pt-2">
        <div class="container-fluid-lg">
            <div class="row g-4">
                {{-- Main hero left --}}
                <div class="col-xl-8 ratio_65">
                    <div class="home-contain h-100">
                        <div class="h-100">
                            @if($mainItem->getDesktopImageUrl())
                                <img src="{{ $mainItem->getDesktopImageUrl() }}" class="bg-img blur-up lazyload" alt="{{ $mainItem->getTitle() }}">
                            @endif
                        </div>
                        <div class="home-detail p-center-left w-75" style="background-color: rgba(255, 255, 255, 0.5);width: 100% !important;">
                            <div>
                                @if($mainItem->getSubtitle() || $mainItem->getBadgeText())
                                    <h6>
                                        {{ $mainItem->getSubtitle() }}
                                        @if($mainItem->getBadgeText())
                                            <span>{{ $mainItem->getBadgeText() }}</span>
                                        @endif
                                    </h6>
                                @endif
                                @if($mainItem->getTitle())
                                    @php
                                        $heroTitle = $mainItem->getTitle();
                                        $words = explode(' ', $heroTitle);
                                        if (count($words) > 2) {
                                            $lastTwo = implode(' ', array_splice($words, -2));
                                            $heroTitle = implode(' ', $words) . ' <span class="daily">' . $lastTwo . '</span>';
                                        }
                                    @endphp
                                    <h1 class="text-uppercase">
                                        {!! $heroTitle !!}
                                    </h1>
                                @endif
                                @if($mainItem->getDescription())
                                    <p class="w-75 d-none d-sm-block">
                                        {{ $mainItem->getDescription() }}
                                    </p>
                                @endif
                                @if($mainItem->getButtonUrl())
                                    <a href="{{ $mainItem->getButtonUrl() }}" class="btn btn-animation mt-xxl-4 mt-2 home-button mend-auto mw-200px" style="max-width: 200px;">
                                        {{ $mainItem->getButtonText() ?? __('globals.shop_now') }}
                                        <i class="fa-solid fa-right-long icon"></i>
                                    </a>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Side banners right --}}
                <div class="col-xl-4 ratio_65">
                    <div class="row g-4">
                        @foreach($sideItems as $item)
                        <div class="col-xl-12 col-md-6">
                            <div class="home-contain">
                                @if($item->getDesktopImageUrl())
                                    <img src="{{ $item->getDesktopImageUrl() }}" class="bg-img blur-up lazyload" alt="{{ $item->getTitle() }}">
                                @endif
                                <div class="home-detail p-center-left home-p-sm w-75" style="background-color: rgba(255, 255, 255, 0.5);width: 100% !important;">
                                    <div>
                                        @if($item->getSubtitle())
                                            <h2 class="mt-0 theme-color">{{ $item->getSubtitle() }}</h2>
                                        @endif
                                        @if($item->getTitle())
                                            <h3 class="text-danger">{{ $item->getTitle() }}</h3>
                                        @endif
                                        @if($item->getDescription())
                                            <p class="w-100">{{ $item->getDescription() }}</p>
                                        @endif
                                        @if($item->getButtonUrl())
                                            <a href="{{ $item->getButtonUrl() }}" class="btn btn-animation mt-xxl-4 mt-2 home-button mend-auto mw-200px" style="max-width: 200px;">
                                                {{ $item->getButtonText() ?? __('globals.shop_now') }}
                                                <i class="fa-solid fa-right-long icon"></i>
                                            </a>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>

@elseif($layout === 'cards_row')
    {{-- Promo cards row --}}
    @php $cols = $settings['columns'] ?? 4; @endphp
    <section class="banner-section ratio_60 wow">
        <div class="container-fluid-lg">
            <div class="containers">
                <div class="row g-4">
                    @foreach($items->take($cols) as $item)
                    <div class="col-12 col-md-6 col-lg-{{ 12 / $cols }}">
                        <article class="promo-card">
                            @if($item->getDesktopImageUrl())
                                <img src="{{ $item->getDesktopImageUrl() }}" alt="{{ $item->getTitle() }}">
                            @endif
                            <div class="promo-top">
                                @if($item->getBadgeText())
                                    <div class="promo-sale">{{ $item->getBadgeText() }}</div>
                                @endif
                                @if($item->getTitle())
                                    <h3 class="promo-title">{!! $item->getTitle() !!}</h3>
                                @endif
                            </div>
                            <div class="promo-cta">
                                @if($item->getButtonUrl())
                                    <a class="btn btn-cta-{{ $loop->iteration }}" href="{{ $item->getButtonUrl() }}">
                                        {{ $item->getButtonText() ?? __('globals.shop_now') }}
                                        <span class="arrow">→</span>
                                    </a>
                                @endif
                            </div>
                        </article>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </section>

@else
    {{-- Default: simple full-width banner --}}
    <section class="home-section pt-2">
        <div class="container-fluid-lg">
            @foreach($items as $item)
            <div class="home-contain">
                @if($item->getDesktopImageUrl())
                    <img src="{{ $item->getDesktopImageUrl() }}" class="bg-img blur-up lazyload" alt="{{ $item->getTitle() }}">
                @endif
                <div class="home-detail p-center-left w-75" style="background-color: rgba(255, 255, 255, 0.5);width: 100% !important;">
                    <div>
                        @if($item->getTitle())
                            <h1 class="text-uppercase">{!! $item->getTitle() !!}</h1>
                        @endif
                        @if($item->getDescription())
                            <p class="w-75 d-none d-sm-block">{{ $item->getDescription() }}</p>
                        @endif
                        @if($item->getButtonUrl())
                            <a href="{{ $item->getButtonUrl() }}" class="btn btn-animation mt-xxl-4 mt-2 home-button mend-auto mw-200px" style="max-width: 200px;">
                                {{ $item->getButtonText() ?? __('globals.shop_now') }}
                                <i class="fa-solid fa-right-long icon"></i>
                            </a>
                        @endif
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </section>
@endif
