/* Add custom Js styles below */ 
const videos = [
  { section: 1, src: "https://files.catbox.moe/38udlm.mp4" },
  { section: 5, src: "https://files.catbox.moe/s48zm9.mp4" },
  { section: 11, src: "https://files.catbox.moe/sng066.mp4" },

];

videos.forEach((item) => {
  const img = document.querySelector(
    `section:nth-of-type(${item.section}) .container img`
  );

  if (img) {
    // نسخة احتياطية من الصورة
    const fallbackImg = img.cloneNode(true);

    // إنشاء الفيديو
    const video = document.createElement("video");
    video.src = item.src;
    video.autoplay = true;
    video.loop = true;
    video.muted = true;
    video.controls = false;
    video.playsInline = true;
    video.preload = "auto";

    // ستايل الفيديو
    video.style.width = "100%"; // العرض كامل
    video.style.height = "auto"; // الطول متناسب تلقائياً
    video.style.maxHeight = "100%"; // ما يطلعش برا الكونتينر
    video.style.objectFit = "contain";
    video.style.display = "block";

    // استبدال الصورة بالفيديو
    img.replaceWith(video);

    // تشغيل الفيديو أو إرجاع الصورة لو حصل خطأ
    video.addEventListener("loadeddata", () => {
      video.play().catch(() => {
        video.replaceWith(fallbackImg);
      });
    });

    video.addEventListener("error", () => {
      video.replaceWith(fallbackImg);
    });
  }
});



/*document.addEventListener('contextmenu', function(event) {
event.preventDefault();
alert('🤔🤔🤔🤔');
});

document.addEventListener('selectstart', function(event) {
event.preventDefault();
});*/











/*

document.addEventListener("DOMContentLoaded", function () {
  // التحقق إذا ظهرت الرسالة من قبل
  if (!sessionStorage.getItem("welcomeShown")) {

    // إنشاء الرسالة
    const welcome = document.createElement("div");
    welcome.id = "welcome-message";
    welcome.innerHTML = `
      🌟 أهلاً وسهلاً بك في متجرنا! 🌟<br>
      نسعد كثيراً بزيارتك ونتمنى لك تجربة تسوق ممتعة مليئة بالعروض والمنتجات المميزة❤️
    `;
    document.body.appendChild(welcome);

    // إضافة CSS من داخل JS
    const style = document.createElement("style");
    style.innerHTML = `
      #welcome-message {
        position: fixed;
        top: 15%;
        left: 50%;
        transform: translateX(-50%);
        background: linear-gradient(90deg, var(--color-primary-dark),var(--1), var(--color-primary-light));
        color: #000000;
        padding: 20px 30px;
        border-radius: 15px;
        font-size: 18px;
        font-family: Arial, sans-serif;
        text-align: center;
        z-index: 10000;
        box-shadow: 0 4px 20px rgba(0,0,0,0.3);
        animation: fadeIn 0.5s ease;
      }
      @keyframes fadeIn {
        from { opacity: 0; transform: translate(-50%, -20%); }
        to { opacity: 1; transform: translate(-50%, 0); }
      }
    `;
    document.head.appendChild(style);

    // إخفاء الرسالة بعد 3 ثوانٍ
    setTimeout(() => {
      welcome.remove();
    }, 3500);

    // حفظ أنه تم عرض الرسالة
    sessionStorage.setItem("welcomeShown", "true");
  }
});


*/



var shopFloat = document.createElement('div');
shopFloat.className = 'shop-float';

var shopButton = document.createElement('button');
shopButton.className = 'shop-button';

// إنشاء صورة بدلاً من الإيموجي
var shopIcon = document.createElement('img');
shopIcon.src = 'https://cdn.salla.sa/form-builder/z1JymTh5pnbe7Fyks7JqSNOdFHcIgkgOrSYwOC3N.webp'; // رابط الصورة
shopIcon.className = 'shop-icon';
shopButton.appendChild(shopIcon);

