/* Add custom Js styles below */ 
document.addEventListener("DOMContentLoaded", function() {
  const elements = document.querySelectorAll("section.s-block");
  
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      entry.target.classList.toggle("show", entry.isIntersecting);
    });
  }, { threshold: 0.2 }); 

  elements.forEach(el => observer.observe(el));
});
const font = new FontFace("Ubuntu Arabic", "url('https://files.catbox.moe/ey2tx0.ttf')");

font.load().then(function(loadedFont) {
  document.fonts.add(loadedFont);
  document.body.style.fontFamily = "'Ubuntu Arabic', sans-serif";
});
// إنشاء الزر + دائرة التقدم
let btnWrapper = document.createElement("div");
btnWrapper.id = "scrollToTopWrapper";
btnWrapper.innerHTML = `
  <svg class="progress-circle" width="60" height="60">
    <circle cx="30" cy="30" r="26" stroke="#ccc" stroke-width="4" fill="none"/>
    <circle id="progressRing" cx="30" cy="30" r="26" stroke="#3e2723" stroke-width="4" fill="none"
      stroke-linecap="round" transform="rotate(-90 30 30)" stroke-dasharray="163.36" stroke-dashoffset="163.36"/>
  </svg>
  <button id="scrollToTopBtn" title="اطلع فوق">↑</button>
`;
document.body.appendChild(btnWrapper);

// ستايل الزر والدائرة
let style = document.createElement("style");
style.innerHTML = `
  #scrollToTopWrapper {
    position: fixed;
    bottom: 40px;
    right: 20px;
    width: 55px;
    height: 55px;
    z-index: 9999;
  }
  .progress-circle {
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(0deg);
  }
  #scrollToTopBtn {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #3e2723, #2c1810); /* بني غامق */
    color: #f5f5dc; /* بيج فاتح */
    border: 2px solid #f5f5dc;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    display: none;
    z-index: 2;
    transition: all 0.3s ease;
    box-shadow: 0 0 15px rgba(62, 39, 35, 0.4);
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
  }
  #scrollToTopBtn:hover {
    background: linear-gradient(135deg, #f5f5dc, #e0d6c6); /* بيج فاتح */
    color: #3e2723; /* بني غامق */
    box-shadow: 0 0 20px rgba(62, 39, 35, 0.5);
    transform: translateY(-2px);
    border-color: #3e2723;
  }
`;
document.head.appendChild(style);

// وظيفة التمرير وتغيير السهم
window.addEventListener("scroll", () => {
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  const percent = scrollTop / scrollHeight;

  // حساب نسبة التقدم وتطبيقها على الدائرة
  const circle = document.getElementById("progressRing");
  const radius = circle.r.baseVal.value;
  const circumference = 2 * Math.PI * radius;
  const offset = circumference - percent * circumference;
  circle.style.strokeDashoffset = offset;

  const btn = document.getElementById("scrollToTopBtn");
  btn.style.display = (scrollTop > 100) ? "block" : "none";
});

// عند الضغط على الزر
document.getElementById("scrollToTopWrapper").addEventListener("click", () => {
  window.scrollTo({
    top: 0,
    behavior: "smooth"
  });
});

// إضافة مكتبة Font Awesome
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css';
document.head.appendChild(link);

// JavaScript لإضافة الأيقونات
const contactIcon = document.createElement('div');
contactIcon.className = 'contact-icon';
contactIcon.innerHTML = '<i class="fas fa-comments icon"></i>'; // أيقونة التواصل
document.body.appendChild(contactIcon);

const contactOptions = document.createElement('div');
contactOptions.className = 'contact-options';
contactOptions.innerHTML = `
    <a href="https://wa.me/966508022250" target="_blank"><i class="fab fa-whatsapp icon"></i></a>
    <a href="tel:+966508022250"><i class="fas fa-phone icon"></i></a>
`;
document.body.appendChild(contactOptions);

contactIcon.onclick = function() {
    contactOptions.style.display = contactOptions.style.display === 'none' || contactOptions.style.display === '' ? 'block' : 'none';
};

document.addEventListener("DOMContentLoaded", () => {
  const oldImg = document.querySelector(
    '.s-block--fixed-banner img[src="https://cdn.salla.sa/form-builder/1GHvDD2Y4S7vXWiPdY9hoJs4NSvO3bEkryP6GjSa.png"]'
  );

  if (oldImg) {
    const video = document.createElement("video");
    video.src = "https://files.catbox.moe/g75pmq.webm";
    video.autoplay = true;
    video.loop = true;
    video.muted = true;
    video.playsInline = true; // مهم للجوال
    video.style.width = oldImg.style.width || "100%";
    video.style.height = oldImg.style.height || "auto";

    // استبدال العنصر
    oldImg.parentNode.replaceChild(video, oldImg);
  }
});