/* Add custom JS code below */ 
/**
 * ==========================================
 * شفكس ستور - تحسين الواجهة
 * مستوحى من جوال اكسبرس
 * ==========================================
 * طريقة الإضافة في سلة:
 * الإعدادات > التصميم > JavaScript المخصص
 * أو من لوحة التحكم > قسم JavaScript
 * ==========================================
 */

(function () {

  /* ============================
     1. الشريط المتحرك في الأعلى
     ============================ */
  function addAnnouncementBar() {
    if (document.getElementById('shifex-announcement-bar')) return;

    const messages = [
      '🚀 شفكس ستور — قطع غيار أصلية لجميع أنواع الجوالات',
      '🚚 شحن سريع لجميع مناطق المملكة العربية السعودية',
      '📦 التوصيل من 2 إلى 5 أيام عمل',
      '🔄 إمكانية الاسترجاع في حال عدم عمل المنتج',
      '💳 الدفع عند الاستلام متاح',
    ];

    const bar = document.createElement('div');
    bar.id = 'shifex-announcement-bar';
    bar.innerHTML = `
      <div id="shifex-ticker-wrap">
        <div id="shifex-ticker">
          ${messages.map(m => `<span>${m}</span>`).join('')}
          ${messages.map(m => `<span>${m}</span>`).join('')}
        </div>
      </div>
      <style>
        #shifex-announcement-bar {
          background: #084dad;
          color: #fff;
          font-size: 13px;
          height: 36px;
          overflow: hidden;
          position: relative;
          z-index: 9999;
          direction: rtl;
        }
        #shifex-ticker-wrap {
          width: 100%;
          overflow: hidden;
          height: 100%;
          display: flex;
          align-items: center;
        }
        #shifex-ticker {
          display: flex;
          align-items: center;
          gap: 60px;
          white-space: nowrap;
          animation: shifex-scroll 30s linear infinite;
          will-change: transform;
        }
        #shifex-ticker span {
          padding: 0 10px;
          flex-shrink: 0;
        }
        @keyframes shifex-scroll {
          0%   { transform: translateX(0); }
          100% { transform: translateX(-50%); }
        }
        #shifex-announcement-bar:hover #shifex-ticker {
          animation-play-state: paused;
        }
      </style>
    `;

    document.body.insertBefore(bar, document.body.firstChild);
  }

  /* ============================
     2. الهيدر أبيض + اللون الأزرق للتفاصيل
     ============================ */
  function applyBlueTheme() {
    const style = document.createElement('style');
    style.id = 'shifex-blue-theme';
    style.innerHTML = `
      /* --- الألوان الرئيسية --- */
      :root {
        --primary-color: #084dad !important;
        --primary-hover: #063d96 !important;
        --accent-color:  #0a62d4 !important;
      }

      /* --- الهيدر أبيض --- */
      header,
      .s-header,
      .header,
      [class*="header"],
      nav,
      .s-navbar,
      .navbar,
      .site-header,
      #header {
        background: #ffffff !important;
        background-color: #ffffff !important;
        border-bottom: 2px solid #084dad !important;
      }

      /* --- نصوص الهيدر داكنة --- */
      header a,
      header span,
      header li,
      header p,
      header .s-header__logo,
      .s-header a,
      .s-navbar a,
      nav a {
        color: #1a1a2e !important;
      }

      /* --- أيقونات الهيدر داكنة --- */
      header svg,
      header i,
      .s-header svg,
      .s-header i,
      .s-navbar svg {
        color: #1a1a2e !important;
        fill: #1a1a2e !important;
        stroke: #1a1a2e !important;
      }

      /* --- الأزرار الرئيسية --- */
      .s-btn,
      .btn-primary,
      button[class*="primary"],
      [class*="add-to-cart"],
      [class*="cart-btn"],
      .s-product-card__add-to-cart,
      .salla-add-product-button {
        background: #084dad !important;
        background-color: #084dad !important;
        border-color: #084dad !important;
        color: #fff !important;
        transition: background 0.2s ease !important;
      }

      .s-btn:hover,
      .btn-primary:hover,
      [class*="add-to-cart"]:hover,
      .salla-add-product-button:hover {
        background: #063d96 !important;
        background-color: #063d96 !important;
      }

      /* --- روابط التنقل الرئيسية --- */
      .s-mega-menu__item > a:hover,
      nav a:hover {
        color: #084dad !important;
      }

      /* --- القائمة المنسدلة --- */
      .s-mega-menu__dropdown,
      [class*="dropdown"],
      .sub-menu {
        border-top: 3px solid #084dad !important;
      }

      /* --- الشريط الجانبي / مؤشرات --- */
      .s-sidebar,
      [class*="sidebar"] {
        border-color: #084dad !important;
      }

      /* --- العناوين الرئيسية في الصفحة --- */
      .s-section__title,
      h1, h2, h3 {
        color: #084dad !important;
      }

      /* --- روابط عامة --- */
      a:not(header a):not(nav a) {
        color: #084dad !important;
      }
      a:hover:not(header a):not(nav a) {
        color: #063d96 !important;
      }

      /* --- شريط التقدم / الفلاتر --- */
      [class*="progress"],
      [class*="filter-active"],
      input[type="range"]::-webkit-slider-thumb,
      input[type="checkbox"]:checked,
      input[type="radio"]:checked {
        accent-color: #084dad !important;
        background-color: #084dad !important;
      }

      /* --- بطاقات المنتجات: border-top عند hover --- */
      .s-product-card:hover,
      [class*="product-card"]:hover {
        border-top: 3px solid #084dad !important;
        transition: border 0.2s ease, box-shadow 0.2s ease !important;
        box-shadow: 0 4px 16px rgba(8,77,173,0.12) !important;
      }

      /* --- صفحة السلة / الطلبات --- */
      .s-checkout-btn,
      [class*="checkout"] {
        background: #084dad !important;
        border-color: #084dad !important;
        color: #fff !important;
      }

      /* --- خط فاصل ملون --- */
      hr, .s-divider {
        border-color: rgba(8,77,173,0.2) !important;
      }

      /* --- التاب النشط --- */
      .active,
      [class*="tab-active"],
      [class*="is-active"] {
        color: #084dad !important;
        border-bottom-color: #084dad !important;
      }

      /* --- Footer --- */
      footer a:hover {
        color: #084dad !important;
      }
    `;
    document.head.appendChild(style);
  }

  /* ============================
     3. زر الواتساب العائم
     ============================ */
  function addWhatsAppButton() {
    if (document.getElementById('shifex-whatsapp-btn')) return;

    const phoneNumber = '966509941827'; // <-- غير هذا برقمك مع رمز الدولة بدون +
    const defaultMessage = encodeURIComponent('مرحباً، أريد الاستفسار عن منتج');

    const btn = document.createElement('a');
    btn.id = 'shifex-whatsapp-btn';
    btn.href = `https://wa.me/${phoneNumber}?text=${defaultMessage}`;
    btn.target = '_blank';
    btn.rel = 'noopener noreferrer';
    btn.innerHTML = `
      <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="white">
        <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15
          -.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475
          -.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52
          .149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207
          -.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372
          -.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2
          5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719
          2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/>
        <path d="M12 0C5.373 0 0 5.373 0 12c0 2.123.556 4.116 1.528 5.849L0 24l6.302-1.507
          A11.946 11.946 0 0012 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 22
          c-1.886 0-3.656-.498-5.193-1.37l-.371-.22-3.742.895.93-3.648-.242-.383
          A9.944 9.944 0 012 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10z"/>
      </svg>
      <style>
        #shifex-whatsapp-btn {
          position: fixed;
          bottom: 28px;
          left: 28px;
          width: 56px;
          height: 56px;
          background: #25D366;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0 4px 16px rgba(37,211,102,0.4);
          z-index: 9998;
          transition: transform 0.2s ease, box-shadow 0.2s ease;
          text-decoration: none;
          animation: shifex-pulse 2.5s infinite;
        }
        #shifex-whatsapp-btn:hover {
          transform: scale(1.1);
          box-shadow: 0 6px 24px rgba(37,211,102,0.55);
          animation: none;
        }
        @keyframes shifex-pulse {
          0%, 100% { box-shadow: 0 4px 16px rgba(37,211,102,0.4); }
          50%       { box-shadow: 0 4px 28px rgba(37,211,102,0.7); }
        }
      </style>
    `;
    document.body.appendChild(btn);
  }

  /* ============================
     4. الوضع الليلي / النهاري
     ============================ */
  function addDarkModeToggle() {
    if (document.getElementById('shifex-dark-toggle')) return;

    const toggle = document.createElement('div');
    toggle.id = 'shifex-dark-toggle';

    const saved = localStorage.getItem('shifex-dark-mode');
    let isDark = saved === 'true';

    toggle.innerHTML = `
      <button id="shifex-dark-btn" title="تبديل الوضع الليلي / النهاري" aria-label="تبديل الوضع">
        <span id="shifex-dark-icon">${isDark ? '☀️' : '🌙'}</span>
      </button>
      <style>
        #shifex-dark-toggle {
          position: fixed;
          bottom: 100px;
          left: 28px;
          z-index: 9997;
        }
        #shifex-dark-btn {
          width: 46px;
          height: 46px;
          border-radius: 50%;
          border: 2px solid #084dad;
          background: #fff;
          cursor: pointer;
          font-size: 20px;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0 2px 10px rgba(0,0,0,0.15);
          transition: transform 0.2s ease;
        }
        #shifex-dark-btn:hover {
          transform: scale(1.1);
        }
        body.shifex-dark {
          background: #0e1117 !important;
          color: #e2e8f0 !important;
        }
        body.shifex-dark #shifex-dark-btn {
          background: #1e2532;
          border-color: #4a7fd4;
        }
        body.shifex-dark header,
        body.shifex-dark .s-header,
        body.shifex-dark nav {
          background: #0f1b35 !important;
          border-bottom-color: #4a7fd4 !important;
        }
        body.shifex-dark header a,
        body.shifex-dark header span,
        body.shifex-dark nav a {
          color: #e2e8f0 !important;
        }
        body.shifex-dark header svg,
        body.shifex-dark header i,
        body.shifex-dark .s-header svg {
          color: #e2e8f0 !important;
          fill: #e2e8f0 !important;
          stroke: #e2e8f0 !important;
        }
        body.shifex-dark .s-product-card,
        body.shifex-dark [class*="product-card"],
        body.shifex-dark [class*="card"] {
          background: #1a2130 !important;
          border-color: #2d3a52 !important;
          color: #e2e8f0 !important;
        }
        body.shifex-dark main,
        body.shifex-dark section,
        body.shifex-dark .s-main,
        body.shifex-dark [class*="main"],
        body.shifex-dark [class*="content"] {
          background: #0e1117 !important;
          color: #e2e8f0 !important;
        }
        body.shifex-dark footer {
          background: #0a0d14 !important;
          color: #a0aec0 !important;
        }
        body.shifex-dark h1,
        body.shifex-dark h2,
        body.shifex-dark h3,
        body.shifex-dark h4 {
          color: #90b8f8 !important;
        }
        body.shifex-dark p,
        body.shifex-dark span,
        body.shifex-dark li,
        body.shifex-dark a:not(header a) {
          color: #cbd5e1 !important;
        }
        body.shifex-dark input,
        body.shifex-dark textarea,
        body.shifex-dark select {
          background: #1e2532 !important;
          border-color: #2d3a52 !important;
          color: #e2e8f0 !important;
        }
      </style>
    `;
    document.body.appendChild(toggle);

    if (isDark) document.body.classList.add('shifex-dark');

    document.getElementById('shifex-dark-btn').addEventListener('click', function () {
      isDark = !isDark;
      document.body.classList.toggle('shifex-dark', isDark);
      document.getElementById('shifex-dark-icon').textContent = isDark ? '☀️' : '🌙';
      localStorage.setItem('shifex-dark-mode', isDark);
    });
  }

  /* ============================
     5. تحسين عرض الأقسام/الكاتيقوريز
     ============================ */
  function enhanceCategoryDisplay() {
    const style = document.createElement('style');
    style.innerHTML = `
      [class*="category-card"],
      [class*="cat-card"],
      .s-category-card {
        border: 2px solid transparent !important;
        border-radius: 12px !important;
        transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
        overflow: hidden !important;
      }
      [class*="category-card"]:hover,
      .s-category-card:hover {
        border-color: #084dad !important;
        transform: translateY(-4px) !important;
        box-shadow: 0 8px 24px rgba(8,77,173,0.15) !important;
      }
      [class*="category-card"] h2,
      [class*="category-card"] h3,
      [class*="category-card"] p,
      .s-category-card__title {
        color: #084dad !important;
        font-weight: 700 !important;
      }
      .s-product-card,
      [class*="product-card"] {
        border-radius: 12px !important;
        overflow: hidden !important;
        transition: transform 0.2s ease, box-shadow 0.2s ease !important;
      }
      .s-product-card:hover,
      [class*="product-card"]:hover {
        transform: translateY(-4px) !important;
      }
    `;
    document.head.appendChild(style);
  }

  /* ============================
     التهيئة الرئيسية
     ============================ */
  function init() {
    addAnnouncementBar();
    applyBlueTheme();
    addWhatsAppButton();
    addDarkModeToggle();
    enhanceCategoryDisplay();
    console.log('✅ شفكس ستور — تم تحميل التحسينات بنجاح');
  }

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

})();