document.addEventListener("DOMContentLoaded", function () {
  const photosSlider = document.querySelector(".s-block.s-block--photos-slider");
  if (!photosSlider) return;

  const newSection = document.createElement("section");
  newSection.className = "custom-service-section";

newSection.innerHTML = `
  <div class="custom-container">
    
    <!-- العمود الأول -->
    <div class="custom-left">
      <div class="gif-wrapper">
        <video autoplay loop muted playsinline>
          <source src="https://files.catbox.moe/9mbj2i.mp4" type="video/mp4">
          متصفحك لا يدعم عرض الفيديو.
        </video>
      </div>
      <div class="custom-small alt">
        <h2>اكتشف الأناقة مع <span class="highlight">شيمة</span></h2>
        <p>متجر شامل يقدم أرقى صيحات الموضة للرجال والنساء والأطفال، بتصاميم عصرية وجودة عالية تناسب جميع الأذواق.</p>
        <a href="https://shaima.shop/" class="custom-btn">تسوق الآن</a>
      </div>
    </div>

    <!-- العمود الثاني -->
    <div class="custom-right">
      <!-- الصف الأول -->
      <div class="custom-row">
        <div class="custom-small">
          <strong>أناقة </strong>
          <p>ملابس عصرية تضيف لمسة تميز لكل إطلالة يومية.</p>
        </div>
        <div class="custom-big">
          <img src="https://i.postimg.cc/SxLMmnkM/set-with-fashionable-women-s-clothing-jeans-sweater.jpg" alt="أناقة رجالية" />
        </div>
      </div>

      <!-- الصف الثاني -->
      <div class="custom-row">
        <div class="custom-big">
          <img src="https://i.postimg.cc/4ddFTkkT/Untitled-Made-with-Flex-Clip-1.gif" alt="موضة نسائية" />
        </div>
        <div class="custom-big">
          <video autoplay loop muted playsinline>
            <source src="https://files.catbox.moe/dcboax.mp4" type="video/mp4">
            متصفحك لا يدعم عرض الفيديو.
          </video>
        </div>
      </div>
    </div>
  </div>
`;


  photosSlider.parentNode.insertBefore(newSection, photosSlider.nextSibling);

  const style = document.createElement("style");
  style.textContent = `
    :root {
      --main-color: #896C6E;
      --second-color: #EDB4A9;
      --third-color: #f5f5f5;
      --fourth-color: #fff;
    }
    .custom-service-section {
      padding: 60px 20px;
     background: linear-gradient(
  135deg, 
   var(--main-color) 30%  ,  
  var(--third-color) 70%
   
);

    }
    .custom-container {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      max-width: 1300px;
      margin: 0 auto;
      gap: 30px;
    }
    .custom-left {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    .gif-wrapper video {
      width: 100%;
      border-radius: 12px;
      display: block;
    }
    .custom-small {
      background: var(--fourth-color);
      padding: 20px;
      border-radius: 12px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.08);
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: center;
      transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease;
      color: var(--main-color);
    }
    .custom-small.alt {
      background: var(--main-color);
      color: #fff;
    }
    /* هافر عكسي */
    .custom-small:hover {
      background: var(--main-color);
      color: #fff;
      transform: translateY(-5px) scale(1.03);
      box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    }
    .custom-small.alt:hover {
      background: var(--fourth-color);
      color: var(--main-color);
    }
    .custom-small h2 {
      font-size: 24px;
      margin-bottom: 10px;
    }
    .custom-small .highlight {
      color: var(--third-color);
    }
.custom-btn {
  padding: 10px 20px;
  background-color: var(--third-color); /* الأساسي */
  color: var(--main-color); /* أبيض */
  border-radius: 8px;
  text-decoration: none;
  transition: 0.3s;
  display: inline-block; /* مش واخد عرض البوكس */
  align-self: center; /* يتوسّط */
  border: 2px solid var(--main-color); /* حدود بنفس اللون */
}
.custom-btn:hover {
  background-color: var(--fourth-color); /* أبيض */
  color: var(--main-color); /* نص بالأساسي */
}

    .custom-right {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 25px;
    }
    .custom-row {
      display: flex;
      gap: 20px;
    }
    .custom-big {
      flex: 1;
    }
    .custom-big img,
    .custom-big video {
      width: 100%;
      height: 267px;
      border-radius: 12px;
      object-fit: cover;
      display: block;
      transition: transform 0.3s ease;
    }
    .custom-big img:hover,
    .custom-big video:hover {
      transform: scale(1.05);
    }
    @media (max-width: 992px) {
      .custom-container {
        flex-direction: column;
      }
      .custom-row {
        flex-direction: column;
      }
      .custom-big img,
      .custom-big video {
        height: auto;
      }
    }
  `;
  document.head.appendChild(style);
});