var shopMenu = document.createElement('div');
shopMenu.className = 'shop-menu';
shopMenu.innerHTML = `
    <a href="https://noltx.store/%D8%A7%D9%83%D8%B3%D8%B3%D9%88%D8%A7%D8%B1%D8%A7%D8%AA-%D8%A7%D9%84%D9%82%D9%8A%D9%85%D9%86%D9%82/c2099533678">  إكسسوارات القيمنق 🕹️</a>
    
    <a href="https://noltx.store/%D9%85%D8%A7%D9%88%D8%B3%D8%A7%D8%AA/c418354536">   ماوسات 🖱️ </a>
    
    <a href="https://noltx.store/%D9%83%D9%8A%D8%A8%D9%88%D8%B1%D8%AF%D8%A7%D8%AA/c1790227561">   كيبوردات ⌨️</a> 
    
    <a href="https://noltx.store/%D8%B3%D9%85%D8%A7%D8%B9%D8%A7%D8%AA/c1150407530">     سماعات 🎧</a>
    
    <a href="https://noltx.store/%D8%A7%D8%B6%D8%A7%D8%A1%D8%A7%D8%AA/c377418347">    إضاءات 💡</a>
    
      <a href="https://noltx.store/%D8%A8%D8%B7%D8%A7%D9%82%D8%A7%D8%AA-%D8%A7%D8%B4%D8%AA%D8%B1%D8%A7%D9%83/c1616580980">    بطاقات اشتراك 🎟️</a>

`;

shopButton.addEventListener('click', function() {
    shopMenu.classList.toggle('visible');
});

// 🎤 دالة تنظيف النص من الإيموجي
function cleanText(text) {
  return text.replace(/[\p{Emoji_Presentation}\p{Extended_Pictographic}]/gu, "").trim();
}


// حدث لكل رابط لقراءة النص بدون إيموجي
shopMenu.querySelectorAll('a').forEach(link => {
    link.addEventListener('click', function(event) {
        event.preventDefault();
        let text = this.textContent.replace(/[\u{1F300}-\u{1F6FF}\u{1F900}-\u{1F9FF}\u{2600}-\u{26FF}\u{2700}-\u{27BF}]/gu, '').trim();
        
        let msg = new SpeechSynthesisUtterance(`تم اختيار قسم ${text}`);
        msg.lang = 'ar-SA';
        msg.rate = 1;
        msg.pitch = 1;
        window.speechSynthesis.cancel(); // إيقاف أي قراءة سابقة
        window.speechSynthesis.speak(msg);

        // بعد انتهاء القراءة، الانتقال للرابط
        msg.onend = () => {
            window.location.href = this.href;
        };
    });
});
shopFloat.appendChild(shopButton);
shopFloat.appendChild(shopMenu);
document.body.appendChild(shopFloat);

var style = document.createElement('style');
style.innerHTML = `
.shop-float {
    position: absolute;
    top: 450px;
    right: 0px;
    z-index: 999;
}
.shop-button {
    background: linear-gradient(90deg, var(--color-primary-dark),var(--1), var(--color-primary));
    border: none;
    border-radius: 5px 0px 0px 5px;
    padding: 3px; /* مهم حتى ما يأثر على حجم الصورة */
    width: 35px;  /* حجم الزر */
    height: 35px; /* حجم الزر */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);

}
.shop-button img {
    max-width: auto;
    max-height: auto;
    object-fit: contain;
}

.shop-menu {
    display: none;
    background: white;
    border-radius: 8px;
    margin-top: 10px;
    padding: 10px;
    text-align: right;
}
.shop-menu.visible {
    display: block;
}
.shop-menu a {
    display: block;
    padding: 5px;
    text-decoration: none;
    color: #333;
}
`;
document.head.appendChild(style);



var whatsappFloat = document.createElement('div');
whatsappFloat.className = 'whatsapp-float';

var whatsappLink = document.createElement('a');
whatsappLink.href = 'https://wa.me/+966552883506'; 
whatsappLink.target = '_blank';

var whatsappIcon = document.createElement('img');
whatsappIcon.src = 'https://play-lh.googleusercontent.com/bYtqbOcTYOlgc6gqZ2rwb8lptHuwlNE75zYJu6Bn076-hTmvd96HH-6v7S0YUAAJXoJN';
whatsappIcon.alt = 'WhatsApp';
whatsappIcon.className = 'whatsapp-icon';

