@if (!empty($is_frontend_home_index) && !empty($data['popup']))
    <style>
        #index-site-popup {
            --ip-bg: rgba(0, 0, 0, 0.72);
            --ip-card: #141414;
            --ip-border: rgba(255, 255, 255, 0.08);
            --ip-text: #e2e8f0;
            --ip-muted: #94a3b8;
            --ip-font: "Kanit", system-ui, sans-serif;
            /* Wider on large screens; never wider than viewport */
            --ip-max-w: min(96vw, 960px);
            /* Cap height so tall portrait images fit; works with horizontal + vertical aspect ratios */
            --ip-max-h: min(88vh, 900px, calc(100vh - 100px));
        }

        body.index-popup-open {
            overflow: hidden;
        }

        #index-site-popup * {
            box-sizing: border-box;
        }

        .index-popup-overlay {
            position: fixed;
            inset: 0;
            z-index: 10050;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
            background: var(--ip-bg);
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.35s ease, visibility 0.35s ease;
        }

        .index-popup-overlay.is-open {
            opacity: 1;
            visibility: visible;
        }

        .index-popup-overlay.is-open .index-popup-card {
            transform: translateY(0) scale(1);
        }

        .index-popup-card {
            position: relative;
            width: fit-content;
            max-width: var(--ip-max-w);
            background: var(--ip-card);
            border: 1px solid var(--ip-border);
            border-radius: 16px;
            box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
            padding: 0;
            overflow: hidden;
            font-family: var(--ip-font);
            transform: translateY(16px) scale(0.98);
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .index-popup-card img {
            display: block;
            width: auto;
            height: auto;
            max-width: var(--ip-max-w);
            max-height: var(--ip-max-h);
            object-fit: contain;
            vertical-align: top;
        }

        .index-popup-close {
            position: absolute;
            top: 12px;
            right: 12px;
            width: 40px;
            height: 40px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: none;
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.06);
            color: var(--ip-muted);
            cursor: pointer;
            transition: background 0.2s, color 0.2s;
        }

        .index-popup-close:hover {
            background: rgba(255, 255, 255, 0.12);
            color: var(--ip-text);
        }
    </style>
    <div id="index-site-popup" class="index-popup-overlay" role="dialog" aria-modal="true" aria-label="Announcement" aria-hidden="true">
        <div class="index-popup-card">
            <button type="button" class="index-popup-close" id="index-popup-close-btn" aria-label="Close">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <line x1="18" y1="6" x2="6" y2="18"></line>
                    <line x1="6" y1="6" x2="18" y2="18"></line>
                </svg>
            </button>
            @foreach ($data['popup'] as $item)
                <a href="{{ $item['url'] ?? '#' }}" @if (!empty($item['url'])) target="_blank" @endif>
                    <img src="{{ check_file($item['src']) }}" alt="{{ $item['name'] }}" loading="lazy" decoding="async">
                </a>
            @endforeach
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var root = document.getElementById('index-site-popup');
            if (!root) return;

            var closeBtn = document.getElementById('index-popup-close-btn');
            var COOKIE_NAME = 'index_banner_popup_dismiss_day';

            function pad2(n) {
                return (n < 10 ? '0' : '') + n;
            }

            function localDateKey() {
                var d = new Date();
                return d.getFullYear() + '-' + pad2(d.getMonth() + 1) + '-' + pad2(d.getDate());
            }

            function secondsUntilEndOfLocalDay() {
                var now = new Date();
                var end = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1, 0, 0, 0, 0);
                return Math.max(60, Math.floor((end - now) / 1000));
            }

            function getDismissDay() {
                var m = document.cookie.match(new RegExp('(?:^|; )' + COOKIE_NAME + '=([^;]*)'));
                return m ? decodeURIComponent(m[1].replace(/\+/g, ' ')) : '';
            }

            function rememberDismissForToday() {
                document.cookie = COOKIE_NAME + '=' + encodeURIComponent(localDateKey()) +
                    '; path=/; max-age=' + secondsUntilEndOfLocalDay() + '; SameSite=Lax';
            }

            function wasDismissedToday() {
                return getDismissDay() === localDateKey();
            }

            function openPopup() {
                root.classList.add('is-open');
                root.setAttribute('aria-hidden', 'false');
                document.body.classList.add('index-popup-open');
            }

            function closePopup() {
                root.classList.remove('is-open');
                root.setAttribute('aria-hidden', 'true');
                document.body.classList.remove('index-popup-open');
                rememberDismissForToday();
            }

            setTimeout(function() {
                if (!wasDismissedToday()) {
                    openPopup();
                }
            }, 1600);

            closeBtn.addEventListener('click', closePopup);

            root.addEventListener('click', function(e) {
                if (e.target === root) {
                    closePopup();
                    return;
                }
                var card = root.querySelector('.index-popup-card');
                var a = e.target.closest('a');
                if (card && a && card.contains(a)) {
                    closePopup();
                }
            });

            document.addEventListener('keydown', function(e) {
                if (e.key === 'Escape' && root.classList.contains('is-open')) {
                    closePopup();
                }
            });
        });
    </script>
@endif