/* 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="#f2dede" stroke-width="4" fill="none"/>
    <circle id="progressRing" cx="30" cy="30" r="26" stroke="#d4af37" 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, #fff0f5, #fce4ec); /* وردي فاتح */
    color: #d4af37; /* دهبي */
    border: 2px solid #d4af37;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    display: none;
    z-index: 2;
    transition: all 0.3s ease;
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
    text-shadow: 0 0 5px rgba(212, 175, 55, 0.5);
  }
  #scrollToTopBtn:hover {
    background: linear-gradient(135deg, #d4af37, #f9d77e); /* دهبي أفتح */
    color: #ffffff;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.6);
    transform: translateY(-2px);
    border-color: #b8941f;
  }
`;
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/1234567890" target="_blank"><i class="fab fa-whatsapp icon"></i></a>
    <a href="tel:+1234567890"><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';
};