/* Add custom Js code below */ 
<div class="offer-card">
  <img src="رابط_الصورة" alt="اسم المنتج">
  <div class="offer-card-content">
    <div class="offer-title">اسم المنتج</div>
    <div class="offer-price">السعر</div>
    <div class="offer-description">وصف مختصر للعرض</div>
    <button class="buy-btn">أضف إلى السلة</button>
  </div>
</div>
<!-- تحسين الأداء والتحميل الكسول -->
<script>
  document.addEventListener("DOMContentLoaded", function () {
    // تفعيل التحميل الكسول لكل الصور
    document.querySelectorAll("img").forEach(function (img) {
      img.setAttribute("loading", "lazy");
    });

    // تأخير تحميل بعض السكربتات الثقيلة (إن وجدت)
    window.addEventListener("load", function () {
      setTimeout(function () {
        // مثال: سكربت طرف ثالث – قم بتغييره حسب الحاجة
        // let script = document.createElement('script');
        // script.src = 'https://example.com/heavy-script.js';
        // document.body.appendChild(script);
      }, 2000);
    });
  });
</script>

<!-- تسريع تحميل الخطوط (اختياري إذا كنت تستخدم خطوط Google Fonts أو مشابه) -->
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- ✅ سلايدر علوي -->
<div style="background: linear-gradient(to right, #111, #333); color: white; padding: 60px 20px; text-align: center; border-radius: 12px; margin-bottom: 40px;">
  <h1 style="font-size: 32px; margin-bottom: 15px;">أقوى العروض التقنية هنا</h1>
  <p style="font-size: 18px;">تسوق الآن واحصل على خصومات مميزة على الإلكترونيات والإكسسوارات</p>
  <a href="/collections/العروض" style="background-color: #C89B3C; color: #000; padding: 12px 20px; border-radius: 8px; display: inline-block; margin-top: 20px; font-weight: bold;">استعرض العروض</a>
</div>

<!-- ✅ قسم العروض المميزة -->
<div style="text-align: center; margin: 40px 0;">
  <h2 style="font-size: 28px; margin-bottom: 10px;">عروض حصرية 🔥</h2>
  <p style="color: #555;">لا تفوّت أقوى التخفيضات على المنتجات المختارة</p>
  <!-- يمكن استبدال الصور لاحقاً -->
  <div style="display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-top: 25px;">
    <img src="https://via.placeholder.com/250x250?text=عرض+1" alt="عرض 1" style="border-radius: 10px;">
    <img src="https://via.placeholder.com/250x250?text=عرض+2" alt="عرض 2" style="border-radius: 10px;">
    <img src="https://via.placeholder.com/250x250?text=عرض+3" alt="عرض 3" style="border-radius: 10px;">
  </div>
</div>

<!-- ✅ منتجات مميزة -->
<div style="background-color: #f9f9f9; padding: 40px 20px; text-align: center; border-radius: 12px; margin-bottom: 40px;">
  <h2 style="font-size: 28px; margin-bottom: 10px;">منتجات مختارة لك ✨</h2>
  <p style="color: #777;">جودة عالية وأسعار منافسة على جميع المنتجات</p>
  <!-- قائمة المنتجات التلقائية من سلة -->
  <salla-products group-id="1"></salla-products>
</div>

<!-- ✅ مميزات المتجر -->
<div style="text-align: center; padding: 40px 20px;">
  <h2 style="font-size: 26px; margin-bottom: 30px;">لماذا نحن؟</h2>
  <div style="display: flex; flex-wrap: wrap; justify-content: center; gap: 30px;">
    <div style="max-width: 200px;">
      <img src="https://cdn-icons-png.flaticon.com/128/942/942751.png" width="60">
      <h4>شحن سريع</h4>
      <p>نوصل لجميع مناطق المملكة خلال أيام قليلة.</p>
    </div>
    <div style="max-width: 200px;">
      <img src="https://cdn-icons-png.flaticon.com/128/190/190411.png" width="60">
      <h4>دعم فوري</h4>
      <p>فريق دعم جاهز لمساعدتك طوال اليوم.</p>
    </div>
    <div style="max-width: 200px;">
      <img src="https://cdn-icons-png.flaticon.com/128/190/190406.png" width="60">
      <h4>موثوقية عالية</h4>
      <p>منتجات أصلية ومضمونة 100%.</p>
    </div>
  </div>
</div>

<!-- ✅ دعوة للتواصل -->
<div style="background-color: #C89B3C; padding: 40px 20px; text-align: center; border-radius: 12px;">
  <h2>هل لديك استفسار؟</h2>
  <p style="font-size: 17px;">تواصل معنا عبر الواتساب مباشرة 👇</p>
  <a href="https://wa.me/966558595260" target="_blank" style="background: #111; color: white; padding: 12px 20px; border-radius: 8px; display: inline-block; margin-top: 15px; font-weight: bold;">راسلنا الآن</a>
</div><div class="social-icons-custom">
  <a href="https://wa.me/966XXXXXXXXX" target="_blank">
    <img src="https://cdn-icons-png.flaticon.com/512/733/733585.png" alt="WhatsApp">
  </a>
  <a href="https://www.instagram.com/yourstore" target="_blank">
    <img src="https://cdn-icons-png.flaticon.com/512/174/174855.png" alt="Instagram">
  </a>
  <a href="https://twitter.com/yourstore" target="_blank">
    <img src="https://cdn-icons-png.flaticon.com/512/733/733579.png" alt="Twitter">
  </a>
</div>
}