//faq
document.addEventListener("DOMContentLoaded", function () {
if (window.location.pathname !== "/" && window.location.pathname !== "/index.html") return;
  const section = document.createElement("section");
  section.className = "faq-services-section";

  const container = document.createElement("div");
  container.className = "faq-services-container";

  // ===== بيانات البوكسات بالترتيب المطلوب =====
  const data = [
    // الصف الأول
    {
      question: "ما هي خيارات الدفع المتوفرة؟",
      answer: "يمكنك الدفع باستخدام مدى، البطاقات الائتمانية، Apple Pay ، Stc Pay",
      type: "text",
    },
    {
      media:"https://giphy.com/gifs/coffee-cinema-4d-rPYSkVDPf7elq",
      type: "gif",
    },
    {
      question: "كم يستغرق توصيل الطلب؟",
      answer: "عادةً ما يتم توصيل الطلبات خلال 9-14 يوم عمل.",
      type: "text",
    },

    // الصف الثاني
    {
      media: "https://giphy.com/gifs/deep-waver-deepwaver-babe-s2hB9eKXtalDQsJ7aa",
      type: "gif",
    },
    {
      question: "هل يمكنني استرجاع المنتجات؟",
      answer: "نعم، يمكنك استرجاع المنتجات خلال 7 أيام من استلامها وفقًا لسياسة الإرجاع.",
      type: "text",
    },
    {
      media: "https://files.catbox.moe/hufp1h.mp4",
      type: "video",
    },
  ];

  // ====== إنشاء الكروت ======
  data.forEach(({ question, answer, media, type }) => {
    const card = document.createElement("div");
    card.className = "faq-service-card";

    if (type === "video") {
      const videoEl = document.createElement("video");
      videoEl.src = media;
      videoEl.autoplay = true;
      videoEl.loop = true;
      videoEl.muted = true;
      videoEl.playsInline = true;
      videoEl.className = "card-media";
      card.appendChild(videoEl);
    } else if (type === "image") {
      const imgEl = document.createElement("img");
      imgEl.src = media;
      imgEl.alt = question || "";
      imgEl.className = "card-media";
      card.appendChild(imgEl);
    }

    // لو بوكس نص فقط
    if (type === "text") {
      const wrapper = document.createElement("div");
      wrapper.className = "card-text-wrapper";

      const qEl = document.createElement("div");
      qEl.className = "card-question";
      qEl.textContent = question;

      const aEl = document.createElement("div");
      aEl.className = "card-answer";
      aEl.textContent = answer;

      wrapper.appendChild(qEl);
      wrapper.appendChild(aEl);
      card.appendChild(wrapper);

      card.classList.add("text-only");
    }

    container.appendChild(card);
  });

  section.appendChild(container);

  // إدراج قبل آراء العملاء
  const testimonialsSection = document.querySelector(".s-block--testimonials");
  if (testimonialsSection) {
    testimonialsSection.parentNode.insertBefore(section, testimonialsSection);
  } else {
    document.body.appendChild(section);
  }

  // ====== CSS ======
  const style = document.createElement("style");
  style.textContent = `
    :root {
      --text-color: #fff;
      --radius: 14px;
      --bg-color: #5F4031;
    }
    .faq-services-section {
      padding: 50px 20px;
    }
    .faq-services-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      max-width: 1200px;
      margin: 0 auto;
    }
    .faq-service-card {
      position: relative;
      border-radius: var(--radius);
      overflow: hidden;
      height: 220px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      cursor: pointer;
      transition: transform 0.4s ease;
      padding: 15px;
    }
    .card-media {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
    }
    .faq-service-card:hover {
      transform: scale(1.05);
    }
    /* بوكسات النص فقط */
    .faq-service-card.text-only {
      background: var(--bg-color);
      color: var(--text-color);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .card-text-wrapper {
      text-align: center;
    }
    .card-question {
      font-size: 22px;
      font-weight: bold;
      margin-bottom: 8px;
    }
    .card-answer {
      font-size: 18px;
      line-height: 1.4;
    }
    @media (max-width: 992px) {
      .faq-services-container {
        grid-template-columns: 1fr 1fr;
      }
    }
    @media (max-width: 600px) {
      .faq-services-container {
        grid-template-columns: 1fr;
      }
    }
  `;
  document.head.appendChild(style);
});













