// مدیریت منو همبرگر
const menuIcon = document.querySelector('.menu-hamberger-icon');
const menuOverlay = document.getElementById('menuOverlay');
const menuPanel = document.getElementById('menuPanel');

// باز کردن منو
function openMenu() {
    // فعال کردن overlay
    menuOverlay.classList.remove('pointer-events-none');
    menuOverlay.style.opacity = '1';
    
    // باز کردن پنل منو
    menuPanel.classList.remove('translate-x-full');
    
    // غیرفعال کردن scroll صفحه اصلی
    document.body.style.overflow = 'hidden';
}

// بستن منو
function closeMenu() {
    // بستن پنل منو
    menuPanel.classList.add('translate-x-full');
    
    // fade out overlay
    menuOverlay.style.opacity = '0';
    setTimeout(() => {
        menuOverlay.classList.add('pointer-events-none');
    }, 300);
    
    // فعال کردن scroll صفحه اصلی
    document.body.style.overflow = 'auto';
}

// افزودن event listener به آیکون منو
if (menuIcon) {
    menuIcon.addEventListener('click', openMenu);
}

// بستن منو با کلیک روی overlay
menuOverlay.addEventListener('click', function(e) {
    if (e.target === menuOverlay) {
        closeMenu();
    }
});

// بستن منو با کلید ESC
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape' && menuOverlay.style.opacity === '1') {
        closeMenu();
    }
});

// بستن منو در صورت resize به دسکتاپ
window.addEventListener('resize', function() {
    if (window.innerWidth > 900 && menuOverlay.style.opacity === '1') {
        closeMenu();
    }
});

// slider.js
document.addEventListener("DOMContentLoaded", () => {
    const slider = document.getElementById("imageSlider");
    const track = document.getElementById("imageSliderTrack");
    const prevBtn = document.getElementById("sliderPrev");
    const nextBtn = document.getElementById("sliderNext");
    const dotsWrapper = document.getElementById("sliderDots");
  
    if (!slider || !track) return;
  
    const slides = track.children;
    const totalSlides = slides.length;
  
    let currentIndex = 0;
    let autoPlayTimer = null;
    const AUTO_PLAY_DELAY = 5000;
  
    // create dots
    for (let i = 0; i < totalSlides; i++) {
      const dot = document.createElement("span");
      dot.className =
        "w-2.5 h-2.5 rounded-full bg-white/60 cursor-pointer transition";
      dot.addEventListener("click", () => {
        goToSlide(i);
        restartAutoPlay();
      });
      dotsWrapper.appendChild(dot);
    }
  
    const dots = dotsWrapper.children;
  
    function updateSlider() {
      track.style.transform = `translateX(${currentIndex * 100}%)`;
  
      Array.from(dots).forEach((dot, i) => {
        dot.classList.toggle("bg-white", i === currentIndex);
        dot.classList.toggle("bg-white/60", i !== currentIndex);
      });
    }
  
    function goToSlide(index) {
      currentIndex = (index + totalSlides) % totalSlides;
      updateSlider();
    }
  
    function nextSlide() {
      goToSlide(currentIndex + 1);
    }
  
    function prevSlide() {
      goToSlide(currentIndex - 1);
    }
  
    function startAutoPlay() {
      autoPlayTimer = setInterval(nextSlide, AUTO_PLAY_DELAY);
    }
  
    function stopAutoPlay() {
      clearInterval(autoPlayTimer);
    }
  
    function restartAutoPlay() {
      stopAutoPlay();
      startAutoPlay();
    }
  
    nextBtn?.addEventListener("click", () => {
      nextSlide();
      restartAutoPlay();
    });
  
    prevBtn?.addEventListener("click", () => {
      prevSlide();
      restartAutoPlay();
    });
  
    slider.addEventListener("mouseenter", stopAutoPlay);
    slider.addEventListener("mouseleave", startAutoPlay);
  
    // init
    updateSlider();
    startAutoPlay();
  });


