/* Add custom JS code below */ 
(function () {
  var HERO = "https://i.ibb.co/yFN7DydZ/magnific-use-the-exact-same-image-oh-TUe-RK829.jpg";

  document.addEventListener('DOMContentLoaded', function () {
    hideHeader();
    buildHeader();
    if (isHomePage()) buildHero();
    setupScroll();
  });

  function isHomePage() {
    var path = window.location.pathname.replace(/\/+$/, '');
    return path === '' || path === '/index';
  }

  // نخفي فقط الهيدر/الناف الأصلي لسلة، وما نلمس شريط الفلترة/الترتيب فوق المنتجات
  function hideHeader() {
    ['header', '.site-header', '.header', '.header-wrapper', '[class*="announcement"]']
    .forEach(function(s){
      document.querySelectorAll(s).forEach(function(el){
        if (el.id && el.id.indexOf('lb-') === 0) return;
        el.style.cssText += 'display:none!important';
      });
    });
    // نخفي بس النافقيشن الرئيسي الأصلي (مو أي nav داخل صفحة المنتجات)
    document.querySelectorAll('body > nav, header nav, .main-nav, .navbar').forEach(function(el){
      el.style.cssText += 'display:none!important';
    });
  }

  function buildHeader() {
    var h = document.createElement('header');
    h.id = 'lb-header';
    h.innerHTML =
      '<button id="lb-menu-btn" onclick="lbOpenDrawer()"><span></span><span></span><span></span></button>' +
      '<a href="/" id="lb-brand">Lush Beauty</a>' +
      '<button id="lb-search-btn" onclick="lbOpenSearch()">' +
        '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" width="20" height="20"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>' +
      '</button>';
    document.body.prepend(h);

    var ov = document.createElement('div');
    ov.id = 'lb-overlay';
    ov.onclick = lbCloseAll;
    document.body.appendChild(ov);

    var drw = document.createElement('div');
    drw.id = 'lb-drawer';
    drw.innerHTML =
      '<div class="lb-drw-head"><span>Lush Beauty</span><button class="lb-drw-close" onclick="lbCloseAll()">&#10005;</button></div>' +
      '<nav class="lb-drw-nav">' +
        '<a href="/أظافر-كلاسيكية/c1424615269">أظافر كلاسيكية</a>' +
        '<a href="/أظافر-صيفية/c649463398">أظافر صيفية</a>' +
        '<a href="/أظافر-كات-آي/c892814599">أظافر كات آي</a>' +
      '</nav>' +
      '<p class="lb-drw-quote">لأن كل تفصيلة تعكس جمالك</p>';
    document.body.appendChild(drw);

    var sm = document.createElement('div');
    sm.id = 'lb-search-modal';
    sm.innerHTML =
      '<input id="lb-search-input" type="text" placeholder="ابحثي عن منتج..." onkeydown="if(event.key===\'Enter\'&&this.value)location.href=\'/search?q=\'+encodeURIComponent(this.value)"/>' +
      '<button id="lb-search-close" onclick="lbCloseAll()">&#10005;</button>';
    document.body.appendChild(sm);
  }

  function buildHero() {
    document.querySelectorAll('.slideshow,[class*="slideshow"],.banner,[class*="hero-banner"]').forEach(function(el){
      el.style.cssText += 'display:none!important';
    });
    var hero = document.createElement('section');
    hero.id = 'lb-hero';
    hero.innerHTML =
      '<img id="lb-hero-img" src="' + HERO + '" alt="Lush Beauty"/>' +
      '<div class="lb-hero-overlay"></div>' +
      '<div class="lb-hero-content">' +
        '<h1 class="lb-hero-title">أظافر تليق بذوقك</h1>' +
        '<div class="lb-hero-trust"><span class="lb-star">&#9733;</span><span>أكثر من 500 عميلة سعيدة</span></div>' +
        '<a href="/shop" id="lb-cta">تسوقي الآن</a>' +
      '</div>';
    var h = document.getElementById('lb-header');
    h ? h.after(hero) : document.body.prepend(hero);
  }

  function setupScroll() {
    var h = document.getElementById('lb-header');
    window.addEventListener('scroll', function(){
      if (h) h.classList.toggle('scrolled', scrollY > 40);
    }, {passive:true});
  }

  window.lbOpenDrawer = function(){
    document.getElementById('lb-drawer').classList.add('open');
    document.getElementById('lb-overlay').classList.add('show');
    document.getElementById('lb-menu-btn').classList.add('open');
  };
  window.lbOpenSearch = function(){
    document.getElementById('lb-search-modal').classList.add('open');
    document.getElementById('lb-overlay').classList.add('show');
    setTimeout(function(){document.getElementById('lb-search-input').focus();},150);
  };
  window.lbCloseAll = function(){
    ['lb-drawer','lb-search-modal'].forEach(function(id){
      var el=document.getElementById(id); if(el) el.classList.remove('open');
    });
    var ov=document.getElementById('lb-overlay'); if(ov) ov.classList.remove('show');
    var mb=document.getElementById('lb-menu-btn'); if(mb) mb.classList.remove('open');
  };
})();