/* Add custom Js styles below */ 


// إضافة مكتبة Font Awesome تلقائياً للهيدر
const fa = document.createElement("link");
fa.rel = "stylesheet";
fa.href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css";
fa.crossOrigin = "anonymous";
fa.referrerPolicy = "no-referrer";
document.head.appendChild(fa);
//end icons









document.addEventListener("DOMContentLoaded", function () {
  // 1. إضافة أيقونة السلة بجانب السعر
  const priceElement = document.querySelector('.s-product-card-price');
  const iconElement  = document.querySelector('.s-button-btn');
  if (priceElement && iconElement) {
    priceElement.parentNode.insertBefore(iconElement, priceElement.nextSibling);
  }

  // 2. ستايل عام + ظهور سلس للكرتات
  const styleTag = document.createElement("style");
  styleTag.innerHTML = `
    .enhanced-card {
      opacity: 0;
      transform: translateY(50px);
      transition: all 0.6s ease;
    }
    .enhanced-card.visible {
      opacity: 1 !important;
      transform: translateY(0) !important;
    }
  `;
  document.head.appendChild(styleTag);

  // 3. دالة لفحص ظهور الكرتات في الشاشة
  function checkVisibility() {
    document.querySelectorAll(".s-product-card-entry").forEach(product => {
      const rect = product.getBoundingClientRect();
      if (rect.top < window.innerHeight * 0.9 && rect.bottom >= 0) {
        product.classList.add("visible");
      } else {
        product.classList.remove("visible");
      }
    });
  }

  // 4. إنشاء النجوم والشارات لكل كرت منتج
  function enhanceCards() {
    document.querySelectorAll('.s-product-card-entry').forEach(card => {
      // منع الازدواجية
      if (card.querySelector('.stars')) return;

      // نجوم التقييم
      const stars = document.createElement('div');
      stars.className = 'stars';
      const rating = Math.floor(Math.random() * 2) + 4; 
      stars.style.setProperty('--rating', `${(rating / 5) * 100}%`);
      card.querySelector('.s-product-card-content-main')?.appendChild(stars);

      // شارة عشوائية
      const badge = document.createElement('div');
      badge.className = 'product-badge';
      const badges = [
        { text: 'جديد ', bg: '#5F4031' },
        { text: 'حصري ', bg: '#5F4031' },
        { text: 'اشترِ الآن ', bg: '#5F4031' },
        { text: 'حديثًا ', bg: '#5F4031' }
      ];
      const selected = badges[Math.floor(Math.random() * badges.length)];
      badge.textContent = selected.text;
      badge.style.cssText = `
        position: absolute;
        top: 10px; right: 10px;
        background-color: ${selected.bg};
        color: white;
        padding: 4px 8px;
        border-radius: 0.3rem;
        font-size: 0.7rem;
        font-weight: bold;
        z-index: 10;
      `;
      card.style.position = 'relative';
      card.classList.add('enhanced-card');
      card.appendChild(badge);
    });
  }

  // 5. تكرار المحاولة وتفعيل الفحص والتعزيز
  let tries = 0;
  const interval = setInterval(() => {
    enhanceCards();
    checkVisibility();
    if (++tries > 10) clearInterval(interval);
  }, 500);

  window.addEventListener("scroll", checkVisibility);
});
// =========== 👆 BACK TO TOP BUTTON =========
const backToTopButton = document.createElement("div");
  backToTopButton.id = "backToTop";
  backToTopButton.innerHTML = `
 <div class="icon">
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="24" height="24">
     <path d="M12 4l-8 8h6v8h4v-8h6z" />
   </svg>
 </div>
 <svg class="circular-chart" viewBox="0 0 36 36">
   <path class="circle-bg" d="M18 2.0845a15.9155 15.9155 0 1 1 0 31.831a15.9155 15.9155 0 1 1 0-31.831" />
   <path class="circle" d="M18 2.0845a15.9155 15.9155 0 1 1 0 31.831a15.9155 15.9155 0 1 1 0-31.831" />
 </svg>`;
  document.body.appendChild(backToTopButton);

  const style = `
 #backToTop {
   position: fixed;
   bottom: 20px;
   right: 20px;
   width: 60px;
   height: 60px;
   display: none;
   z-index: 1000;
 }
 #backToTop .icon {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 2;
   color: var(--second-color);
 }
 .circular-chart {
   width: 100%;
   height: 100%;
   transform: rotate(-90deg);
 }
 .circle-bg {
   fill: none;
   stroke: transparent;
   stroke-width: 3.8;
 }
 .circle {
   fill: none;
   stroke: var(--second-color);
   stroke-width: 3.8;
   stroke-dasharray: 100, 100;
   stroke-linecap: round;
   transition: stroke-dasharray 0.1s linear;
 }
 #backToTop:hover .icon {
   color: var(--main-color);
 }
`;

  const styleSheet = document.createElement("style");
  styleSheet.type = "text/css";
  styleSheet.textContent = style;
  document.head.appendChild(styleSheet);

  window.addEventListener("scroll", () => {
    const scrollTop = window.scrollY;
    const docHeight = document.documentElement.scrollHeight - window.innerHeight;
    const scrollPercent = (scrollTop / docHeight) * 100;

    if (scrollPercent > 1) {
      backToTopButton.style.display = "block";
    } else {
      backToTopButton.style.display = "none";
    }

    const circle = document.querySelector(".circle");
    const offset = 100 - scrollPercent;
    circle.style.strokeDasharray = `${scrollPercent}, 100`;
  });

  backToTopButton.addEventListener("click", () => {
    window.scrollTo({
      top: 0,
      behavior: "smooth",
    });
  });

