(function () {

    const OFFER_CODE = "W30";   // كود الخصم
    const HIDE_DAYS  = 2;          // عدد الأيام قبل الظهور مرة أخرى
    const STORAGE_KEY = "noteOfferHideUntil";

    const now = new Date().getTime();
    const hideUntil = localStorage.getItem(STORAGE_KEY);

    if (hideUntil && now < hideUntil) return;

    const note = document.createElement("div");
    note.className = "note-offer";

    note.innerHTML = `
        <span class="close-note">×</span>
        <h3>🎁 كود خصم خاص</h3>
        <p>انسخ الكود واستخدمه قبل انتهاء العرض</p>
        <h4> <span> %20 </span><span> خصم </span></h4>  
        <div class="offer-row">
            <span class="offer-code">${OFFER_CODE}</span>
            <button class="copy-btn">نسخ</button>
        </div>

        <small class="copy-msg">تم نسخ الكود ✔</small>
    `;

    document.body.appendChild(note);

    const style = document.createElement("style");
    style.innerHTML = `
        .note-offer {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 320px;
            background: linear-gradient(135deg, #ffffff, #f2f2f2);
            color: #333;
            padding: 22px;
            border-radius: 16px;
            box-shadow: 0 20px 50px rgba(0, 0, 0, .45);
            font-family: Arial, sans-serif;
            z-index: 9999;
            text-align: center;
            animation: popIn .4s ease;
        }

        .note-offer h3 {
            margin: 0 0 24px;
            font-size: 24px;
        }

        .note-offer p {
            margin: 0 0 20px;
            font-size: 14px;
            opacity: .9;
        }
        .note-offer h4 {
            font-size: 50px;
            margin-bottom:30px
        }
        .note-offer h4 {
            color: #DD0000
        }
        .offer-row {
            display: flex;
            gap: 8px;
            justify-content: center;
            align-items: center;
            padding-bottom: 20px;
            padding-top: 12px;
        }

        .offer-code {
            background: #c40909;
            color: #111;
            padding: 10px 14px;
            border-radius: 10px;
            font-weight: bold;
            letter-spacing: 2px;
            font-size: 16px;
            color: #FFF;
            width: 100%;
        }

        .copy-btn {
            background: #ffb703;
            border: none;
            padding: 10px 14px;
            border-radius: 10px;
            cursor: pointer;
            font-weight: bold;
        }

        .copy-btn:hover {
            opacity: .9;
        }

        .copy-msg {
            display: none;
            margin-top: 10px;
            color: #4ade80;
            font-size: 13px;
        }

        .close-note {
                position: absolute;
            top: 8px;
            left: 22px;
            cursor: pointer;
            font-size: 40px;
            color: red;
            opacity: .8;
        }

        .close-note:hover {
            opacity: 1;
        }

        @keyframes popIn {
            from {
                transform: translate(-50%, -60%) scale(.9);
                opacity: 0;
            }
            to {
                transform: translate(-50%, -50%) scale(1);
                opacity: 1;
            }
        }
    `;

    document.head.appendChild(style);

    note.querySelector(".copy-btn").addEventListener("click", function () {
        navigator.clipboard.writeText(OFFER_CODE);
        note.querySelector(".copy-msg").style.display = "block";
    });

    note.querySelector(".close-note").addEventListener("click", function () {
        const hideTime = now + (HIDE_DAYS * 24 * 60 * 60 * 1000);
        localStorage.setItem(STORAGE_KEY, hideTime);
        note.remove();
    });

})();