/* 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";
});

// إضافة مكتبة 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/966507074450" target="_blank"><i class="fab fa-whatsapp icon"></i></a>
    <a href="tel:+966507074450"><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="#333333" stroke-width="4" fill="none"/>
    <circle id="progressRing" cx="30" cy="30" r="26" stroke="#ff6600" 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, #1a1a1a, #2d2d2d);
    color: #ff6600;
    border: 2px solid #ff6600;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    display: none;
    z-index: 2;
    transition: all 0.3s ease;
    box-shadow: 0 0 15px rgba(255, 102, 0, 0.3);
    text-shadow: 0 0 5px rgba(255, 102, 0, 0.5);
  }
  #scrollToTopBtn:hover {
    background: linear-gradient(135deg, #ff6600, #e65100);
    color: #ffffff;
    box-shadow: 0 0 20px rgba(255, 102, 0, 0.5);
    transform: translateY(-2px);
    border-color: #e65100;
  }
`;
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";

  // تغيير لون السهم (يكون دايمًا برتقالي متوافق مع الهوية)
  btn.style.color = "#ff6600";
  btn.style.background = "linear-gradient(135deg, #1a1a1a, #2d2d2d)";
});

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



const sections = {
  "ملابس نسائية": "https://style-fit.shop/%D9%85%D9%84%D8%A7%D8%A8%D8%B3-%D9%86%D8%B3%D8%A7%D8%A6%D9%8A%D8%A9/c91639666",
  "ملابس رياضية نسائية": "https://style-fit.shop/%D9%85%D9%84%D8%A7%D8%A8%D8%B3-%D8%B1%D9%8A%D8%A7%D8%B6%D9%8A%D8%A9-%D9%86%D8%B3%D8%A7%D8%A6%D9%8A%D8%A9/c1465085555",
  "ملابس رجالية": "https://style-fit.shop/%D9%85%D9%84%D8%A7%D8%A8%D8%B3-%D8%B1%D8%AC%D8%A7%D9%84%D9%8A%D8%A9/c557419900",
  "ملابس رجالية رياضية": "https://style-fit.shop/%D9%85%D9%84%D8%A7%D8%A8%D8%B3-%D8%B1%D8%AC%D8%A7%D9%84%D9%8A%D8%A9-%D8%B1%D9%8A%D8%A7%D8%B6%D9%8A%D9%87/c1929817213",
  "أحذية رياضية رجالية": "https://style-fit.shop/%D8%A7%D8%AD%D8%B0%D9%8A%D9%87-%D8%B1%D9%8A%D8%A7%D8%B6%D9%87-%D8%B1%D8%AC%D8%A7%D9%84%D9%8A%D9%87/c1289997182",
  "أحذية رياضية نسائية": "https://style-fit.shop/%D8%A7%D8%AD%D8%B0%D9%8A%D9%87-%D8%B1%D9%8A%D8%A7%D8%B6%D9%8A%D9%87-%D9%86%D8%B3%D8%A7%D8%A6%D9%8A%D9%87/c516483711"
};

function showSectionPopup( ) {
  if (document.getElementById("section-popup")) return;

  const wrapper = document.createElement("div");
  wrapper.id = "section-popup";
  wrapper.innerHTML = `
    <div class="popup-overlay">
      <div class="popup-content">
        <h2>Welcome to your place</h2>
        <p>أقسامنا</p>
        <div class="popup-buttons">
          ${Object.entries(sections).map(([label, link]) => `
            <button onclick="goToSection('${link}')">${label}</button>
          `).join('')}
        </div>
        <hr>
        <button onclick="closePopupWithoutChoice()" class="popup-close-btn">لا اريد التصفح بنفسي </button>
      </div>
    </div>
  `;
  document.body.appendChild(wrapper);
}

function goToSection(link) {
  localStorage.setItem('preferredSection', link);
  localStorage.removeItem('declinedSectionChoice');
  sessionStorage.setItem('popupShownThisSession', 'true');
  location.href = link;
}

function closePopupWithoutChoice() {
  localStorage.setItem('declinedSectionChoice', 'yes');
  localStorage.removeItem('preferredSection');
  sessionStorage.setItem('popupShownThisSession', 'true');
  
  const popup = document.getElementById('section-popup');
  if (popup) {
    popup.classList.add('fading-out');
    setTimeout(() => {
        popup.remove();
        addChangeButton();
    }, 300);
  }
}

function addChangeButton() {
  if (!localStorage.getItem('preferredSection') && !localStorage.getItem('declinedSectionChoice')) {
    return;
  }
  if (document.getElementById("change-btn")) return;

  const btn = document.createElement('button');
  btn.id = "change-btn";
  btn.innerText = getChangeButtonText();
  btn.onclick = showSectionPopup;
  document.body.appendChild(btn);
}

function getChangeButtonText() {
  return localStorage.getItem('preferredSection') ? "تحب تغير القسم؟" : " تريد قسم محدد؟";
}

window.addEventListener("load", () => {
  const isHomePage = window.location.pathname === '/';
  const isRefresh = window.performance.getEntriesByType("navigation")[0].type === 'reload';

  if (isRefresh && isHomePage) {
    sessionStorage.removeItem('popupShownThisSession');
  }

  const shouldShowPopup = !sessionStorage.getItem('popupShownThisSession');

  if (shouldShowPopup) {
    if (isHomePage) {
        const changeBtn = document.getElementById('change-btn');
        if (changeBtn) changeBtn.remove();
        
        setTimeout(showSectionPopup, 1000);
    } else {
        addChangeButton();
    }
  } else {
    addChangeButton();
  }
});


//  -اختيار كل العناصر ال ليها نفس الكلاس -إظهار النص كانه بيتكتب  

document.addEventListener("DOMContentLoaded", function () {
  const elements = document.querySelectorAll(".s-block--features__item p");

  elements.forEach((el) => {
    const fullText = el.textContent.trim();
    el.textContent = ""; // نفرّغ النص مؤقتًا

    let i = 0;
    let isDeleting = false;

    function typeEffect() {
      if (!isDeleting) {
        el.textContent = fullText.substring(0, i + 1);
        i++;
        if (i === fullText.length) {
          isDeleting = true;
          setTimeout(typeEffect, 1500); // وقت التوقف بعد الكتابة
          return;
        }
      } else {
        el.textContent = fullText.substring(0, i - 1);
        i--;
        if (i === 0) {
          isDeleting = false;
        }
      }

      const delay = isDeleting ? 50 : 100; // سرعة الحذف أسرع من الكتابة
      setTimeout(typeEffect, delay);
    }

    typeEffect();
  });
});



//عنصر واحد


document.addEventListener("DOMContentLoaded", function () {
  const el = document.querySelector(".s-block__title h2"); // ← غيري الكلاس حسب اللي عندك
  if (!el) return;

  const fullText = el.textContent.trim();
  el.textContent = ""; // نفرغ النص مؤقتًا
  let i = 0;
    let isDeleting = false;

    function typeEffect() {
      if (!isDeleting) {
        el.textContent = fullText.substring(0, i + 1);
        i++;
        if (i === fullText.length) {
          isDeleting = true;
          setTimeout(typeEffect, 1500); // وقت التوقف بعد الكتابة
          return;
        }
      } else {
        el.textContent = fullText.substring(0, i - 1);
        i--;
        if (i === 0) {
          isDeleting = false;
        }
      }

      const delay = isDeleting ? 50 : 100; // سرعة الحذف أسرع من الكتابة
      setTimeout(typeEffect, delay);
    }

    typeEffect();
 
});

const logo = document.querySelector(".navbar-brand img"); 

logo.src = "https://i.postimg.cc/0j5GQNJW/Artboard-28.png";