// Additional code block

// ======== ⚠️ EMPTY LINKS PREVENT DEFAULT==========
document.querySelectorAll('a[href=""], a[href="#"]').forEach(link => {
  link.addEventListener('click', event => {
    event.preventDefault();
  });
});
// Select the salla-product-options element

// ============= 📢 PRODUCT OPTION ALERT ===========
const sallaProductOptions = document.querySelector('salla-product-options');

// Ensure the element exists before proceeding
if (sallaProductOptions) {
  // Create the alert message
  const alertMessage = document.createElement('p');
  alertMessage.textContent = "الرجاء اختيار أحد هذا الاختيارات للتمكن من اتمام الشراء";

  // Apply styles directly to the element
  alertMessage.style.backgroundColor = '#ffdddd';
  alertMessage.style.color = '#a94442';
  alertMessage.style.padding = '15px';
  alertMessage.style.border = '1px solid #a94442';
  alertMessage.style.borderRadius = '5px';
  alertMessage.style.marginBottom = '10px';
  alertMessage.style.fontWeight = 'bold';
  alertMessage.style.textAlign = 'center';

  // Insert the alert message at the beginning of the salla-product-options element
  sallaProductOptions.insertBefore(alertMessage, sallaProductOptions.firstChild);
} else {
  console.error("The 'salla-product-options' element was not found on the page.");
}
// Apply styles directly to the element
// Insert the banner swap (now called banSwiper)
const banSwiperHTML = `
<div class="banner-swap">
   <div class="bannt">
       <div class="banrerr" dir="rtl">خدمة عملاء ممتازة <i class="fa-solid fa-headset"></i></div>
       <div class="banrerr" dir="rtl">توصيل سريع <i class="fa-solid fa-truck-fast"></i></div>
       <div class="banrerr" dir="rtl">منتجات عالية الجودة <i class="fa-solid fa-box-open"></i></div>
       <div class="banrerr" dir="rtl">دفع آمن <i class="fa-solid fa-lock"></i></div>
       <div class="banrerr" dir="rtl">دعم 24/7 <i class="fa-solid fa-phone-volume"></i></div>
       <div class="banrerr" dir="rtl">أسعار تنافسية <i class="fa-solid fa-tag"></i></div>

       <!-- Repeat the same items for continuous scroll -->
       <div class="banrerr" dir="rtl">خدمة عملاء ممتازة <i class="fa-solid fa-headset"></i></div>
       <div class="banrerr" dir="rtl">توصيل سريع <i class="fa-solid fa-truck-fast"></i></div>
       <div class="banrerr" dir="rtl">منتجات عالية الجودة <i class="fa-solid fa-box-open"></i></div>
       <div class="banrerr" dir="rtl">دفع آمن <i class="fa-solid fa-lock"></i></div>
       <div class="banrerr" dir="rtl">دعم 24/7 <i class="fa-solid fa-phone-volume"></i></div>
       <div class="banrerr" dir="rtl">أسعار تنافسية <i class="fa-solid fa-tag"></i></div>
   </div>
</div>
`;

