/* Add custom JS code below */ 
if (document.body.classList.contains('index') && window.innerWidth > 1024) {
    const logoImg = document.querySelector('a.navbar-brand img');
    if (logoImg) {
        logoImg.src = 'https://i.ibb.co/0Vmns33R/image-1-1-1-1.png';
        logoImg.srcset = ''; 
    }
}
// Complete script for Salla Store (Home Page Categories)
(function() {
    // Only run on the homepage
    if (!document.body.classList.contains('index')) return;

    const mainContent = document.getElementById('main-content');
    if (!mainContent) return;

    // 1. Category Data
    const categories = [
        { title: "الخواتم", image: "https://i.ibb.co/srxYk67/kwatem.png", link: "https://fontana-jewelry.com/%D8%AE%D9%88%D8%A7%D8%AA%D9%85-%D9%81%D8%B6%D8%A9-%D9%86%D8%B3%D8%A7%D8%A6%D9%8A%D8%A9/c1826406467" },
        { title: "الأطقم", image: "https://i.ibb.co/xq1Dcn96/takem.png", link: "https://fontana-jewelry.com/%D8%A7%D8%B7%D9%82%D9%85-%D9%81%D8%B6%D8%A9-%D9%86%D8%B3%D8%A7%D8%A6%D9%8A%D8%A9/c769173834" },
        { title: "السلاسل و العقود", image: "https://i.ibb.co/PzVkP9NR/slasel.png", link: "https://fontana-jewelry.com/%D8%B3%D9%84%D8%A7%D8%B3%D9%84-%D9%81%D8%B6%D8%A9-%D9%86%D8%B3%D8%A7%D8%A6%D9%8A%D8%A9/c1658548817" },
        { title: "حلق", image: "https://i.ibb.co/GQVQS9KS/haleq.png", link: "https://fontana-jewelry.com/%D8%AD%D9%84%D9%82%D8%A7%D9%86-%D9%81%D8%B6%D8%A9/c1179365224" },
        { title: "سلاسل كف", image: "https://i.ibb.co/j9jjsxkp/kaf.png", link: "https://fontana-jewelry.com/%D8%B3%D9%84%D8%A7%D8%B3%D9%84-%D9%86%D8%B3%D8%A7%D8%A6%D9%8A%D8%A9/c189725966" },
        { title: "الاساور", image: "https://i.ibb.co/8nK9p20F/elasawer.png", link: "https://fontana-jewelry.com/%D8%A7%D8%B3%D8%A7%D9%88%D8%B1-%D9%86%D8%B3%D8%A7%D8%A6%D9%8A%D8%A9/c627524679" }
    ];

    // 2. Create Section HTML
    const section = document.createElement('section');
    section.className = 's-block custom-categories-section';
    section.innerHTML = `
        <div class="section-header" style="text-align: center; margin-bottom: 20px;">
            <h2 class="section-title" style="display: inline-block; position: relative; color: #333; padding-bottom: 10px;">تصفح الفئات</h2>
        </div>
        <div class="categories-grid">
            ${categories.map(cat => `
                <a href="${cat.link}" class="category-item">
                    <div class="category-image-wrapper">
                        <img src="${cat.image}" alt="${cat.title}">
                    </div>
                    <span class="category-name">${cat.title}</span>
                </a>
            `).join('')}
        </div>
    `;

    // 3. Insert as 3rd section in the main content
    const thirdPosition = mainContent.children[2];
    if (thirdPosition) {
        mainContent.insertBefore(section, thirdPosition);
    } else {
        mainContent.appendChild(section);
    }

    // 4. Inject Final CSS
    const style = document.createElement('style');
    style.textContent = `
        .custom-categories-section {
            width: 100vw !important;
            max-width: 100vw !important;
            margin-left: calc(-50vw + 50%) !important;
            margin-right: calc(-50vw + 50%) !important;
            background: transparent !important;
            padding: 40px 0 !important;
            overflow-x: hidden !important;
        }
        .section-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 25%;
            width: 50%;
            height: 3px;
            background-color: #466115;
        }
        .categories-grid {
            display: flex !important;
            flex-direction: row !important;
            flex-wrap: nowrap !important;
            justify-content: center !important;
            align-items: flex-start !important;
            gap: 12px !important;
            width: 100% !important;
            overflow-x: auto !important;
            scrollbar-width: none;
            padding: 10px 0 !important;
        }
        .categories-grid::-webkit-scrollbar { display: none; }
        .category-item {
            flex: 0 0 auto !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            text-decoration: none !important;
        }
        .category-item img {
            width: 280px !important;
            height: 280px !important;
            max-width: 15vw !important;
            min-width: 130px !important;
            object-fit: contain !important;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            animation: float-categories 4s ease-in-out infinite;
        }
        .category-item:nth-child(even) img { animation-delay: 1s; }
        .category-item:hover img { transform: scale(1.08) translateY(-5px); }
        .category-name {
            margin-top: 8px !important;
            font-weight: 400 !important;
            font-size: 1.25rem !important;
            color: #333 !important;
        }
        @keyframes float-categories {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-8px); }
        }
        @media (max-width: 640px) {
            .categories-grid { justify-content: flex-start !important; padding-left: 20px !important; gap: 8px !important; }
            .category-item img {
                width: auto !important;
                height: 120px !important; /* Reduced for smaller gaps */
                max-width: none !important;
                min-width: 100px !important;
            }
            .category-name { 
                font-size: 0.95rem !important; 
                margin-top: 2px !important; /* Tight spacing between image/text */
            }
        }
    `;
    document.head.appendChild(style);
})();


const sections = document.querySelectorAll('section.s-block--testimonials, section.s-block--features');
sections.forEach(section => {
  if (!section.querySelector('.s-centered-wrapper')) {
    const wrapper = document.createElement('div');
    wrapper.className = 's-centered-wrapper';
    while (section.firstChild) wrapper.appendChild(section.firstChild);
    section.appendChild(wrapper);
  }
});

/*footer logo start */
(function() {
  const logoUrl = 'https://i.ibb.co/FbVFbdXn/image-1-1-2-1.png';
  const link = document.querySelector('a.flex.items-center.m-0');
  
  if (link && !link.querySelector('img.custom-footer-logo')) {
    const h3 = link.querySelector('h3');
    const img = document.createElement('img');
    img.src = logoUrl;
    img.alt = 'Logo';
    img.className = 'custom-footer-logo';
    link.insertBefore(img, h3);
  }
})();
/*footer logo end */

/*add vision logo in footer start */
(function() {
  const appsIcons = document.querySelector('salla-apps-icons');
  const imageUrl = 'https://i.ibb.co/Jj6KSPW6/Section-pngegg1-1-png-1.png';

  if (appsIcons && !document.querySelector('.custom-footer-app-banner')) {
    const img = document.createElement('img');
    img.src = imageUrl;
    img.alt = 'Custom Banner';
    img.className = 'custom-footer-app-banner';
    
    // Inserts the image right above the app icons
    appsIcons.parentNode.insertBefore(img, appsIcons);
  }
})();
/*add vision logo in footer end */