@php
    // Panggil helper contact()
    $contacts = contact();
    // Pecah data menjadi 5 item per slide agar fitur Swiper tetap jalan
    $contactChunks = $contacts->chunk(5); 
@endphp
<section class="slider">
    <section class="marquee">
        <div class="wrapper">
            <div class="s-a">
                <div class="marquee__bullhorn">
                    <i class="fas fa-bullhorn"></i>
                </div>
                <marquee scrolldelay="150" behavior="scroll" onmouseover="this.stop();" onmouseout="this.start();" direction="left">
                    <div style="width: 100000px; transform: translateX(0px);" class="js-marquee-wrapper">
                        <div class="js-marquee" style="margin-right: 0px; float: left;">{{ general()->title }}</div>
                    </div>
                </marquee>
            </div>
        </div>
    </section>

    <div class="g8-banner g8-banner-d">
        <div class="swiper-container g8b-d">
            <div class="swiper-wrapper s-slides">
                @php $banners = banner(); @endphp
                @if($banners && count($banners) > 0)
                    @foreach($banners as $index => $b)
                        <div class="swiper-slide {{ $index == 0 ? 'active' : '' }}">
                            <picture>
                                <img src="{{ asset('uploads/'.$b->gambar ?? '/common/images/default/banner.jpg') }}" alt="Banner Mantra88" width="1800" height="600" loading="lazy" style="width: 100%; margin: 0 auto; display: block;">
                            </picture>
                        </div>
                    @endforeach
                @else
                    <div class="swiper-slide active">
                        <picture>
                            <img src="/common/images/default/banner.jpg" alt="Mantra88" width="1800" height="600" loading="lazy" style="width: 100%; margin: 0 auto; display: block;">
                        </picture>
                    </div>
                @endif
            </div>
            <div class="swiper-button-next" tabindex="0" role="button" aria-label="Next slide"></div>
            <div class="swiper-button-prev" tabindex="0" role="button" aria-label="Previous slide"></div>
            <div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets"></div>
            <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
        </div>
    </div>
    <div class="g8-lshm"></div>
</section>

<section class="benefits jackpot-home">
    <div class="wrapper">
        <div class="progressive-jackpot" style="background-image:url('{{ asset('uploads/'.theme()->jackpot_desktop) ?? '/assets/img/progressive-jackpot.webp' }}') !important;">
            <div class="jackpot-container">
                <span class="jackpot-currency">IDR</span>
                <span class="jackpotNumber">16,800,001,876</span>
            </div>
        </div>
    </div>
</section>