// Insert the banSwiper as the first element in the body
document.body.insertAdjacentHTML('afterbegin', banSwiperHTML);
// Create the loader div element


// ==================== 🖼️ SCROLL EFFECT FOR BANNERS ====================
function handleScroll() {
  const elements = document.querySelectorAll('.banner--fixed img');

  elements.forEach(element => {
    const rect = element.getBoundingClientRect();

    // إذا العنصر ظهر في نافذة المتصفح
    if (rect.top <= window.innerHeight && rect.bottom >= 0) {
      // هنضيف الكلاس visible لتشغيل تأثير الـ Bounce و Zoom
      if (!element.classList.contains('visible')) {
        element.classList.add('visible');
      }
    } else {
      // لو العنصر مش ظاهر، نشيل الكلاس visible علشان التأثير يتكرر لما يظهر تاني
      if (element.classList.contains('visible')) {
        element.classList.remove('visible');
      }
    }
  });
}

window.addEventListener('scroll', handleScroll);
handleScroll(); // لتنفيذ التأثير أول مرة عند تحميل الصفحة



// ==================== 🖼️ SCROLL EFFECT FOR PHOTOS SLIDER ====================
function handleScroll2() {
  const elements = document.querySelectorAll('salla-slider.photos-slider');

  elements.forEach(element => {
    const rect = element.getBoundingClientRect();

    // إذا العنصر ظهر في نافذة المتصفح (مرة واحدة فقط)
    if (rect.top <= window.innerHeight && rect.bottom >= 0) {
      if (!element.classList.contains('visible')) {
        element.classList.add('visible'); // إضافة الكلاس ليحصل التأثير
      }
    }
  });
}

window.addEventListener('scroll', handleScroll2);
handleScroll2(); // لتنفيذ التأثير عند تحميل الصفحة



// ======== 🖼️ SCROLL EFFECT FOR BACKGROUND =========
function handleScroll3() {
  const elements = document.querySelectorAll('.lazy__bg');

  elements.forEach(element => {
    const rect = element.getBoundingClientRect();

    // إذا العنصر ظهر في نافذة المتصفح
    if (rect.top <= window.innerHeight && rect.bottom >= 0) {
      // هنضيف الكلاس visible لتشغيل تأثير الـ Bounce و Zoom
      if (!element.classList.contains('visible')) {
        element.classList.add('visible');
      }
    } else {
      // لو العنصر مش ظاهر، نشيل الكلاس visible علشان التأثير يتكرر لما يظهر تاني
      if (element.classList.contains('visible')) {
        element.classList.remove('visible');
      }
    }
  });
}

window.addEventListener('scroll', handleScroll3);
handleScroll3(); // لتنفيذ التأثير أول مرة عند تحميل الصفحة


