// ✅ Offer Modal — App Download পপআপ বন্ধ হওয়ার পর দেখায়,
// ছবিগুলো আসে offer.json থেকে (root ডিরেক্টরির offer.json ফাইল
// এডিট করলেই ছবি বদলে যাবে, কোনো কোড ছোঁয়া লাগবে না)
// ✅ এখন ৫টা পর্যন্ত ছবি একটার পর একটা Slide হয়ে দেখাবে
let __offerModalShown = false;
let __offerSlideIndex = 0;
let __offerSlideTimer = null;
let __offerImages = [];

async function showOfferModal() {
    if (__offerModalShown) return; // একবারের বেশি না দেখাতে
    if (sessionStorage.getItem('offerModalShown')) return; // প্রতি Session-এ একবারই
    __offerModalShown = true;

    try {
        const res = await fetch('/offer.json');
        if (!res.ok) throw new Error('HTTP ' + res.status);
        const data = await res.json();

        // ✅ নতুন ফরম্যাট ("images": [...] অ্যারে) এবং পুরনো ফরম্যাট
        // ("image": "...") — দুটোই সাপোর্ট করা হচ্ছে, যেটাই তোমার
        // offer.json-এ থাকুক না কেন
        let rawList = [];
        if (Array.isArray(data.images) && data.images.length > 0) {
            rawList = data.images;
        } else if (data.image) {
            // পুরনো Single-Image ফরম্যাট — নতুন Format-এর মতো করে সাজিয়ে নেওয়া
            rawList = [{ image: data.image, link: data.link || '' }];
        }

        // ✅ শুধু আসল বসানো ছবিগুলোই রাখা হচ্ছে (Placeholder বাদ)
        __offerImages = rawList.filter(item =>
            item && item.image && !item.image.startsWith('YOUR_OFFER_IMAGE')
        );

        if (__offerImages.length === 0) return; // কোনো Real ছবি না থাকলে পপআপ দেখাবে না

        const body = document.getElementById('offerModalBody');
        if (!body) return;

        const bannerImg = data.banner ? `<img src="${data.banner}" style="width:100%; height:64px; object-fit:cover; object-position:center; display:block;" alt="">` : '';

        const slidesHtml = __offerImages.map((item, i) => {
            const img = `<img src="${item.image}" style="width:100%; display:block;" alt="Offer ${i + 1}">`;
            return `
                <div class="offer-slide" data-slide="${i}" style="display:${i === 0 ? 'block' : 'none'};">
                    ${item.link ? `<a href="${item.link}" style="display:block;">${img}</a>` : img}
                </div>
            `;
        }).join('');

        const dotsHtml = __offerImages.length > 1
            ? `<div style="display:flex; justify-content:center; gap:6px; padding:12px 0; background:#003c40;">
                   ${__offerImages.map((_, i) => `<span class="offer-dot" data-dot="${i}" style="width:${i === 0 ? '18px' : '7px'}; height:7px; border-radius:4px; background:${i === 0 ? '#fbbf24' : 'rgba(255,255,255,.3)'}; transition:.2s;"></span>`).join('')}
               </div>`
            : '';

        body.innerHTML = bannerImg + `<div id="offerSlidesWrap">${slidesHtml}</div>` + dotsHtml;

        const modal = document.getElementById('offerModal');
        if (modal) modal.style.display = 'flex';
        sessionStorage.setItem('offerModalShown', '1');

        __offerSlideIndex = 0;
        if (__offerImages.length > 1) {
            __offerSlideTimer = setInterval(nextOfferSlide, 2800);
        }
    } catch (e) {
        // offer.json না থাকলে বা লোড না হলে, চুপচাপ কিছু দেখাবে না
    }
}

function showOfferSlide(index) {
    const slides = document.querySelectorAll('.offer-slide');
    const dots = document.querySelectorAll('.offer-dot');
    if (slides.length === 0) return;
    __offerSlideIndex = (index + slides.length) % slides.length;

    slides.forEach((s, i) => { s.style.display = (i === __offerSlideIndex) ? 'block' : 'none'; });
    dots.forEach((d, i) => {
        d.style.width = (i === __offerSlideIndex) ? '18px' : '7px';
        d.style.background = (i === __offerSlideIndex) ? '#fbbf24' : 'rgba(255,255,255,.3)';
    });
}

function nextOfferSlide() {
    showOfferSlide(__offerSlideIndex + 1);
}

function closeOfferModal() {
    const modal = document.getElementById('offerModal');
    if (modal) modal.style.display = 'none';
    if (__offerSlideTimer) { clearInterval(__offerSlideTimer); __offerSlideTimer = null; }
}