whatsappLink.appendChild(whatsappIcon);
whatsappFloat.appendChild(whatsappLink);
document.body.appendChild(whatsappFloat);

var style = document.createElement('style');
style.innerHTML = `
.whatsapp-float {
  position: fixed;
  bottom: 90px;
  left: 0px;
  z-index: 100;
}

@keyframes ring-stop {
    0%, 100% { transform: rotate(0); }
    10% { transform: rotate(5deg); }
    20% { transform: rotate(-5deg); }
    30% { transform: rotate(5deg); }
    40% { transform: rotate(-5deg); }
    50% { transform: rotate(0); }
}

.whatsapp-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
    animation: ring-stop 1.5s infinite ease-in-out;
    animation-delay: 3s; /* Delay between rings */
}

.whatsapp-icon:hover {
  transform: scale(1.1);
}
`;
document.head.appendChild(style);



// إنشاء الحاوية العامة
var quickFloat = document.createElement('div');
quickFloat.className = 'quick-float';
// زر إظهار/إخفاء الآلة الحاسبة
var quickButton = document.createElement('button');
quickButton.className = 'quick-button';

// إضافة صورة داخل الزر
var iconImg = document.createElement('img');
iconImg.src = 'https://cdn.salla.sa/form-builder/xtrHbSmebWKNA7r1AO9RJEkPGGcPR8uIW82oT9FG.png'; // رابط الصورة
iconImg.alt = 'آلة حاسبة';
iconImg.style.width = '50px';    // عرض ثابت
iconImg.style.height = '50px';   // ارتفاع ثابت
iconImg.style.objectFit = 'contain'; // احتواء بدون تمدد أو قص
iconImg.style.pointerEvents = 'none'; // عشان الضغط يتم على الزر نفسه
quickButton.appendChild(iconImg);

// واجهة الآلة الحاسبة
var quickMenu = document.createElement('div');
quickMenu.className = 'quick-menu';
quickMenu.innerHTML = `
    <div class="calculator">
        <input type="text" id="calc-display" class="calc-display" disabled>
        <div class="calc-buttons">
            <button>%</button>
            <button>√</button>
            <button>^</button>
            <button>⌫</button>
            <button>7</button>
            <button>8</button>
            <button>9</button>
            <button>/</button>
            <button>4</button>
            <button>5</button>
            <button>6</button>
            <button>*</button>
            <button>1</button>
            <button>2</button>
            <button>3</button>
            <button>-</button>
            <button>0</button>
            <button>.</button>
            <button>C</button>
            <button>+</button>
            <button colspan="4">=</button>
        </div>
    </div>
`;

// التعامل مع الأزرار
quickMenu.addEventListener('click', function(e) {
    if (e.target.tagName === 'BUTTON') {
        var btn = e.target.innerText;
        var display = document.getElementById('calc-display');

        if (btn === 'C') {
            display.value = '';
        } else if (btn === '=') {
            try {
                // استبدال ^ بالقوة، و √ بالجذر
                let expression = display.value
                    .replace(/√/g, 'Math.sqrt')
                    .replace(/\^/g, '**');

                display.value = eval(expression);
            } catch {
                display.value = 'خطأ';
            }
        } else if (btn === '⌫') {
            display.value = display.value.slice(0, -1);
        } else if (btn === '%') {
            try {
                display.value = parseFloat(display.value) / 100;
            } catch {
                display.value = 'خطأ';
            }
        } else {
            display.value += btn;
        }
    }
});

// دعم الكيبورد
document.addEventListener('keydown', function(e) {
    const display = document.getElementById('calc-display');
    const allowedKeys = '0123456789+-*/().^';
    
    if (e.key === 'Enter') {
        try {
            let expression = display.value
                .replace(/√/g, 'Math.sqrt')
                .replace(/\^/g, '**');
            display.value = eval(expression);
        } catch {
            display.value = 'خطأ';
        }
    } else if (e.key === 'Backspace') {
        display.value = display.value.slice(0, -1);
    } else if (e.key === 'Escape') {
        display.value = '';
    } else if (allowedKeys.includes(e.key)) {
        display.value += e.key;
    } else if (e.key === '%') {
        try {
            display.value = parseFloat(display.value) / 100;
        } catch {
            display.value = 'خطأ';
        }
    }
});