// ======== 🛍️ BLUR EFFECT ON PRODUCT CARDS ==========
function handleScrollBlur() {
  const elements = document.querySelectorAll('.s-product-card-vertical');

  elements.forEach(element => {
    const rect = element.getBoundingClientRect();

    // التحقق إذا كان العنصر داخل نافذة العرض
    if (rect.top <= window.innerHeight && rect.bottom >= 0) {
      element.classList.add('visible'); // إضافة كلاس التفعيل
    } else {
      element.classList.remove('visible'); // إزالة كلاس التفعيل
    }
  });
}

// تنفيذ الكود عند التمرير
window.addEventListener('scroll', handleScrollBlur);
// استدعاء الوظيفة عند تحميل الصفحة
handleScrollBlur();


// Create scrolling text dynamically

document.addEventListener("DOMContentLoaded", function () {
  // إنشاء عناصر الواتساب
  var whatsappFloat = document.createElement('div');
  whatsappFloat.className = 'whatsapp-float';

  var whatsappPopup = document.createElement('div');
  whatsappPopup.className = 'whatsapp-popup';
  whatsappPopup.style.display = 'none';

  var popupContent = `
    <div class="popup-header">
      <div class="avatar-container">
        <img src="https://i.postimg.cc/XYDsb603/5092143-removebg-preview.png">
        <span class="support-text">الدعم الفني</span>
      </div>
      <button class="close-popup">×</button>
    </div>
    <div class="logo-container">
      <a><img src=""></a>
    </div>
    <div class="popup-body">
      <p>مرحباً بك، نحن متواجدون لخدمتك</p>
      <p>برجاء ارسال رقم:</p>
      <ul class="options-list">
        <li>1- لتتبع الطلب</li>
        <li>2- مشكلة</li>
        <li>3- استفسار</li>
      </ul>
      <a href="https://wa.me/+966555323942" target="_blank" class="whatsapp-button">تواصل معنا</a>
      <div class="adfaz-container">
        <a href="https://adfaz.sa/" target="_blank" class="adfaz-link">
          <span class="adfaz-text">برمجة وتطوير أدفاز</span>
        </a>
      </div>
    </div>
  `;
  whatsappPopup.innerHTML = popupContent;
  whatsappFloat.appendChild(whatsappPopup);

  var whatsappIcon = document.createElement('img');
   whatsappIcon.src = 'https://i.postimg.cc/W1qs7gFw/Cat-playing-animation.gif';

  whatsappIcon.alt = 'WhatsApp';
  whatsappIcon.className = 'whatsapp-icon';
  whatsappFloat.appendChild(whatsappIcon);

  document.body.appendChild(whatsappFloat);

  // CSS
  var style = document.createElement('style');
  style.innerHTML = `/* كل ستايلاتك هنا */ 
  .whatsapp-float {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 100;
  }
  .whatsapp-icon {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
  }
  .whatsapp-popup {
    position: fixed;
    bottom: 90px;
    left: 20px;
    background: linear-gradient(var(--second-color), var(--main-color));
    width: 300px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 15px;
    color: white;
    z-index: 101;
    border-radius: 10px;
  }
  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .support-text {
    font-size: 16px;
    font-weight: bold;
  }
  .close-popup {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
  }
  .whatsapp-button {
    display: block;
    width: 100%;
    text-align: center;
    background-color: #25d366;
    color: white;
    padding: 10px 15px;
    border-radius: 5px;
    text-decoration: none;
    margin-top: 15px;
  }
  .whatsapp-button:hover {
    background-color: #1ebe55;
  }
  .adfaz-img {
    width: 30px;
    height: 30px;
    margin-left: 3px;
  }
  .adfaz-text {
    font-size: 12px;
    color: white;
  }
  `;
  document.head.appendChild(style);

  // Toggle & Close
  whatsappIcon.addEventListener('click', function () {
    whatsappPopup.style.display = (whatsappPopup.style.display === 'none') ? 'block' : 'none';
  });

  whatsappPopup.querySelector('.close-popup').addEventListener('click', function () {
    whatsappPopup.style.display = 'none';
  });
});
//end whatsapp


//hero



