/* Add custom Js code 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.1 }); 

  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";
});
// إضافة مكتبة تواصل 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/+966558463065" target="_blank"><i class="fab fa-whatsapp icon"></i></a>
    <a href="tel:+966558463065"><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';
};


// إنشاء الزر + دائرة التقدم
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="#ffffff" stroke-width="4" fill="none"/>
    <circle id="progressRing" cx="30" cy="30" r="26" stroke="#e29f10" 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: 40px;
    width: 60px;
    height: 60px;
    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-color: #ffffff;  /* بني غامق */
    color: white;               /* لون السهم، بيتغير بالجافاسكريبت */
    border: none;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    display: none;
    z-index: 2;
    transition: background-color 0.3s, color 0.3s;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);      /* ظل للزر */
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.7);      /* ظل للسهم */
  }

  #scrollToTopBtn:hover {
    background-color: #895331;  /* بني أفتح عند الهوفر */
  }
`;
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";

  // تغيير لون السهم بناءً على مكان المستخدم
  if (scrollTop <= 50) {
    btn.style.color = "#38180b"; // لما نكون فوق - السهم يبقى بني غامق
  } else {
    btn.style.color = "white";   // لما ننزل - السهم أبيض
  }
});

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