// إنشاء الزر + دائرة التقدم------------------
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="#fff" stroke-width="4" fill="none"/>
    <circle id="progressRing" cx="30" cy="30" r="26" stroke="#e0c499" 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: #043977;  /* بني غامق */
    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: #043977;  /* بني أفتح عند الهوفر */
  }
`;
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 = "#043977"; // لما نكون فوق - السهم يبقى بني غامق
  } else {
    btn.style.color = "white";   // لما ننزل - السهم أبيض
  }
});

// عند الضغط على الزر
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/+966536963949" target="_blank"><i class="fab fa-whatsapp icon"></i></a>
    <a href="tel:+966536963949"><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';
};


// -------------------------------إعدادات اللوجو

const brandConfig = {
  logoUrl: 'https://cdn.salla.sa/cdn-cgi/image/fit=scale-down,width=400,height=400,onerror=redirect,format=auto/OqzeQR/pJKAQo8rDLZTfhbfh2WZL6YJQClVKpVvRShFDh7p.png', 
  logoWidth: '200px',
  navbarSelector: 'nav, .navbar, header', 
  backgroundColor: '#ffffff',
};


function createBrandSection() {
  const section = document.createElement('div');
  section.id = 'brand-section';
  section.style.cssText = `
    background: linear-gradient(to bottom, #b1d3ee, #fff); //${brandConfig.backgroundColor};

    padding: 50px 20px;
    text-align: center;
    
  `;

  section.innerHTML = `
    <div style="max-width: 900px; margin: 0 auto;">
      <img 
        src="${brandConfig.logoUrl}" 
        alt="Brand Logo"
        style="width: ${brandConfig.logoWidth}; height: auto; margin: 0 auto 30px auto; display: block; border-radius: 10px;"
      >
      <div id="brand-description" style="color: #023e80; font-size: 1.1em; line-height: 1.8; font-weight: bold;
;">
       <p> مرحبًا بكم في هندام رايق للأزياء ✨</p> 
حيث يلتقي الذوق الراقي مع أحدث صيحات الموضة.
اكتشف تشكيلتنا المميزة من الأزياء التي تعكس أناقتك وتمنحك الثقة في كل إطلالة.
      </div>
    </div>
  `;

  return section;
}


function insertAfterNavbar() {
  const navbar = document.querySelector(brandConfig.navbarSelector);
  
  if (!navbar) {
    console.warn('Navbar not found! Adding to body start.');
    document.body.insertBefore(createBrandSection(), document.body.firstChild);
    return;
  }

  const section = createBrandSection();
  navbar.parentNode.insertBefore(section, navbar.nextSibling);
}


if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', insertAfterNavbar);
} else {
  insertAfterNavbar();
}