// Contact Section
document.addEventListener("DOMContentLoaded", function () {
  const contactSection = document.createElement("section");
  contactSection.id = "contact-section";

  contactSection.style.padding = "3rem 2rem";
  contactSection.style.margin = "3rem auto";
  contactSection.style.width = "95%";
  contactSection.style.maxWidth = "850px";
  contactSection.style.borderRadius = "16px";
  contactSection.style.background = "#fff";
  contactSection.style.boxShadow = "0 8px 25px rgba(0,0,0,0.08)";
  contactSection.style.transition = "transform 0.3s ease";

  contactSection.innerHTML = `
    <h2 style="
      text-align: center; 
      color: var(--main-color); 
      margin-bottom: 2rem; 
      font-size: 2rem; 
      font-weight: bold;
      position: relative;
    ">
      تواصل معنا
      <span style="
        position: absolute;
        bottom: -8px;
        left: 50%;
        transform: translateX(-50%);
        width: 60px;
        height: 3px;
        background: var(--second-color);
        border-radius: 10px;
      "></span>
    </h2>

    <form id="contact-form" style="
      display: flex; 
      flex-direction: column; 
      gap: 1.2rem; 
      color:#000;
    ">
      <input type="text" name="from_name" placeholder="الاسم" required 
        style="padding: 1rem; border: 1px solid #ddd; border-radius: 10px; font-size: 1rem; outline: none; transition: all 0.3s ease;" />
      
      <input type="email" name="from_email" placeholder="البريد الإلكتروني" required 
        style="padding: 1rem; border: 1px solid #ddd; border-radius: 10px; font-size: 1rem; outline: none; transition: all 0.3s ease;" />
      
      <textarea name="message" placeholder="اكتب رسالتك هنا" required 
        style="padding: 1rem; border: 1px solid #ddd; border-radius: 10px; font-size: 1rem; min-height: 130px; outline: none; transition: all 0.3s ease;"></textarea>
      
      <button type="submit" 
        style="padding: 1rem; 
               background: var(--main-color); 
               color: #fff; 
               border: none; 
               border-radius: 50px; 
               font-size: 1.1rem; 
               cursor: pointer; 
               font-weight: bold; 
               box-shadow: 0 5px 15px rgba(0,0,0,0.1); 
               transition: all 0.3s ease;">
        ✉️ إرسال
      </button>
    </form>
  `;

  // إدخال تأثير Hover & Focus
  const style = document.createElement("style");
  style.innerHTML = `
    #contact-section input:focus,
    #contact-section textarea:focus {
      border-color: var(--main-color);
      box-shadow: 0 0 6px rgba(0,0,0,0.08);
      transform: scale(1.01);
    }

    #contact-section button:hover {
      background: var(--second-color);
      transform: scale(1.05);
    }
  `;
  document.head.appendChild(style);

  // إدراج بعد الـ FAQ
  const faqSection = document.getElementById("faq-section");
  faqSection.insertAdjacentElement("afterend", contactSection);

  // عند الإرسال
  document.getElementById("contact-form").addEventListener("submit", function(e) {
    e.preventDefault();
    const name = this.from_name.value;
    const email = this.from_email.value;
    const message = this.message.value;

    window.location.href = `mailto:rad80992@gmail.com?subject=رسالة من ${encodeURIComponent(name)}&body=البريد: ${encodeURIComponent(email)}%0A%0Aالرسالة:%0A${encodeURIComponent(message)}`;
  });
});




//start loading
const loader = document.createElement('div');
loader.className = 'custom-loader';
loader.innerHTML = `
  <img class="loader-image" src="https://cdn.salla.sa/lGwZVD/neZy6ZpVMcKsluwdulWfudshb5HD2kQNuYutIqVC.png" alt="Loading" />
`;
document.body.appendChild(loader);

window.addEventListener("load", () => {
  // بعد نص ثانية خلي الخلفية تتحول رمادي شفاف
  setTimeout(() => {
    loader.classList.add('gray-phase');
  }, 500);

  // بعد 2.5 ثانية اخفي اللودر كله
  setTimeout(() => {
    loader.classList.add('hide-loader');
  }, 2500);
});

//end loading