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">
        <span class="custom-label">حلـيـة</span>
        <h2>اكتشف الفخامة مع أقسام <span class="highlight">حلـيـة</span></h2>
        <p>تسوق تشكيلتنا المميزة من الساعات الفاخرة، المسابيح ذات التصاميم الراقية، النظارات العصرية، الطقم الكامل للزينة، الأساور والعقود البراقة، الحلقان والخواتم الفخمة. كل قطعة صُممت بعناية لتمنحك لمسة من الفخامة والأناقة في كل مناسبة.</p>
       <a href="https://hilya1.store/%D8%B3%D8%A7%D8%B9%D8%A7%D8%AA-%D9%8A%D8%AF-%D9%81%D8%AE%D9%85%D8%A9/c861519647" class="custom-btn" target="_blank">
  تسوق الآن
</a>

      </div>

      <!-- الصور والبوكسات -->
<div class="custom-right">
  <!-- الصف الأول -->
  <div class="custom-row">
    <a href="https://hilya1.store/%D8%B3%D8%A7%D8%B9%D8%A7%D8%AA-%D9%8A%D8%AF-%D9%81%D8%AE%D9%85%D8%A9/c861519647" class="custom-big" ">
      <img src="https://i.postimg.cc/sfLRphFX/close-up-seller-s-hands-gloves-shows-exclusive-men-s-watch-from-new-collection-luxury-jewelry-store.jpg" alt="ساعات يد فخمة" />
    </a>
    <a href="https://hilya1.store/%D8%B3%D8%A7%D8%B9%D8%A7%D8%AA-%D9%8A%D8%AF-%D9%81%D8%AE%D9%85%D8%A9/c861519647" class="custom-small" >
      <strong>ساعات يد فخمة</strong>
      <p>تصاميم عصرية تجمع بين الأناقة والجودة العالية.</p>
    </a>
  </div>

  <!-- الصف الثاني -->
  <div class="custom-row">
    <a href="https://hilya1.store/%D9%85%D8%B3%D8%A7%D8%A8%D9%8A%D8%AD-%D9%81%D8%AE%D9%85%D8%A9/c686300186" class="custom-small" ">
      <strong>مَسابيح فخمة</strong>
      <p>اختيارات راقية تليق بمظهرك وتمنحك لمسة مميزة.</p>
    </a>
    <a href="https://hilya1.store/%D9%85%D8%B3%D8%A7%D8%A8%D9%8A%D8%AD-%D9%81%D8%AE%D9%85%D8%A9/c686300186" class="custom-big" ">
      <img src="https://i.postimg.cc/cCvyps30/top-view-religious-textile-with-bracelet.jpg" alt="مَسابيح فخمة" />
    </a>
  </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(--third-color), #f9ece9);
    }
    .custom-container {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      max-width: 1200px;
      margin: 0 auto;
      gap: 30px;
    }
    .custom-left {
      flex: 1;
    }
    .custom-label {
      display: inline-block;
      background: var(--second-color);
      color: var(--fourth-color);
      padding: 6px 14px;
      border-radius: 12px;
      font-size: 14px;
      margin-bottom: 15px;
    }
    .custom-left h2 {
      font-size: 32px;
      margin-bottom: 15px;
      line-height: 1.3;
      color: var(--main-color);
    }
    .custom-left .highlight {
      color: var(--second-color);
    }
    .custom-left p {
      font-size: 16px;
      margin-bottom: 20px;
      color: #444;
    }
    .custom-btn {
      padding: 12px 30px;
      background-color: var(--main-color);
      color: var(--fourth-color);
      border: none;
      border-radius: 8px;
      cursor: pointer;
      font-size: 16px;
      transition: 0.3s;
    }
    .custom-btn:hover {
      background-color: var(--second-color);
    }

    .custom-right {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 25px;
    }

    .custom-row {
      display: flex;
      gap: 20px;
      align-items: stretch;
    }

    /* الصورة */
    .custom-big {
      flex: 2;
    }
    .custom-big img {
      width: 100%;
      height: 320px;
      border-radius: 16px;
      object-fit: cover;
    }

    /* البوكس بطول الصورة */
    .custom-small {
      flex: 1;
      background: var(--fourth-color);
      padding: 20px;
      border-radius: 16px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.08);
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: center;
      height: 320px;
      transition: all 0.3s ease;
    }
    .custom-small strong {
      font-size: 18px;
      margin-bottom: 8px;
      color: var(--main-color);
    }
    .custom-small p {
      font-size: 14px;
      color: #666;
      margin: 0;
    }
    /* Hover effect */
    .custom-small:hover {
      background: var(--main-color);
      color: var(--fourth-color);
      transform: translateY(-5px);
    }
    .custom-small:hover strong,
    .custom-small:hover p {
      color: var(--fourth-color);
    }

    @media (max-width: 992px) {
      .custom-container {
        flex-direction: column;
      }
      .custom-row {
        flex-direction: column;
      }
      .custom-big img,
      .custom-small {
        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://i.postimg.cc/v8P1xqSR/model-career-kit-still-life.jpg",
      type: "image",
    },
    {
      question: "كم يستغرق توصيل الطلب؟",
      answer: "عادةً ما يتم توصيل الطلبات خلال 9-14 يوم عمل.",
      type: "text",
    },

    // الصف الثاني
    {
      media: "https://files.catbox.moe/ewwuvq.mp4",
      type: "video",
    },
    {
      question: "هل يمكنني استرجاع المنتجات؟",
      answer: "نعم، يمكنك استرجاع المنتجات خلال 7 أيام من استلامها وفقًا لسياسة الإرجاع.",
      type: "text",
    },
    {
      media: "https://files.catbox.moe/jmshul.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: #896C6E;
    }
    .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);
});













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: '#896C6E' },
        { text: 'حصري ', bg: '#EDB4A9' },
        { text: 'اشترِ الآن ', bg: '#896C6E' },
        { text: 'حديثًا ', bg: '#EDB4A9' }
      ];
      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/+9660506240675" 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.ibb.co/1f7gNcQQ/Cute-Boy-Running.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:Alawejamal29@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/cdn-cgi/image/fit=scale-down,width=400,height=400,onerror=redirect,format=auto/lGAGbB/I5Yz8kJIu2XkRBpy3xOOhHDFQpNWzm8fKO2ver5V.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