@php
    $scrolling_items = null;
    if (isset($setting)) {
        $scrolling_items = $setting->content_scrolling_banner ?? null;
    }
    if (is_string($scrolling_items)) {
        $scrolling_items = json_decode($scrolling_items, true) ?: [$scrolling_items];
    }
@endphp

@if(!empty($scrolling_items) && is_array($scrolling_items) && count($scrolling_items) > 0)
    <div class="custom-scrolling-banner {{ isset($dir) && $dir == 'rtl' ? 'rtl-banner' : '' }}" id="scrolling-banner">
        <div class="marquee-track">
            <div class="marquee-content">
                @foreach($scrolling_items as $item)
                    @if(!empty($item))
                        <span class="marquee-text" dir="{{$dir}}">{{ $item }}</span>
                        <span class="marquee-star">✦</span>
                    @endif
                @endforeach
            </div>
            <!-- Duplicate for seamless loop -->
            <div class="marquee-content" aria-hidden="true">
                @foreach($scrolling_items as $item)
                    @if(!empty($item))
                        <span class="marquee-text" dir="{{$dir}}">{{ $item }}</span>
                        <span class="marquee-star">✦</span>
                    @endif
                @endforeach
            </div>
            <!-- Triplicate to ensure full screen width coverage on large monitors -->
            <div class="marquee-content" aria-hidden="true">
                @foreach($scrolling_items as $item)
                    @if(!empty($item))
                        <span class="marquee-text" dir="{{$dir}}">{{ $item }}</span>
                        <span class="marquee-star">✦</span>
                    @endif
                @endforeach
            </div>
        </div>
    </div>

    <style>
        .custom-scrolling-banner {
            background-color: var(--background_1);
            color: var(--text_2);
            overflow: hidden;
            white-space: nowrap;
            display: flex;
            align-items: center;
            height: 38px;
            box-sizing: border-box;
            font-family: 'Tajawal', 'Montserrat', 'Inter', sans-serif;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            border-bottom: 1px solid rgba(255, 255, 255, 0.12);
            position: relative;
            z-index: 999;
            direction: ltr !important; /* Keep horizontal sliding smooth and unidirectional */
        }

        .marquee-track {
            display: flex;
            width: max-content;
            animation: marquee-scroll 50s linear infinite;
            will-change: transform;
        }

        /* Reverse animation direction for RTL mode to align with Arabic UX flows */
        .rtl-banner .marquee-track {
            animation-direction: reverse;
        }

        /* Stop scroll animation on hover for readability and superior UX */
        .custom-scrolling-banner:hover .marquee-track {
            animation-play-state: paused;
        }

        .marquee-content {
            display: flex;
            align-items: center;
            justify-content: space-around;
            min-width: 100vw;
        }

        .marquee-text {
            padding: 0 35px;
            display: inline-block;
            white-space: nowrap;
            /* Allow mixed Arabic / English text alignment properly inside items */
            direction: auto;
        }

        .marquee-star {
            color: var(--text_2);
            opacity: 0.75;
            font-size: 14px;
            user-select: none;
            display: inline-block;
            transform: scale(0.9);
        }

        @keyframes marquee-scroll {
            0% {
                transform: translate3d(0, 0, 0);
            }
            100% {
                transform: translate3d(-33.33333%, 0, 0);
            }
        }

        /* Elegant fade gradient edges to make the marquee look high-end */
        .custom-scrolling-banner::before,
        .custom-scrolling-banner::after {
            content: "";
            position: absolute;
            top: 0;
            width: 50px;
            height: 100%;
            z-index: 2;
            pointer-events: none;
        }

        .custom-scrolling-banner::before {
            left: 0;
            background: linear-gradient(to right, var(--background_1) 0%, transparent 100%);
        }

        .custom-scrolling-banner::after {
            right: 0;
            background: linear-gradient(to left, var(--background_1) 0%, transparent 100%);
        }

        /* Adjust top header calculations dynamically if needed in layouts */
        body {
            --banner-height: 38px;
        }
    </style>
@endif