// Dual slider widget (fixed side banner + auto changing main slider)
document.addEventListener("DOMContentLoaded", () => {
  const widgets = document.querySelectorAll('[data-nikan-dual-slider="1"]');
  if (!widgets.length) return;

  widgets.forEach((widget) => {
    if (widget.dataset.nikanDualInit === '1') return;
    widget.dataset.nikanDualInit = '1';

    const slides = Array.from(widget.querySelectorAll('.nikan-dual-main-slide'));
    if (!slides.length) return;

    const dotsWrap = widget.querySelector('.nikan-dual-dots');
    const prevBtn = widget.querySelector('.nikan-dual-prev');
    const nextBtn = widget.querySelector('.nikan-dual-next');
    const intervalSec = Math.max(2, parseInt(widget.getAttribute('data-interval') || '5', 10) || 5);
    const delay = intervalSec * 1000;

    let idx = 0;
    let timer = null;

    function show(i){
      idx = (i + slides.length) % slides.length;
      slides.forEach((s, k) => {
        s.classList.toggle('is-active', k === idx);
      });
      if (dotsWrap){
        Array.from(dotsWrap.children).forEach((d, k) => {
          d.classList.toggle('is-active', k === idx);
        });
      }
    }

    function next(){ show(idx + 1); }
    function prev(){ show(idx - 1); }
    function start(){ timer = setInterval(next, delay); }
    function stop(){ if (timer){ clearInterval(timer); timer = null; } }
    function restart(){ stop(); start(); }

    // dots
    if (dotsWrap){
      dotsWrap.innerHTML = '';
      slides.forEach((_, i) => {
        const btn = document.createElement('button');
        btn.type = 'button';
        btn.className = 'nikan-dual-dot';
        btn.setAttribute('aria-label', `اسلاید ${i + 1}`);
        btn.addEventListener('click', () => { show(i); restart(); });
        dotsWrap.appendChild(btn);
      });
    }

    widget.addEventListener('mouseenter', stop);
    widget.addEventListener('mouseleave', start);
    widget.addEventListener('focusin', stop);
    widget.addEventListener('focusout', start);

    prevBtn?.addEventListener('click', () => { prev(); restart(); });
    nextBtn?.addEventListener('click', () => { next(); restart(); });

    // init
    show(0);
    start();
  });
});
  

  // ./src/js/discount-slider.js
document.addEventListener("DOMContentLoaded", () => {
    const track = document.getElementById("discountTrack");
    const prev = document.getElementById("discPrev");
    const next = document.getElementById("discNext");
  
    const tH = document.querySelector('[data-timer="h"]');
    const tM = document.querySelector('[data-timer="m"]');
    const tS = document.querySelector('[data-timer="s"]');
    const progress = document.getElementById("dealProgress");
  
    if (!track) return;
  
    // ---- helpers (fa digits) ----
    const nf = new Intl.NumberFormat("fa-IR");
    const toFa = (val) => nf.format(Number(val));
    const toFa2 = (n) => String(n).padStart(2, "0").replace(/[0-9]/g, (d) => "۰۱۲۳۴۵۶۷۸۹"[+d]);
  
    // ---- format numbers in cards ----
    track.querySelectorAll("[data-price]").forEach((el) => {
      const v = el.getAttribute("data-price");
      if (v) el.textContent = toFa(v);
    });
  
    track.querySelectorAll("[data-old-price]").forEach((el) => {
      const v = el.getAttribute("data-old-price");
      if (v) el.textContent = `${toFa(v)} تومان`;
    });
  
    track.querySelectorAll("[data-discount]").forEach((el) => {
      const v = el.getAttribute("data-discount");
      if (v) el.textContent = `٪${toFa(v)}`;
    });
  
    track.querySelectorAll("[data-rate]").forEach((el) => {
      const v = el.getAttribute("data-rate");
      if (!v) return;
      el.textContent = String(v).replace(/[0-9]/g, (d) => "۰۱۲۳۴۵۶۷۸۹"[+d]);
    });
  
    // ---- slider buttons (RTL-friendly) ----
    const step = () => {
      const card = track.querySelector("article");
      if (!card) return 320;
      const rect = card.getBoundingClientRect();
      return Math.max(260, Math.round(rect.width + 24));
    };
  
    const go = (dir) => track.scrollBy({ left: dir * step(), behavior: "smooth" });
  
    // In RTL, visually "prev" should move right, "next" should move left
    prev?.addEventListener("click", () => go(+1));
    next?.addEventListener("click", () => go(-1));
  
    // ---- 24h looping timer ----
    const DAY_MS = 24 * 60 * 60 * 1000;
    const KEY = "discount_deal_cycle_start_v1";
  
    const now = Date.now();
    let start = Number(localStorage.getItem(KEY) || 0);
  
    if (!start || now - start >= DAY_MS) {
      start = now;
      localStorage.setItem(KEY, String(start));
    }
  
    const tick = () => {
      const n = Date.now();
      let elapsed = n - start;
  
      if (elapsed >= DAY_MS) {
        start = n;
        localStorage.setItem(KEY, String(start));
        elapsed = 0;
      }
  
      const remaining = DAY_MS - elapsed;
  
      const totalSeconds = Math.floor(remaining / 1000);
      const h = Math.floor(totalSeconds / 3600);
      const m = Math.floor((totalSeconds % 3600) / 60);
      const s = totalSeconds % 60;
  
      if (tH) tH.textContent = toFa2(h);
      if (tM) tM.textContent = toFa2(m);
      if (tS) tS.textContent = toFa2(s);
  
      if (progress) {
        const percent = Math.min(100, Math.max(0, (elapsed / DAY_MS) * 100));
        progress.style.width = `${percent}%`;
      }
    };
  
    tick();
    setInterval(tick, 1000);
  });
  








