document.addEventListener("DOMContentLoaded", function () {
    /*******************************************************
     * شريط القوائم المخصص (بدون أسهم على الجوال)
     * Desktop: Hover to open submenus.
     * Mobile: Click to open/close submenus.
     *******************************************************/

    // 1. HTML الخاص بشريط القوائم
    const menuBarHTML = `
      <div id="custom-menu-bar">
        <ul class="main-menu">
          <li>
            <a href="https://betak-sa.com/كنب/c856233896?filters[category_id]=856233896">الكنب</a>
            <ul class="sub-menu">
              <li><a href="https://betak-sa.com/كنب-زاوية/c1622587813">كنب زاوية</a></li>
          
              <li><a href="https://betak-sa.com/اطقم-غرف-المعيشة/c1412229609?filters[category_id]=1412229609">أطقم غرف المعيشة</a></li>
              <li><a href="https://betak-sa.com/كنب-بمقعدين/c530077173">كنب بمقعدين</a></li>
              <li><a href="https://betak-sa.com/كنب-بثلاثة-المقاعد/c1943410667">كنب بثلاثة المقاعد</a></li>
              <li><a href="https://betak-sa.com/كنب-بأربعة-مقاعد/c53304529">كنب بأربعة مقاعد</a></li>
              <li><a href="https://betak-sa.com/كنب-حرف-u/c1584895757">كنب حرف U</a></li>
            </ul>
          </li>
          <li>
            <a href="https://betak-sa.com/الكراسي/c1945497783?
            collections/الكراسي">الكراسي</a>
            <ul class="sub-menu">
              <li><a href="https://betak-sa.com/كراسي-بذرعين/c394210605?collections/كراسي-بذرعين">كراسي بذرعين</a></li>

            </ul>
          </li>
          <li>
            <a href="https://betak-sa.com/طاولات/c532627121?filters[category_id]=532627121">الطاولات</a>
            <ul class="sub-menu">
              <li><a href="https://betak-sa.com/طاولات/c532627121?filters[category_id]=327731657">طاولات جانبية</a></li>
              <li><a href="https://betak-sa.com/طاولات-الوسط-والقهوة/c1834346698?filters[category_id]=1834346698">طاولات الوسط والقهوة</a></li>
              <li><a href="https://betak-sa.com/طاولات-المدخل/c542663463">طاولات المدخل</a></li>
            </ul>
          </li>
          <li>
            <a href="/collections/الجلسات-الخارجية">الجلسات الخارجية</a>
            <ul class="sub-menu">
              <li><a href="/collections/جلسات-حديقة">جلسات حديقة</a></li>
            </ul>
          </li>
          <li>
            <a href="https://betak-sa.com/وحدات-تليفزيون/c1453494423?filters[category_id]=1453494423">وحدات التلفزيون</a>
          </li>
          <li>
            <a href="https://betak-sa.com/الأسرة/c1455344227?/collections/الاسرة">الأسرة</a>
            <ul class="sub-menu">
              <li><a href="https://betak-sa.com/سرير-مزدوج/c331863572?/collections/سرير-مزدوج">سرير مزدوج</a></li>
             
            </ul>
          </li>
        </ul>
      </div>
    `;

    // 2. إدراج شريط القوائم في الصفحة بعد الهيدر مباشرة
    const header = document.querySelector("header.store-header");
    if (header) {
        header.insertAdjacentHTML("afterend", menuBarHTML);
    } else {
        document.body.insertAdjacentHTML('afterbegin', menuBarHTML);
    }

    // 3. إضافة CSS اللازم
    const style = document.createElement('style');
    style.textContent = `
      /**************** CSS STYLES ****************/
      
      #custom-menu-bar {
        background-color: #FDFAF6;
        padding: 5px 0;
        direction: rtl;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        width: 100%;
        z-index: 998; /* أقل من الهيدر الرئيسي ليكون تحته */
        overflow: visible;
        position: sticky;
        top: 0; /* سيتم تحديث هذه القيمة بواسطة الجافاسكربت */
      }

      #custom-menu-bar .main-menu {
        list-style: none;
        margin: 0;
        padding: 0 15px;
        display: flex;
      }

      #custom-menu-bar .main-menu > li {
        position: relative;
        flex-shrink: 0;
      }

      #custom-menu-bar .main-menu > li > a {
        display: block;
        padding: 12px 18px;
        text-decoration: none;
        color: #1e1e1e;
        font-weight: bold;
        font-size: 15px;
        transition: color 0.2s ease;
      }
      
      #custom-menu-bar .main-menu > li > a:hover {
         color: #1F2A4A;
      }

      #custom-menu-bar .sub-menu {
        display: none;
        position: absolute;
        top: 100%;
        right: 0;
        background: #ffffff;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        box-shadow: 0 6px 15px rgba(0,0,0,0.1);
        list-style: none;
        padding: 8px 0;
        margin: 0;
        min-width: 200px;
        z-index: 1000;
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        transition: all 0.3s ease;
      }
      
      #custom-menu-bar .sub-menu li a {
        padding: 10px 20px;
        display: block;
        color: #333;
        text-decoration: none;
        white-space: nowrap;
        transition: background-color 0.2s ease, color 0.2s ease;
      }

      #custom-menu-bar .sub-menu li a:hover {
        background-color: #f5f5f5;
        color: #1F2A4A;
      }

      /**************** DESKTOP STYLES (Hover) ****************/
      @media (min-width: 992px) {
        #custom-menu-bar .main-menu {
          justify-content: center;
        }

        #custom-menu-bar .main-menu > li:hover > .sub-menu {
          display: block;
          opacity: 1;
          visibility: visible;
          transform: translateY(0);
        }
      }

      /**************** MOBILE & TABLET STYLES (Click) ****************/
      @media (max-width: 991px) {
        /* -- [تعديل] فرض تثبيت الهيدر على الجوال -- */
        header.store-header {
            position: sticky !important;
            top: 0 !important;
            z-index: 999 !important;
        }

        #custom-menu-bar .main-menu {
          justify-content: flex-start;
          overflow-x: auto;
          white-space: nowrap;
          -webkit-overflow-scrolling: touch;
          scrollbar-width: none;
        }

        #custom-menu-bar .main-menu::-webkit-scrollbar {
          display: none;
        }
        
        #custom-menu-bar .sub-menu {
          position: static;
          box-shadow: none;
          border: none;
          border-top: 1px solid #eee;
          border-radius: 0;
          background-color: #fdf8f4;
          width: 100%;
          transition: none;
          opacity: 1;
          visibility: visible;
          transform: none;
          padding: 0;
        }

        #custom-menu-bar li.menu-item-active > .sub-menu {
          display: block;
        }
      }
    `;
    document.head.appendChild(style);

    // 4. JavaScript لتفعيل النقر على الجوال
    const menuItems = document.querySelectorAll('#custom-menu-bar .main-menu > li');
    menuItems.forEach(item => {
        const submenu = item.querySelector('.sub-menu');
        if (submenu) {
            const clickableElement = item.querySelector('a');
            
            clickableElement.addEventListener('click', function(event) {
                if (window.innerWidth <= 991) {
                    event.preventDefault();
                    
                    item.parentElement.querySelectorAll('.menu-item-active').forEach(activeItem => {
                        if (activeItem !== item) {
                            activeItem.classList.remove('menu-item-active');
                        }
                    });

                    item.classList.toggle('menu-item-active');
                }
            });
        }
    });

    // إضافي: إغلاق القوائم عند النقر خارجها على الجوال
    document.addEventListener('click', function(event) {
        if (window.innerWidth <= 991) {
            const menuBar = document.getElementById('custom-menu-bar');
            if (menuBar && !menuBar.contains(event.target)) {
                document.querySelectorAll('#custom-menu-bar .menu-item-active').forEach(item => {
                    item.classList.remove('menu-item-active');
                });
            }
        }
    });

    // -- [تعديل] وظيفة لتحديث موضع الشريط بشكل ديناميكي --
    function updateMenuBarPosition() {
        const headerElement = document.querySelector("header.store-header");
        const menuBarElement = document.getElementById('custom-menu-bar');
        if (headerElement && menuBarElement) {
            const headerHeight = headerElement.offsetHeight;
            menuBarElement.style.top = `${headerHeight}px`;
        }
    }
    
    // قم بتشغيل الوظيفة عند تحميل الصفحة، تغيير حجم الشاشة، وأثناء التمرير
    updateMenuBarPosition();
    window.addEventListener('resize', updateMenuBarPosition);
    window.addEventListener('scroll', updateMenuBarPosition); // <-- الإضافة المهمة هنا
});