<section class="featured">
    <div class="wrapper">
        <div class="home-games">
            <div class="title">
                <svg viewBox="0 0 24 24" style="width: 34px; height: 34px; overflow: visible; opacity: 1; z-index: 1; fill: rgb(206, 206, 206);"><path fill="none" d="M0 0h24v24H0z"></path><path d="M16.2 8.65c-.64.42-1.4.65-2.18.65-2.06 0-3.77-1.55-3.99-3.55C8.13 7.35 6 9.84 6 13c0 1.79.79 3.4 2.04 4.5-.04-.34-.23-1.88 1.13-3.22L12 11.5l2.83 2.78c1.35 1.33 1.17 2.86 1.13 3.21v.01A5.982 5.982 0 0 0 18 13c0-1.65-.66-3.22-1.8-4.35z" opacity=".3"></path><path d="m12 14.31-1.42 1.4c-.38.36-.58.84-.58 1.35 0 1.07.9 1.94 2 1.94s2-.87 2-1.94c0-.51-.2-.99-.57-1.36L12 14.31z" opacity=".3"></path><path d="m16 6-.44.55c-.42.52-.98.75-1.54.75C13 7.3 12 6.52 12 5.3V2S4 6 4 13c0 4.42 3.58 8 8 8s8-3.58 8-8c0-2.96-1.61-5.62-4-7zm-4 13c-1.1 0-2-.87-2-1.94 0-.51.2-.99.58-1.36L12 14.3l1.43 1.4c.37.37.57.85.57 1.36 0 1.07-.9 1.94-2 1.94zm3.96-1.5c.04-.36.22-1.89-1.13-3.22L12 11.5l-2.83 2.78C7.81 15.62 8 17.16 8.04 17.5A5.982 5.982 0 0 1 6 13c0-3.16 2.13-5.65 4.03-7.25a4.024 4.024 0 0 0 3.99 3.55c.78 0 1.54-.23 2.18-.66A6.175 6.175 0 0 1 18 13c0 1.79-.79 3.4-2.04 4.5z"></path></svg>
                <span style="margin-left: 7px;"><span class="text-white">HOT </span><span class="text-color">SLOT GAMES</span></span>
                <div class="wrapper-line">
                    <div class="line"></div>
                </div>
                <a href="/slots-provider">LIHAT SEMUA GAME</a>
            </div>
            
            <div class="game-items">
                @foreach($hotGames as $game)
                    @php
                        $gameUrl = "/secure/shr/playGame?gc=slot&gg=" . strtolower($game->provider_code) . "&gs=" . $game->game_code;
                    @endphp
                    
                    @auth
                        <a class="box play-game-btn" href="javascript:void(0)" data-url="{{ $gameUrl }}">
                    @else
                        <a class="box s-check-login" href="javascript:void(0)">
                    @endauth
                            <div class="box-item">
                                <span><button class="main-btn">Main</button></span>
                                <picture>
                                    <img src="{{ $game->game_image }}" alt="{{ $game->game_name }}" loading="lazy" style="width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: inherit;" onerror="this.src='{{ asset('assets/custom/img/default.png') }}'">
                                </picture>
                            </div>
                            <span>{{ $game->game_name }}</span>
                        </a>
                @endforeach
            </div>
        </div>

        <div class="home-games">
            <div class="title">
                <svg viewBox="0 0 24 24" style="width: 30px; height: 30px; overflow: visible; opacity: 1; z-index: 1; fill: rgb(206, 206, 206);"><path fill="none" d="M0 0h24v24H0z"></path><path opacity=".3" d="m11 8.89.94 3.11h2.82l-2.27 1.62.93 3.01L11 14.79l-2.42 1.84.93-3.01L7.24 12h2.82z"></path><path d="m11 8.89.94 3.11h2.82l-2.27 1.62.93 3.01L11 14.79l-2.42 1.84.93-3.01L7.24 12h2.82L11 8.89zM8.58 10H1l6.17 4.41L4.83 22 11 17.31 17.18 22l-2.35-7.59L21 10h-7.58L11 2l-2.42 8zm12.78 12-1.86-6.01L23.68 13h-3.44l-3.08 2.2 1.46 4.72L21.36 22zM17 8l-1.82-6-1.04 3.45.77 2.55H17z"></path></svg>
                <span style="margin-left: 10px;"><span class="text-white">POPULAR </span><span class="text-color">GAMES</span></span>
                <div style="flex:1"></div>
            </div>
            
            <div class="game-items">
                @foreach($popularGames as $game)
                    @php
                        $gameUrl = "/secure/shr/playGame?gc=slot&gg=" . strtolower($game->provider_code) . "&gs=" . $game->game_code;
                    @endphp

                    @auth
                        <a class="box play-game-btn" href="javascript:void(0)" data-url="{{ $gameUrl }}">
                    @else
                        <a class="box s-check-login" href="javascript:void(0)">
                    @endauth
                            <div class="box-item">
                                <span><button class="main-btn">Main</button></span>
                                <picture>
                                    <img src="{{ $game->game_image }}" alt="{{ $game->game_name }}" loading="lazy" style="width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: inherit;" onerror="this.src='{{ asset('assets/custom/img/default.png') }}'">
                                </picture>
                            </div>
                            <span>{{ $game->game_name }}</span>
                        </a>
                @endforeach
            </div>
        </div>
    </div>
</section>

