/* Add custom JS code below */ 
(function () {
    const text = 'كود خصم لاول طلب من المتجر A10';
    const bgColor = '#f3c284';
    const textColor = '#000000';
    const repeatCount = 15;
    const animDuration = '5s';

    const liItems = Array(repeatCount).fill(`
        <li style="animation-duration: ${animDuration};">
            <a href="" style="color: ${textColor}" aria-label="Promotion Text">${text}</a>
        </li>
    `).join('');

    const wrapper = document.createElement('div');
    wrapper.className = 'promotion-banner-wrapper';
    wrapper.innerHTML = `
        <div class="promotion-banner" style="background-color: ${bgColor}">
            <div class="promotion-banner__inner">
                <ul>${liItems}</ul>
            </div>
        </div>
    `;

    const style = document.createElement('style');
    style.textContent = `
        .promotion-banner { padding: 5px 0; position: relative; }
        .promotion-banner ul {
            display: flex;
            list-style: none;
            margin: 0;
            padding: 5px 0;
            white-space: nowrap;
        }
        .promotion-banner ul li {
            animation-iteration-count: infinite;
            animation-timing-function: linear;
            animation-name: marquee-rtl;
            direction: rtl;
        }
        .promotion-banner ul li a {
            padding: 0 15px;
            font-size: 14px;
            font-weight: 600;
            text-decoration: none;
            white-space: nowrap;
        }
        .promotion-banner ul:hover li {
            animation-play-state: paused;
        }
        .promotion-banner__inner {
            overflow: hidden;
        }
        @keyframes marquee-rtl {
            to { transform: translateX(100%); }
        }
    `;
    document.head.appendChild(style);

    const topNavbar = document.querySelector('.top-navbar');
    if (topNavbar) {
        topNavbar.parentNode.insertBefore(wrapper, topNavbar);
    }
})();