/* ./src/js/discount-section.js
   ✅ تایمر ۲۴ ساعته (لوپ) + نوار پیشرفت (کار می‌کند)
   ✅ دکمه‌های قبلی/بعدی با scrollIntoView (RTL-safe و بدون دردسر scrollLeft)
*/
document.addEventListener("DOMContentLoaded", () => {
    // ---------- Helpers ----------
    const faMap = ["۰","۱","۲","۳","۴","۵","۶","۷","۸","۹"];
    const toFaDigits = (v) => String(v).replace(/\d/g, (d) => faMap[Number(d)]);
    const pad2 = (n) => (n < 10 ? `0${n}` : String(n));
  
    // ---------- TIMER (24h loop) ----------
    const elH = document.querySelector('[data-timer="h"]');
    const elM = document.querySelector('[data-timer="m"]');
    const elS = document.querySelector('[data-timer="s"]');
    const progress = document.getElementById("dealProgress");
  
    const DAY_MS = 24 * 60 * 60 * 1000;
    const KEY_END = "deal_timer_end_v2";
  
    const now = () => Date.now();
    const getEnd = () => {
      const raw = localStorage.getItem(KEY_END);
      const t = raw ? Number(raw) : 0;
      if (!t || Number.isNaN(t) || t <= now()) {
        const end = now() + DAY_MS;
        localStorage.setItem(KEY_END, String(end));
        return end;
      }
      return t;
    };
  
    let endAt = getEnd();
    const startAt = () => endAt - DAY_MS;
  
    const tick = () => {
      // اگر لوکال‌استوری محدود بود، باز هم کار کن
      if (!endAt || Number.isNaN(endAt)) endAt = now() + DAY_MS;
  
      if (now() >= endAt) {
        endAt = now() + DAY_MS;
        try { localStorage.setItem(KEY_END, String(endAt)); } catch {}
      }
  
      const remainingMs = Math.max(0, endAt - now());
      const totalSec = Math.floor(remainingMs / 1000);
  
      const h = Math.floor(totalSec / 3600);
      const m = Math.floor((totalSec % 3600) / 60);
      const s = totalSec % 60;
  
      if (elH) elH.textContent = toFaDigits(pad2(h));
      if (elM) elM.textContent = toFaDigits(pad2(m));
      if (elS) elS.textContent = toFaDigits(pad2(s));
  
      if (progress) {
        const elapsed = now() - startAt();
        const pct = Math.min(100, Math.max(0, (elapsed / DAY_MS) * 100));
        progress.style.width = `${pct}%`;
      }
    };
  
    tick();
    setInterval(tick, 1000);
  
    // ---------- Slider Buttons (Prev/Next) ----------
    const track = document.getElementById("discountTrack");
    const btnPrev = document.getElementById("discPrev");
    const btnNext = document.getElementById("discNext");
  
    if (!track || !btnPrev || !btnNext) return;
  
    const cards = Array.from(track.querySelectorAll("article.snap-start"));
    if (!cards.length) return;
  
    // پیدا کردن کارت نزدیک به مرکزِ ویو
    const getActiveIndex = () => {
      const tr = track.getBoundingClientRect();
      const center = tr.left + tr.width / 2;
  
      let bestIdx = 0;
      let bestDist = Infinity;
  
      cards.forEach((card, i) => {
        const r = card.getBoundingClientRect();
        const c = r.left + r.width / 2;
        const dist = Math.abs(c - center);
        if (dist < bestDist) {
          bestDist = dist;
          bestIdx = i;
        }
      });
  
      return bestIdx;
    };
  
    const goTo = (idx) => {
      const i = Math.max(0, Math.min(cards.length - 1, idx));
      cards[i].scrollIntoView({ behavior: "smooth", inline: "start", block: "nearest" });
    };
  
    btnNext.addEventListener("click", () => {
      const i = getActiveIndex();
      goTo(i + 1);
    });
  
    btnPrev.addEventListener("click", () => {
      const i = getActiveIndex();
      goTo(i - 1);
    });
  });

  







  /* best-seller-slider.js
   اسلایدر افقی محصولات (RTL) با دکمه‌های قبلی/بعدی + دات‌ها
*/
(() => {
  const track = document.getElementById("bestSellerTrack");
  const prevBtn = document.getElementById("bestPrev");
  const nextBtn = document.getElementById("bestNext");
  const dotsWrap = document.getElementById("bestSellerDots");

  if (!track || !prevBtn || !nextBtn || !dotsWrap) return;

  const cards = Array.from(track.querySelectorAll("article"));
  if (!cards.length) return;

  // دات‌ها: چون ۶ محصول داریم و روی دسکتاپ ۴تا دیده میشه => ۳ صفحه (4 + 2)
  // روی موبایل/تبلت هم همین ۳ دات منطقی و نزدیک به نمونه می‌مونه
  const dots = Array.from(dotsWrap.children);
  const pages = dots.length;

  // محاسبه قدم اسکرول: برابر با عرض یک کارت + gap
  function getStep() {
    const first = cards[0];
    const rect = first.getBoundingClientRect();
    const style = window.getComputedStyle(track);
    const gap = parseFloat(style.columnGap || style.gap || "0") || 0;
    return rect.width + gap;
  }

  // پیدا کردن صفحه فعلی بر اساس میزان اسکرول
  function getPageIndex() {
    const maxScroll = track.scrollWidth - track.clientWidth;
    if (maxScroll <= 0) return 0;

    const progress = track.scrollLeft / maxScroll; // RTL هم کار می‌کند چون مقدار واقعی scrollLeft را می‌خوانیم
    const idx = Math.round(progress * (pages - 1));
    return Math.max(0, Math.min(pages - 1, idx));
  }

  // آپدیت ظاهر دات‌ها
  function renderDots(active) {
    dots.forEach((d, i) => {
      if (i === active) {
        d.classList.remove("w-2", "bg-slate-200");
        d.classList.add("w-8", "bg-slate-900");
      } else {
        d.classList.remove("w-8", "bg-slate-900");
        d.classList.add("w-2", "bg-slate-200");
      }
    });
  }

  // اسکرول به صفحه (۰..۲)
  function scrollToPage(pageIndex) {
    const maxScroll = track.scrollWidth - track.clientWidth;
    if (maxScroll <= 0) return;

    const target = (pageIndex / (pages - 1)) * maxScroll;
    track.scrollTo({ left: target, behavior: "smooth" });
  }

  // حرکت یک قدم (به جلو/عقب)
  function scrollByStep(dir) {
    const step = getStep();

    // در RTL، جهت‌ها ممکنه برعکس برداشت بشه؛
    // اینجا با تجربه عملی: برای "بعدی" به سمت چپ می‌ریم (scrollLeft کمتر/بیشتر بسته به مرورگر)
    // پس از scrollBy استفاده می‌کنیم تا مرورگر خودش هندل کند.
    track.scrollBy({ left: dir * step, behavior: "smooth" });
  }

  // دکمه‌ها
  prevBtn.addEventListener("click", () => scrollByStep(+1)); // در RTL: قبلی (به راست)
  nextBtn.addEventListener("click", () => scrollByStep(-1)); // در RTL: بعدی (به چپ)

  // کلیک روی دات‌ها
  dots.forEach((dot, i) => {
    dot.style.cursor = "pointer";
    dot.addEventListener("click", () => scrollToPage(i));
  });

  // آپدیت دات‌ها هنگام اسکرول
  let raf = null;
  track.addEventListener("scroll", () => {
    if (raf) cancelAnimationFrame(raf);
    raf = requestAnimationFrame(() => {
      renderDots(getPageIndex());
    });
  });

  // رندر اولیه
  renderDots(0);

  // با تغییر سایز، دات‌ها و صفحه دوباره درست سینک بشن
  window.addEventListener("resize", () => {
    renderDots(getPageIndex());
  });
})();