<section class="services">
    <div class="wrapper">
        <div class="box">
            <h4><span class="text-color">KELEBIHAN </span><span class="text-white">LAYANAN</span></h4>
            <div class="box-item">
                <div class="deposit-withdraw">
                    <div class="card">
                        <div class="card-header">
                            <div class="circle-wrp">
                                <div class="ring">
                                    <img src="https://d1bkaj2gcjb1cb.cloudfront.net/common/assets/images/v2/icon-deposit.png" width="240" height="240" alt="proses depo" class="icon" loading="lazy">
                                </div>
                            </div>
                            <div class="text-wrp">
                                <div class="text-row">
                                    <div>
                                        <div class="text-bg title">PROSES DEPOSIT</div>
                                        <div>Waktu rata-rata</div>
                                    </div>
                                    <div class="text-time-new"><span>1</span> mins</div>
                                </div>
                                <div class="progress">
                                    <div class="progress-bar" style="width: 10%;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-header">
                            <div class="circle-wrp">
                                <div class="ring">
                                    <img src="https://d1bkaj2gcjb1cb.cloudfront.net/common/assets/images/v2/icon-withdraw.png" width="240" height="240" alt="proses wd" class="icon" loading="lazy">
                                </div>
                            </div>
                            <div class="text-wrp">
                                <div class="text-row">
                                    <div>
                                        <div class="text-bg title">PROSES WITHDRAW</div>
                                        <div>Waktu rata-rata</div>
                                    </div>
                                    <div class="text-time-new"><span>3</span> mins</div>
                                </div>
                                <div class="progress">
                                    <div class="progress-bar" style="width: 30%;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <span class="text-note">* waktu proses selama bank online dan tidak gangguan</span>
                </div>
            </div>
        </div>
        <div class="box half">
            <h4><span class="text-color">Download </span><span class="text-white">Apps</span></h4>
            <div class="box-item download">
                <picture>
                    <source srcset="https://d1bkaj2gcjb1cb.cloudfront.net/common/assets/images/v2/download-apps.webp" type="image/webp">
                    <img src="https://d1bkaj2gcjb1cb.cloudfront.net/common/assets/images/v2/download-apps.png" width="436" height="208" alt="Phone Logo" loading="lazy">
                </picture>
                <a href="https://www.tsduvaay.store/d.html?a=mtr" data-apkpath="/d.html?a=mtr" title="Download for Android app" target="_blank">
                    <img src="https://d1bkaj2gcjb1cb.cloudfront.net/common/assets/images/android-btn.png" width="208" height="53" alt="Aplikasi Mobile" loading="lazy">
                </a>
            </div>
        </div>
        <div class="box end">
            <h4><span class="text-color">Layanan </span><span class="text-white">Member</span></h4>
            <div class="box-item member-service">
                <div class="swiper swiper-container swiper-container-initialized swiper-container-horizontal">
                    <div class="swiper-wrapper" style="transition-duration: 400ms; transform: translate3d(-361px, 0px, 0px);">
                        @forelse($contactChunks as $chunk)
                            <div class="swiper-slide" style="width: 353px; margin-right: 8px;">
                                @foreach($chunk as $c)
                                    <a href="{{ $c->url }}" target="_blank" rel="noopener noreferrer nofollow">
                                        <i class="fab fa-whatsapp"></i><span>{{ $c->title }}</span>
                                    </a>
                                @endforeach
                            </div>
                        @empty
                            <div class="swiper-slide" style="width: 353px; margin-right: 8px;">
                                <a href="https://api.whatsapp.com/send?phone=6285213654294" target="_blank" rel="noopener noreferrer nofollow"><i class="fab fa-whatsapp"></i><span>6285213654294</span></a>
                                <a href="http://line.me/ti/p/~MANTRA88ID" target="_blank" rel="noopener noreferrer nofollow"><i class="fab fa-line"></i><span>MANTRA88ID</span></a>
                                <a href="https://www.facebook.com/groups/forummantra" target="_blank" rel="noopener noreferrer nofollow"><i class="fab fa-facebook"></i><span>groups/forummantra</span></a>
                                <a href="https://t.me/Mantra88_official" target="_blank" rel="noopener noreferrer nofollow"><i class="fab fa-telegram"></i><span>@Mantra88_official</span></a>
                                <a href="https://www.instagram.com/mantra88_management" target="_blank" rel="noopener noreferrer nofollow"><i class="fab fa-instagram"></i><span>@mantra88_management</span></a>
                            </div>
                            <div class="swiper-slide" style="width: 353px; margin-right: 8px;">
                                <a href="https://twitter.com/Mantra88___" target="_blank" rel="noopener noreferrer nofollow"><i class="fab fa-twitter"></i><span>@Mantra88___</span></a>
                                <a href="weixin://dl/chat?MANTRA88ID" target="_blank" rel="noopener noreferrer nofollow"><i class="fab fa-weixin"></i><span>MANTRA88ID</span></a>
                            </div>
                        @endforelse
                    </div>
                    <div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-bullets-dynamic" style="width: 80px;"><span class="swiper-pagination-bullet swiper-pagination-bullet-active-prev" tabindex="0" role="button" aria-label="Go to slide 1" style="left: -8px;"></span><span class="swiper-pagination-bullet swiper-pagination-bullet-active swiper-pagination-bullet-active-main" tabindex="0" role="button" aria-label="Go to slide 2" style="left: -8px;"></span></div>
                <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div>
            </div>
        </div>
    </div>