// تجميع العناصر
quickFloat.appendChild(quickButton);
quickFloat.appendChild(quickMenu);
document.body.appendChild(quickFloat);

// الأنماط CSS
var style = document.createElement('style');
style.innerHTML = `
.quick-float {
    position: absolute;
    top: 400px;
    left: 0px;
    z-index: 9999;
}
.quick-button {
    background: linear-gradient(90deg, var(--color-primary),var(--1), var(--color-primary-dark));
    border: none;
    border-radius: 0px 5px 5px 0px;
    padding: 3px; /* مهم حتى ما يأثر على حجم الصورة */
    width: 35px;  /* حجم الزر */
    height: 35px; /* حجم الزر */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}
.quick-button img {
    max-width: auto;
    max-height: auto;
    object-fit: contain;
}

.quick-menu {
    display: none;
    background: white;
    border-radius: 8px;
    margin-top: 10px;
    padding: 15px;
    width: 260px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    direction: ltr;
}
.quick-menu.visible {
    display: block;
}
.calc-display {
    width: 100%;
    height: 40px;
    font-size: 18px;
    text-align: right;
    margin-bottom: 10px;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.calc-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
}
.calc-buttons button {
    padding: 15px;
    font-size: 18px;
    cursor: pointer;
    border: none;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--color-primary-dark),var(--1), var(--color-primary));
    transition: background 0.2s;
}
.calc-buttons button:hover {
    background: #ddd;
}
`;
document.head.appendChild(style);

// زر إظهار/إخفاء
quickButton.addEventListener('click', function() {
    quickMenu.classList.toggle('visible');
});


(function () {
  if (sessionStorage.getItem("fakeCaptchaGame")) return;

  const style = document.createElement("style");
  style.textContent = `
    .captcha-overlay {
      position: fixed;
      inset: 0;
      background: rgba(255,255,255,0.8);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 999999;
    }
    .captcha-box {
      background: #fff;
      border: 1px solid #ddd;
      border-radius: 10px;
      padding: 20px;
      text-align: center;
      font-family: sans-serif;
      box-shadow: 0 4px 15px rgba(0,0,0,0.1);
      animation: popIn 0.4s ease;
    }
    .captcha-text {
      margin-bottom: 15px;
      font-size: 16px;
    }
    .captcha-star {
      font-size: 30px;
      cursor: pointer;
      transition: transform 0.2s ease;
      display: inline-block;
    }
    .captcha-star:hover {
      transform: scale(1.2) rotate(10deg);
    }
    .fade-out {
      animation: fadeOut 0.6s forwards;
    }
    @keyframes popIn {
      from { opacity: 0; transform: scale(0.8);}
      to { opacity: 1; transform: scale(1);}
    }
    @keyframes fadeOut {
      to { opacity: 0; transform: translateY(20px);}
    }
  `;
  document.head.appendChild(style);

  const overlay = document.createElement("div");
  overlay.className = "captcha-overlay";

  const box = document.createElement("div");
  box.className = "captcha-box";

  const text = document.createElement("div");
  text.className = "captcha-text";
  text.textContent = "اضغط النجمة ✨ وخلك متأكد إنك مو روبوت";

  const star = document.createElement("div");
  star.className = "captcha-star";
  star.textContent = "✨";

  box.appendChild(text);
  box.appendChild(star);
  overlay.appendChild(box);
  document.body.appendChild(overlay);

  star.addEventListener("click", () => {
    star.textContent = "✔";
    star.style.color = "green";
    setTimeout(() => {
      overlay.classList.add("fade-out");
      setTimeout(() => overlay.remove(), 600);
      sessionStorage.setItem("fakeCaptchaGame", "1");
    }, 800);
  });
})();