// برای پاپ آپ ثبت نام

// Mega Menu (Hover stable + Tabs switch)
(() => {
  const megaMenu = document.getElementById("megaMenu");
  const trigger = document.getElementById("megaTrigger");
  const panel = document.getElementById("megaPanel");
  
  // بررسی وجود عناصر قبل از ادامه
  if (!megaMenu || !trigger || !panel) {
    return;
  }
  
  const tabs = megaMenu.querySelectorAll(".mega-tab");
  const contents = megaMenu.querySelectorAll(".mega-content");

  let closeTimer = null;

  const openMenu = () => {
    if (closeTimer) clearTimeout(closeTimer);
    panel.classList.remove("hidden");
  };

  const closeMenu = () => {
    closeTimer = setTimeout(() => {
      panel.classList.add("hidden");
    }, 120);
  };

  const setActive = (key) => {
    if (!key) return;
    
    // content
    contents.forEach((c) => {
      if (c.dataset.content) {
        c.classList.toggle("hidden", c.dataset.content !== key);
      }
    });

    // tab active styles (فقط با Tailwind کلاس اضافه/کم می‌کنیم)
    tabs.forEach((t) => {
      const isActive = t.dataset.tab === key;
      t.classList.toggle("bg-white", isActive);
      t.classList.toggle("shadow-sm", isActive);
      t.classList.toggle("text-orange-600", isActive);
      t.classList.toggle("border", isActive);
      t.classList.toggle("border-orange-200", isActive);
    });
  };

  // default active tab - فعال کردن اولین تب به صورت خودکار
  if (tabs.length > 0 && tabs[0].dataset.tab) {
    setActive(tabs[0].dataset.tab);
  }

  // open/close (hover)
  trigger.addEventListener("mouseenter", openMenu);
  megaMenu.addEventListener("mouseenter", openMenu);
  megaMenu.addEventListener("mouseleave", closeMenu);

  // tab hover
  tabs.forEach((tab) => {
    tab.addEventListener("mouseenter", () => {
      if (tab.dataset.tab) {
        setActive(tab.dataset.tab);
      }
    });
  });
})();



// منو برای موبایل

(() => {
  // فقط داخل منوی موبایل اجرا شود (اگر id داری بهتره، ولی این هم امنه)
  const root = document.querySelector(".menuPanelMobile") || document; 

  const toggles = root.querySelectorAll("a.dd-toggle");

  toggles.forEach((toggle) => {
    toggle.addEventListener("click", (e) => {
      e.preventDefault();
      e.stopPropagation();

      const li = toggle.closest("li");
      if (!li) return;

      // اولین sub-menu داخل همین li
      const submenu = li.querySelector(":scope > ul.sub-menu");
      if (!submenu) return;

      const isOpen = !submenu.classList.contains("hidden");

      if (isOpen) {
        submenu.classList.add("hidden");
        li.classList.remove("open");
        const icon = toggle.querySelector(".icon-plus");
        if (icon) icon.textContent = "+";
      } else {
        submenu.classList.remove("hidden");
        li.classList.add("open");
        const icon = toggle.querySelector(".icon-plus");
        if (icon) icon.textContent = "×";
      }
    });
  });
})();