</section>
<section class="payment-method">
    <div class="wrapper">
        <div class="box">
            <div class="box-item">
                <div class="box-row-title">
                    <p class="box-title">
                        <svg xmlns="http://www.w3.org/2000/svg" style="width: 24px; height: 24px; overflow: visible;margin-right: 10px;" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"></path><path d="M17 6H3v8h14V6zm-7 7c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z" opacity=".3"></path><path d="M17 4H3c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zM3 14V6h14v8H3z"></path><path d="M10 7c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3zm13 0v11c0 1.1-.9 2-2 2H4v-2h17V7h2z"></path></svg>
                        <span class="text-white">METODE </span>&nbsp;<span class="text-color">PEMBAYARAN</span>
                    </p>
                </div>
                <hr class="box-hr">
                <div class="list-wrapper">
                    <button class="button-pay">
                        <picture>
                            <source srcset="https://d1bkaj2gcjb1cb.cloudfront.net/common/assets/images/v2/icon-bank-transfer.webp" type="image/webp">
                            <img src="https://d1bkaj2gcjb1cb.cloudfront.net/common/assets/images/v2/icon-bank-transfer.png" width="128" height="128" alt="transfer manual" class="icon" loading="lazy">
                        </picture>
                        <div class="text">
                            <p class="text-title">BANK TRANSFER</p>
                            <p class="text-description">SEMUA BANK LOKAL</p>
                        </div>
                    </button>
                    <button class="button-pay">
                        <picture>
                            <source srcset="https://d1bkaj2gcjb1cb.cloudfront.net/common/assets/images/v2/icon-ewallet.png" type="image/webp">
                            <img src="https://d1bkaj2gcjb1cb.cloudfront.net/common/assets/images/v2/icon-ewallet.png" width="128" height="128" alt="dompet elektronik" class="icon" loading="lazy">
                        </picture>
                        <div class="text">
                            <p class="text-title">E - WALLET</p>
                            <p class="text-description">SEMUA E-WALLET &amp; QRIS</p>
                        </div>
                    </button>
                    <button class="button-pay">
                        <picture>
                            <source srcset="https://d1bkaj2gcjb1cb.cloudfront.net/common/assets/images/v2/icon-pulsa.png" type="image/webp">
                            <img src="https://d1bkaj2gcjb1cb.cloudfront.net/common/assets/images/v2/icon-pulsa.png" width="128" height="128" alt="pulsa provider" class="icon" loading="lazy">
                        </picture>
                        <div class="text">
                            <p class="text-title">PULSA</p>
                            <p class="text-description">SEMUA PROVIDER PULSA</p>
                        </div>
                    </button>
                    <div class="information-pay">
                        <div class="text">
                            <p class="text-title">SUPPORTED</p>
                            <p class="text-description">BROWSERS</p>
                        </div>
                        <img src="https://d1bkaj2gcjb1cb.cloudfront.net/common/assets/images/v2/icon-browser1.png" width="41" height="40" alt="chrome" class="icon" loading="lazy">
                        <img src="https://d1bkaj2gcjb1cb.cloudfront.net/common/assets/images/v2/icon-browser2.png" width="41" height="40" alt="firefox" class="icon" loading="lazy">
                        <img src="https://d1bkaj2gcjb1cb.cloudfront.net/common/assets/images/v2/icon-browser3.png" width="41" height="40" alt="edge" class="icon" loading="lazy">
                    </div>
                    <div class="information-pay">
                        <div class="text">
                            <p class="text-title">RESPONSIBLE</p>
                            <p class="text-description">GAMING</p>
                        </div>
                        <img src="https://d1bkaj2gcjb1cb.cloudfront.net/common/assets/images/v2/icon-18+.png" alt="under 18+" width="144" height="143" class="icon" loading="lazy">
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>