/* 1) الفيديو المتحرك */

document.addEventListener("DOMContentLoaded", function () {
    const banner = document.querySelector(".s-block.s-block--fixed-banner");

    if (!banner) return;

    banner.innerHTML = `
        <div class="hero-video-wrapper">

            <video autoplay muted loop playsinline>
                <source src="https://eldivenevi.com/lalan/Man_walking_toward_camera_202607061622.mp4" type="video/mp4">
            </video>

            <div class="hero-content">
                <h1>الأناقة تبدأ من هنا</h1>

                <p>تصاميم عصرية، خامات عالية، وراحة تدوم طوال اليوم.</p>

                <a href="/تيشيرتات/c1020293372" class="hero-btn">
                    تسوق الآن
                </a>
            </div>

        </div>
    `;
});

/* 2) الكلام الي فوق صور التصنيفات */

document.addEventListener("DOMContentLoaded", function () {
  const bannerSections = document.querySelectorAll(".s-block.s-block--banners");
  const categoriesSection = bannerSections[bannerSections.length - 1];

  if (!categoriesSection) return;

  const title = document.createElement("div");
  title.className = "oxy-category-title";
  title.innerHTML = `
    <h2>تسوق حسب الفئة</h2>
    <p>اختر الفئة المناسبة واستكشف أحدث تشكيلاتنا.</p>
  `;

  categoriesSection.insertAdjacentElement("beforebegin", title);
});


/* 3) ترتيب صور الفئات على الجوال فقط */

document.addEventListener("DOMContentLoaded", function () {
  const bannerSections = document.querySelectorAll(".s-block.s-block--banners");

  bannerSections.forEach((section) => {
    const items = section.querySelectorAll(".banner-entry");

    if (items.length === 5) {
      section.classList.add("oxy-categories-section");
    }
  });
});



/* 4) الكلام الي فوق صور المنتجات المتحركة */


document.addEventListener("DOMContentLoaded", function () {
  const latestSection = document.querySelector("#featured-products-style2-3");

  if (!latestSection || latestSection.querySelector(".oxy-latest-title")) return;

  const title = document.createElement("div");
  title.className = "oxy-latest-title";
  title.innerHTML = `
    <h2>وصل حديثًا</h2>
    <p>اكتشف أحدث القطع المضافة إلى مجموعتنا.</p>
  `;

  latestSection.querySelector(".container")
    .insertAdjacentElement("afterbegin", title);
});



/* 5) الكلام الي فوق التصاميم العصرية وايضاً تغيير الشكل */

document.addEventListener("DOMContentLoaded", function () {
  const whySection = [...document.querySelectorAll(".s-block.s-block--features")]
    .find(section =>
      [...section.querySelectorAll("h2")]
        .some(title => title.textContent.trim() === "تصاميم عصرية")
    );

  if (!whySection) return;

  whySection.classList.add("oxy-why-lalan");

  if (!whySection.querySelector(".oxy-why-title")) {
    const title = document.createElement("div");
    title.className = "oxy-why-title";
    title.innerHTML = `
      <h2>لماذا تختار LALAN؟</h2>
      <p>لأننا نهتم بأدق التفاصيل لنقدم لك تجربة تسوق تجمع بين الجودة، الراحة، والثقة.</p>
    `;

    whySection.prepend(title);
  }
});



/* 6) الفوتر  */

document.addEventListener("DOMContentLoaded", function () {
  const brandColumn = document.querySelector(
    ".store-footer__inner .container > div:first-child"
  );

  if (!brandColumn || brandColumn.querySelector(".lalan-footer-description")) return;

  const brandLink = brandColumn.querySelector("a");

  const desc = document.createElement("p");
  desc.className = "lalan-footer-description";
  desc.textContent =
    "متجر متخصص في الأزياء الرجالية، نقدم تصاميم عصرية وخامات مختارة بعناية لتمنحك الأناقة والراحة في كل إطلالة.";

  if (brandLink) {
    brandLink.insertAdjacentElement("afterend", desc);
  }
});
document.addEventListener("DOMContentLoaded", function () {

  function arrangeFooterSocial() {
    const footer = document.querySelector(".store-footer");
    if (!footer) return;

    const appsColumn = footer.querySelector("salla-apps-icons");
    const desktopSocial = footer.querySelector(
      ".store-footer__inner .hidden.lg\\:block salla-social"
    );

    if (!appsColumn || !desktopSocial) return;

    /* منع تكرار الإضافة */
    if (appsColumn.querySelector(".lalan-social-title")) return;

    const title = document.createElement("h3");
    title.className = "lalan-social-title";
    title.textContent = "تابعنا على وسائل التواصل";

    appsColumn.prepend(title);

    /* نقل أيقونات التواصل إلى العمود الأيسر */
    appsColumn.appendChild(desktopSocial);
    appsColumn.classList.add("lalan-social-column");
  }

  arrangeFooterSocial();

  /* لأن عناصر سلة قد تتأخر في الظهور */
  setTimeout(arrangeFooterSocial, 500);
  setTimeout(arrangeFooterSocial, 1500);
});


/* 7) صفحة المنتج  */
/* 7.1) صفحة المنتج المقاسات  */


document.addEventListener("DOMContentLoaded", function () {
  function buildSizeButtons() {
    const select = document.querySelector(
      '.product-form select[name^="options["]'
    );

    if (!select || select.dataset.oxySizesReady === "true") return;

    const optionContainer = select.closest(
      ".s-product-options-option-content"
    );

    if (!optionContainer) return;

    select.dataset.oxySizesReady = "true";

    const buttonsWrap = document.createElement("div");
    buttonsWrap.className = "oxy-size-buttons";

    [...select.options].forEach((option, index) => {
      if (index === 0 || !option.value) return;

      const button = document.createElement("button");
      button.type = "button";
      button.className = "oxy-size-button";
      button.dataset.value = option.value;

      const cleanLabel = option.textContent
        .replace(/\s*-\s*نفدت الكمية\s*/g, "")
        .trim();

      button.textContent = cleanLabel;

      if (
        option.disabled ||
        option.textContent.includes("نفدت الكمية")
      ) {
        button.disabled = true;
        button.classList.add("is-out");
      }

      button.addEventListener("click", function () {
        if (button.disabled) return;

        select.value = option.value;

        select.dispatchEvent(
          new Event("change", {
            bubbles: true
          })
        );

        buttonsWrap
          .querySelectorAll(".oxy-size-button")
          .forEach((item) => item.classList.remove("is-active"));

        button.classList.add("is-active");
      });

      buttonsWrap.appendChild(button);
    });

    optionContainer.appendChild(buttonsWrap);
    select.classList.add("oxy-size-select-hidden");
  }

  buildSizeButtons();

  const observer = new MutationObserver(buildSizeButtons);

  observer.observe(document.body, {
    childList: true,
    subtree: true
  });

  setTimeout(buildSizeButtons, 800);
  setTimeout(buildSizeButtons, 2000);
});



/* 7.2) صفحة المنتج عناصر الثقة  */

function addLalanTrustBox() {
  const buyButton = document.querySelector(
    ".product-form .sticky-product-bar salla-add-product-button"
  );

  if (!buyButton) return;
  if (document.querySelector(".lalan-trust-box")) return;

  const trustBox = document.createElement("div");
  trustBox.className = "lalan-trust-box";

  trustBox.innerHTML = `
    <div class="lalan-trust-item">
      <span class="lalan-trust-check">✓</span>
      <div>
        <strong>شحن حسب الطلب</strong>
        <small>التوصيل المتوقع خلال 10 أيام.</small>
      </div>
    </div>

    <div class="lalan-trust-item">
      <span class="lalan-trust-check">✓</span>
      <div>
        <strong>دعم عملاء سعودي</strong>
        <small>دعم ومتابعة من داخل المملكة.</small>
      </div>
    </div>

    <div class="lalan-trust-item">
      <span class="lalan-trust-check">✓</span>
      <div>
        <strong>خامات عالية الجودة</strong>
        <small>تحافظ على شكلها وجودتها.</small>
      </div>
    </div>
  `;

  buyButton.insertAdjacentElement("afterend", trustBox);
}

addLalanTrustBox();

document.addEventListener("DOMContentLoaded", addLalanTrustBox);

const lalanTrustObserver = new MutationObserver(addLalanTrustBox);

lalanTrustObserver.observe(document.body, {
  childList: true,
  subtree: true
});

setTimeout(addLalanTrustBox, 500);
setTimeout(addLalanTrustBox, 1500);
setTimeout(addLalanTrustBox, 3000);


/* 7.3) تثبيت ازرار الشراء والكمية في الجوال  */

function setupLalanMobileBuyBar() {
  const buyBar = document.querySelector(
    ".product-form .sticky-product-bar"
  );

  if (!buyBar) return;

  /* إخراج صندوق الثقة من الشريط الثابت */
  const trustBox = buyBar.querySelector(".lalan-trust-box");

  if (trustBox) {
    buyBar.insertAdjacentElement("afterend", trustBox);
  }

  buyBar.classList.add("lalan-mobile-buy-bar");
}

document.addEventListener(
  "DOMContentLoaded",
  setupLalanMobileBuyBar
);

setupLalanMobileBuyBar();

const lalanBuyBarObserver = new MutationObserver(
  setupLalanMobileBuyBar
);

lalanBuyBarObserver.observe(document.body, {
  childList: true,
  subtree: true
});

setTimeout(setupLalanMobileBuyBar, 800);
setTimeout(setupLalanMobileBuyBar, 2000);


/* 7.3) نجمّل المميزات والمواصفات تلقائيًا.  */

function styleProductDescription() {
  const article = document.querySelector(
    ".product__description .article--main"
  );

  if (!article || article.dataset.oxyDescriptionReady === "true") return;

  const paragraphs = [...article.querySelectorAll("p")];

  paragraphs.forEach((p) => {
    const text = p.textContent
      .replace(/\u00a0/g, " ")
      .replace(/\s+/g, " ")
      .trim();

    if (!text) {
      p.remove();
      return;
    }

    if (text === "المميزات:" || text === "المميزات") {
      p.classList.add("oxy-description-heading");
      p.textContent = "المميزات";
      return;
    }

    if (text === "المواصفات:" || text === "المواصفات") {
      p.classList.add("oxy-description-heading");
      p.textContent = "المواصفات";
      return;
    }

    if (/^[✅✔✓]/.test(text)) {
      p.classList.add("oxy-feature-line");
      p.textContent = text.replace(/^[✅✔✓]\s*/, "");
      return;
    }

    const specMatch = text.match(
      /^(الخامة|الوزن|القصة|المقاسات)\s*:\s*(.+)$/
    );

    if (specMatch) {
      p.classList.add("oxy-spec-line");
      p.innerHTML = `
        <span class="oxy-spec-label">${specMatch[1]}</span>
        <span class="oxy-spec-value">${specMatch[2]}</span>
      `;
    }
  });

  article.dataset.oxyDescriptionReady = "true";
}

styleProductDescription();

document.addEventListener(
  "DOMContentLoaded",
  styleProductDescription
);

const oxyDescriptionObserver = new MutationObserver(
  styleProductDescription
);

oxyDescriptionObserver.observe(document.body, {
  childList: true,
  subtree: true
});

setTimeout(styleProductDescription, 500);
setTimeout(styleProductDescription, 1500);
setTimeout(styleProductDescription, 3000);


/* 7.4) تقييم المنتجات في الكرت  */

function addEmptyProductRatings() {
  const cards = document.querySelectorAll(
    ".s-products-slider-wrapper custom-salla-product-card.s-product-card-entry"
  );

  cards.forEach((card) => {
    if (card.querySelector(".lalan-card-rating")) return;

    const contentMain = card.querySelector(".s-product-card-content-main");
    if (!contentMain) return;

    const rating = document.createElement("div");
    rating.className = "lalan-card-rating";
    rating.setAttribute("aria-label", "لا توجد تقييمات بعد");

    rating.innerHTML = `
      <span class="lalan-card-stars" aria-hidden="true">
        ☆ ☆ ☆ ☆ ☆
      </span>
      <span class="lalan-card-rating-count">(0)</span>
    `;

    contentMain.insertAdjacentElement("afterend", rating);
  });
}

addEmptyProductRatings();

document.addEventListener("DOMContentLoaded", addEmptyProductRatings);

const lalanRatingObserver = new MutationObserver(addEmptyProductRatings);

lalanRatingObserver.observe(document.body, {
  childList: true,
  subtree: true
});

setTimeout(addEmptyProductRatings, 500);
setTimeout(addEmptyProductRatings, 1500);


/* 7.5) تقييم المنتجات في صفحة المنتج  */

function addLalanReviewsSection() {
  const description = document.querySelector(".product__description");

  if (!description) return;
  if (document.querySelector(".lalan-product-reviews")) return;

  const reviewsSection = document.createElement("section");
  reviewsSection.className = "lalan-product-reviews";

  reviewsSection.innerHTML = `
    <div class="lalan-reviews-header">
      <h2>تقييمات العملاء</h2>

      <div class="lalan-reviews-summary">
        <div class="lalan-reviews-stars" aria-label="لا توجد تقييمات">
          ☆ ☆ ☆ ☆ ☆
        </div>

        <div class="lalan-reviews-counts">
          <span><strong>0</strong> تقييم</span>
          <span><strong>0</strong> تعليق</span>
        </div>
      </div>
    </div>

    <div class="lalan-reviews-empty">
      <span class="lalan-reviews-empty-icon">☆</span>
      <h3>لا توجد تقييمات حتى الآن</h3>
      <p>كن أول من يقيّم هذا المنتج ويشارك تجربته.</p>
    </div>
  `;

  description.insertAdjacentElement("afterend", reviewsSection);
}

addLalanReviewsSection();

document.addEventListener(
  "DOMContentLoaded",
  addLalanReviewsSection
);

const lalanReviewsObserver = new MutationObserver(
  addLalanReviewsSection
);

lalanReviewsObserver.observe(document.body, {
  childList: true,
  subtree: true
});

setTimeout(addLalanReviewsSection, 500);
setTimeout(addLalanReviewsSection, 1500);
setTimeout(addLalanReviewsSection, 3000);


function moveLalanReviewsSection() {
  const reviewsSection = document.querySelector(".lalan-product-reviews");
  const trustBox = document.querySelector(".lalan-trust-box");
  const productForm = document.querySelector(".product-form");

  if (!reviewsSection || !productForm) return;

  const target = trustBox || productForm;

  if (reviewsSection.previousElementSibling === target) return;

  target.insertAdjacentElement("afterend", reviewsSection);
}

document.addEventListener("DOMContentLoaded", moveLalanReviewsSection);

setTimeout(moveLalanReviewsSection, 500);
setTimeout(moveLalanReviewsSection, 1500);
setTimeout(moveLalanReviewsSection, 3000);

function addReviewButton() {
  const reviewsSection = document.querySelector(".lalan-product-reviews");
  if (!reviewsSection) return;

  if (reviewsSection.querySelector(".lalan-add-review-btn")) return;

  const emptyBox = reviewsSection.querySelector(".lalan-reviews-empty");
  if (!emptyBox) return;

  const button = document.createElement("button");
  button.type = "button";
  button.className = "lalan-add-review-btn";
  button.textContent = "أضف تقييمك";

  button.addEventListener("click", function () {
    alert("يمكنك إضافة تقييم بعد شراء المنتج وتسجيل الدخول إلى حسابك.");
  });

  emptyBox.appendChild(button);
}

addReviewButton();
document.addEventListener("DOMContentLoaded", addReviewButton);

setTimeout(addReviewButton, 500);
setTimeout(addReviewButton, 1500);


/* 8) صفحة التصنيفات  */

/* اسم التصنيف + عدد المنتجات */
function setupLalanCategoryPage() {
  const pageTitle = document.querySelector("#page-main-title");
  const breadcrumbItems = document.querySelectorAll(
    ".breadcrumbs .s-breadcrumb-item"
  );

  if (!pageTitle || breadcrumbItems.length < 2) return;

  const categoryName =
    breadcrumbItems[breadcrumbItems.length - 1].textContent.trim();

  /* نحفظ عدد المنتجات قبل استبدال المحتوى */
  let productsCount = pageTitle.dataset.productsCount;

  if (!productsCount) {
    productsCount = pageTitle.textContent.trim();
    pageTitle.dataset.productsCount = productsCount;
  }

  /* إذا الاسم موجود بالفعل لا نكرره */
  if (
    pageTitle.querySelector(".lalan-category-name") &&
    pageTitle.querySelector(".lalan-products-count")
  ) {
    return;
  }

  pageTitle.innerHTML = `
    <span class="lalan-category-name">${categoryName}</span>
    <span class="lalan-products-count">${productsCount}</span>
  `;
}

/* التشغيل الأول */
setupLalanCategoryPage();

document.addEventListener(
  "DOMContentLoaded",
  setupLalanCategoryPage
);

/* لأن سلة تعيد رسم العنوان بعد تحميل المنتجات */
const lalanCategoryObserver = new MutationObserver(() => {
  setupLalanCategoryPage();
});

lalanCategoryObserver.observe(document.body, {
  childList: true,
  subtree: true
});

setTimeout(setupLalanCategoryPage, 300);
setTimeout(setupLalanCategoryPage, 800);
setTimeout(setupLalanCategoryPage, 1500);
setTimeout(setupLalanCategoryPage, 3000);


/* ==================================
   وصف SEO مختلف لكل تصنيف
   ================================== */

function addLalanCategorySeoContent() {
  if (window.location.pathname.includes("/search")) return;

  const productsList = document.querySelector(
    ".container--products-list"
  );

  const breadcrumbItems = document.querySelectorAll(
    ".breadcrumbs .s-breadcrumb-item"
  );

  if (!productsList || breadcrumbItems.length < 2) return;
  if (document.querySelector(".lalan-category-seo")) return;

  const categoryName =
    breadcrumbItems[breadcrumbItems.length - 1]
      .textContent
      .trim();

  const categoryContent = {
    "تيشيرتات": {
      title: "تيشيرتات رجالية عصرية من LALAN",
      paragraphs: [
        "اكتشف تشكيلة تيشيرتات LALAN الرجالية المصممة لتمنحك الراحة والأناقة في إطلالتك اليومية. نقدم تصاميم عصرية بخامات مختارة بعناية، تشمل التيشيرتات الأوفر سايز والتيشيرتات السادة والتيشيرتات ذات القصة العادية.",
        "تتوفر منتجاتنا بمقاسات متعددة، مع اهتمام بجودة الخامة والتشطيب للحفاظ على شكل القطعة وجودتها مع الاستخدام والغسيل."
      ]
    },

    "تيشيرتات أوفر سايز": {
      title: "تيشيرتات أوفر سايز رجالية",
      paragraphs: [
        "تسوق تيشيرتات أوفر سايز رجالية من LALAN بتصاميم عصرية وقصات واسعة تمنحك الراحة والحرية في الحركة.",
        "تتميز المجموعة بخامات مختارة وتشطيب متقن، وتناسب الإطلالات اليومية والكاجوال مع توفر مقاسات متعددة."
      ]
    },

    "تيشيرتات سادة": {
      title: "تيشيرتات سادة رجالية",
      paragraphs: [
        "اكتشف تيشيرتات سادة رجالية بتصاميم بسيطة وعملية تناسب الاستخدام اليومي وسهلة التنسيق مع الجينز والشورتات والترنقات.",
        "خامات مريحة وجودة تشطيب عالية تساعد القطعة على الحفاظ على شكلها وأناقتها."
      ]
    },

    "تيشيرتات قصة عادية": {
      title: "تيشيرتات رجالية بقصة عادية",
      paragraphs: [
        "تسوق تيشيرتات رجالية بقصة عادية تمنحك مظهرًا مرتبًا وراحة مناسبة للاستخدام اليومي.",
        "تتوفر بخامات مختارة ومقاسات متنوعة لتناسب الإطلالات الكاجوال والعملية."
      ]
    },

    "شورتات": {
      title: "شورتات رجالية مريحة وعصرية",
      paragraphs: [
        "اكتشف مجموعة شورتات LALAN الرجالية المصممة للراحة والحركة، بتصاميم عصرية مناسبة للاستخدام اليومي.",
        "تتوفر المجموعة بمقاسات متنوعة وخامات مختارة تجمع بين الراحة وجودة التشطيب."
      ]
    },

    "ترنقات": {
      title: "ترنقات رجالية يومية",
      paragraphs: [
        "تسوق ترنقات رجالية مريحة بتصاميم عملية تناسب الاستخدام اليومي والإطلالات الرياضية والكاجوال.",
        "نختار خامات مريحة وتشطيبات جيدة للحفاظ على جودة القطعة وشكلها مع الاستخدام."
      ]
    }
  };

  const currentContent = categoryContent[categoryName];

  if (!currentContent) return;

  const links = [
    {
      label: "تيشيرتات أوفر سايز",
      href: "/تيشيرتات-أوفر-سايز/c940972392"
    },
    {
      label: "تيشيرتات سادة",
      href: "/تيشيرتات-سادة/c1742227306"
    },
    {
      label: "تيشيرتات قصة عادية",
      href: "/تيشيرتات-قصة-عادية/c1567138933"
    },
    {
      label: "شورتات",
      href: "/شورتات/c1707084152"
    },
    {
      label: "ترنقات",
      href: "/ترنقات/c1476904841"
    }
  ];

  const currentLinks = links.filter(
    (link) => link.label !== categoryName
  );

  const section = document.createElement("section");
  section.className = "lalan-category-seo";

  section.innerHTML = `
    <h2>${currentContent.title}</h2>

    ${currentContent.paragraphs
      .map((paragraph) => `<p>${paragraph}</p>`)
      .join("")}

    <div class="lalan-category-links">
      <span>تسوق حسب التصنيف:</span>

      ${currentLinks
        .map(
          (link) => `
            <a href="${link.href}">
              ${link.label}
            </a>
          `
        )
        .join("")}
    </div>
  `;

  productsList.insertAdjacentElement("afterend", section);
}

document.addEventListener("DOMContentLoaded", function () {
  setTimeout(addLalanCategorySeoContent, 800);
});



/* 9) صفحة البحث  */

/* ==================================
   عنوان صفحة التصنيف
   ================================== */

/* اسم التصنيف + العدد مع الحفاظ على تحديث سلة */
function setupLalanCategoryPage() {
  if (window.location.pathname.includes("/search")) return;

  const pageTitle = document.querySelector("#page-main-title");
  const breadcrumbItems = document.querySelectorAll(
    ".breadcrumbs .s-breadcrumb-item"
  );

  if (!pageTitle || breadcrumbItems.length < 2) return;
  if (pageTitle.dataset.lalanObserverReady === "true") return;

  const categoryName =
    breadcrumbItems[breadcrumbItems.length - 1].textContent.trim();

  let lastProductsCount = pageTitle.textContent.trim();

  function renderCategoryTitle() {
    const currentText = pageTitle.textContent
      .replace(categoryName, "")
      .trim();

    /* إذا سلة كتبت عددًا جديدًا نحفظه */
    if (
      currentText &&
      !pageTitle.querySelector(".lalan-category-name")
    ) {
      lastProductsCount = currentText;
    }

    observer.disconnect();

    pageTitle.innerHTML = `
      <span class="lalan-category-name">${categoryName}</span>
      <span class="lalan-products-count">${lastProductsCount}</span>
    `;

    observer.observe(pageTitle, {
      childList: true,
      characterData: true,
      subtree: true
    });
  }

  const observer = new MutationObserver(function () {
    const categoryExists = pageTitle.querySelector(
      ".lalan-category-name"
    );

    const countExists = pageTitle.querySelector(
      ".lalan-products-count"
    );

    if (!categoryExists || !countExists) {
      renderCategoryTitle();
    }
  });

  pageTitle.dataset.lalanObserverReady = "true";
  renderCategoryTitle();
}

document.addEventListener("DOMContentLoaded", function () {
  setTimeout(setupLalanCategoryPage, 700);
});

/* ==================================
   صفحة البحث الفارغة
   ================================== */

function setupLalanSearchPage() {
  if (!window.location.pathname.includes("/search")) return;

  const emptyBox = document.querySelector(
    ".s-products-list-placeholder"
  );

  if (!emptyBox) return;
  if (emptyBox.dataset.lalanReady === "true") return;

  const text = emptyBox.querySelector("p");

  if (text) {
    text.innerHTML = `
      <strong>لم نعثر على منتجات مطابقة</strong><br>
      جرّب كلمة مختلفة أو تصفح جميع المنتجات.
    `;
  }

  emptyBox.insertAdjacentHTML(
    "beforeend",
    `
      <a href="/تيشيرتات/c1020293372" class="lalan-search-btn">
        تصفح المنتجات
      </a>
    `
  );

  emptyBox.dataset.lalanReady = "true";
}


/* تشغيل آمن مرة واحدة بعد اكتمال الصفحة */
document.addEventListener("DOMContentLoaded", function () {
  setTimeout(setupLalanCategoryPage, 800);
  setTimeout(setupLalanSearchPage, 800);
});


/* 10) صفحة المفضلة  */

/* ==================================
   تحسين صفحة المفضلة
   ================================== */

function setupLalanWishlist() {
  if (
    !window.location.pathname.includes(
      "/account/wishlist"
    )
  ) {
    return;
  }

  document.title = "LALAN - المفضلة";

  const wishlist =
    document.querySelector("#wishlist");

  const title =
    document.querySelector(
      ".s-wishlist-actions-page-title"
    );

  if (!wishlist || !title) return;

  /* حذف زر المشاركة بالكامل */
  wishlist
    .querySelectorAll(
      "salla-wishlist-actions, .s-wishlist-actions"
    )
    .forEach((element) => {
      element.style.setProperty("display", "none", "important");
    });

  const products = wishlist.querySelectorAll(
    "custom-wishlist-card"
  );

  /* إصلاح alt الصور */
  products.forEach((card) => {
    const image = card.querySelector(
      ".product-entry__image img"
    );

    const productName = card
      .querySelector("h3 a")
      ?.textContent
      .trim();

    if (
      image &&
      productName &&
      (!image.alt || image.alt === "undefined")
    ) {
      image.alt = productName;
    }
  });

  /* عنوان الصفحة وعدد المنتجات */
  title.innerHTML = `
    <span>المفضلة</span>
    <span class="lalan-wishlist-count">
      ${products.length}
    </span>
  `;

  document.body.classList.add(
  "lalan-wishlist-ready"
);

  const oldEmptyState = wishlist.querySelector(
    ".lalan-wishlist-empty"
  );

  /* يوجد منتجات */
  if (products.length > 0) {
    if (oldEmptyState) oldEmptyState.remove();
    return;
  }

  /* الحالة الفارغة موجودة مسبقًا */
  if (oldEmptyState) return;

  const emptyState = document.createElement("div");
  emptyState.className = "lalan-wishlist-empty";

  emptyState.innerHTML = `
    <div class="lalan-wishlist-empty-icon">♡</div>

    <h2>المفضلة فارغة</h2>

    <p>
      لم تضف أي منتجات إلى المفضلة حتى الآن.
      تصفح منتجاتنا واحفظ القطع التي أعجبتك للعودة إليها لاحقًا.
    </p>

    <a
      href="/تيشيرتات/c1020293372"
      class="lalan-wishlist-shop-btn"
    >
      تصفح المنتجات
    </a>
  `;

  wishlist.appendChild(emptyState);
}

document.addEventListener("DOMContentLoaded", function () {
  setupLalanWishlist();

  setTimeout(setupLalanWishlist, 300);

  setTimeout(setupLalanWishlist, 900);
});

/* تحديث العدد والحالة الفارغة بعد الحذف */
setTimeout(function () {
  const wishlist = document.querySelector("#wishlist");

  if (
    !wishlist ||
    wishlist.dataset.lalanWishlistObserver === "true"
  ) {
    return;
  }

  wishlist.dataset.lalanWishlistObserver = "true";

  let timer;

  const observer = new MutationObserver(function () {
    clearTimeout(timer);
    timer = setTimeout(setupLalanWishlist, 250);
  });

  observer.observe(wishlist, {
    childList: true,
    subtree: true
  });
}, 1000);


 /* ==========================================
   11) هيدر LALAN — الكود الكامل
   ========================================== */

(function () {
  "use strict";

  const isLalanHomePage =
  window.location.pathname === "/" ||
  window.location.pathname === "";

if (isLalanHomePage) {
  document.documentElement.classList.add(
    "lalan-home-page"
  );
}
  const LALAN = {
    adsTimer: null,
    adsAnimating: false,
    stickyReady: false
  };

  /* ==========================================
     11.1) سلايدر شريط الإعلانات
     الخلفية ثابتة والنص فقط يتحرك
     ========================================== */

  function setupLalanAdsSlider() {
    const wrapper = document.querySelector("salla-advertisement");

    if (!wrapper) return false;

    if (wrapper.dataset.lalanAdsReady === "true") {
      return true;
    }

    const originalAds = Array.from(
      wrapper.querySelectorAll(":scope > .s-advertisement")
    );

    if (!originalAds.length) return false;

    const announcements = originalAds
      .map((ad) => {
        const link = ad.querySelector(
          ".s-advertisement-content-main a"
        );

        return {
          text: link?.textContent.trim() || "",
          href: link?.getAttribute("href") || "#",
          target: link?.getAttribute("target") || "_self"
        };
      })
      .filter((item) => item.text);

    if (!announcements.length) return false;

    wrapper.dataset.lalanAdsReady = "true";
    wrapper.classList.add("lalan-announcement-slider");

    /* تثبيت ألوان أول إعلان */
    const firstStyle = window.getComputedStyle(originalAds[0]);

    wrapper.style.setProperty(
      "--lalan-ad-bg",
      firstStyle.backgroundColor || "#000"
    );

    wrapper.style.setProperty(
      "--lalan-ad-color",
      firstStyle.color || "#fff"
    );

    /* إخفاء الإعلانات الأصلية */
    originalAds.forEach((ad) => {
      ad.hidden = true;
      ad.style.setProperty("display", "none", "important");
    });

    const slider = document.createElement("div");
    slider.className = "lalan-announcement-inner";

    slider.innerHTML = `
      <button
        type="button"
        class="lalan-announcement-arrow lalan-announcement-prev"
        aria-label="الإعلان السابق"
      >
        ‹
      </button>

      <div class="lalan-announcement-stage">
        <a
          href="#"
          target="_self"
          class="lalan-announcement-link"
        >
          <span class="lalan-announcement-text"></span>
        </a>
      </div>

      <button
        type="button"
        class="lalan-announcement-arrow lalan-announcement-next"
        aria-label="الإعلان التالي"
      >
        ›
      </button>

      <button
        type="button"
        class="lalan-announcement-close"
        aria-label="إغلاق شريط الإعلان"
      >
        ×
      </button>
    `;

    wrapper.appendChild(slider);

    const textElement = slider.querySelector(
      ".lalan-announcement-text"
    );

    const linkElement = slider.querySelector(
      ".lalan-announcement-link"
    );

    const previousButton = slider.querySelector(
      ".lalan-announcement-prev"
    );

    const nextButton = slider.querySelector(
      ".lalan-announcement-next"
    );

    const closeButton = slider.querySelector(
      ".lalan-announcement-close"
    );

    let currentIndex = 0;

    function applyAnnouncement(index) {
      const announcement = announcements[index];

      if (!announcement) return;

      linkElement.href = announcement.href;
      linkElement.target = announcement.target;
      textElement.textContent = announcement.text;
    }

    function renderAnnouncement(index, direction) {
      if (LALAN.adsAnimating) return;

      LALAN.adsAnimating = true;

      textElement.classList.remove(
        "is-visible",
        "is-entering-next",
        "is-entering-prev",
        "is-leaving-next",
        "is-leaving-prev"
      );

      textElement.classList.add(
        direction === "previous"
          ? "is-leaving-prev"
          : "is-leaving-next"
      );

      window.setTimeout(() => {
        applyAnnouncement(index);

        textElement.classList.remove(
          "is-leaving-next",
          "is-leaving-prev"
        );

        textElement.classList.add(
          direction === "previous"
            ? "is-entering-prev"
            : "is-entering-next"
        );

        requestAnimationFrame(() => {
          requestAnimationFrame(() => {
            textElement.classList.remove(
              "is-entering-next",
              "is-entering-prev"
            );

            textElement.classList.add("is-visible");

            window.setTimeout(() => {
              LALAN.adsAnimating = false;
            }, 320);
          });
        });

        currentIndex = index;
      }, 220);
    }

    function showNext() {
      const index =
        (currentIndex + 1) % announcements.length;

      renderAnnouncement(index, "next");
    }

    function showPrevious() {
      const index =
        (currentIndex - 1 + announcements.length) %
        announcements.length;

      renderAnnouncement(index, "previous");
    }

    function stopAutoplay() {
      if (!LALAN.adsTimer) return;

      window.clearInterval(LALAN.adsTimer);
      LALAN.adsTimer = null;
    }

    function startAutoplay() {
      stopAutoplay();

      if (announcements.length <= 1) return;

      LALAN.adsTimer = window.setInterval(
        showNext,
        4500
      );
    }

    applyAnnouncement(0);
    textElement.classList.add("is-visible");

    previousButton.addEventListener("click", () => {
      stopAutoplay();
      showPrevious();
      startAutoplay();
    });

    nextButton.addEventListener("click", () => {
      stopAutoplay();
      showNext();
      startAutoplay();
    });

    closeButton.addEventListener("click", () => {
      stopAutoplay();

      wrapper.style.transition =
        "height .25s ease, min-height .25s ease, opacity .25s ease";

      wrapper.style.opacity = "0";
      wrapper.style.height = "0";
      wrapper.style.minHeight = "0";

      window.setTimeout(() => {
  wrapper.style.setProperty(
    "display",
    "none",
    "important"
  );
}, 260);
    });

    wrapper.addEventListener(
      "mouseenter",
      stopAutoplay
    );

    wrapper.addEventListener(
      "mouseleave",
      startAutoplay
    );

    document.addEventListener(
      "visibilitychange",
      () => {
        if (document.hidden) {
          stopAutoplay();
        } else {
          startAutoplay();
        }
      }
    );

    if (announcements.length <= 1) {
      previousButton.hidden = true;
      nextButton.hidden = true;
    }

    startAutoplay();

    return true;
  }

  /* ==========================================
     11.2) روابط القائمة
     ========================================== */

  function setupLalanMenu(desktopMenu) {
    if (!desktopMenu) return;

    function findDirectItem(label) {
      return Array.from(
        desktopMenu.querySelectorAll(
          ":scope > li.root-level"
        )
      ).find((item) => {
        const text = item
          .querySelector(":scope > a > span")
          ?.textContent
          .trim();

        return text === label;
      });
    }

    function createMenuItem(label, href, extraClass = "") {
      const item = document.createElement("li");

      item.className =
  `root-level lalan-extra-menu-item ${extraClass}`;
      
      item.dataset.menuItem = "";

      item.innerHTML = `
        <a href="${href}" aria-label="${label}">
          <span>${label}</span>
        </a>
      `;

      return item;
    }

    /* حذف التخفيضات */
    desktopMenu
      .querySelectorAll(':scope > li[id="offers"]')
      .forEach((item) => item.remove());

    /* الرئيسية */
    if (!findDirectItem("الرئيسية")) {
      desktopMenu.insertAdjacentElement(
        "afterbegin",
        createMenuItem(
          "الرئيسية",
          "/",
          "lalan-home-menu-item"
        )
      );
    }

    /* من نحن */
    const aboutLink =
      document.querySelector(
        '.top-navbar a[href*="من-نحن"]'
      ) ||
      Array.from(document.querySelectorAll("a")).find(
        (link) => link.textContent.trim() === "من نحن"
      );

    if (!findDirectItem("من نحن")) {
      desktopMenu.appendChild(
        createMenuItem(
          "من نحن",
          aboutLink?.href ||
            "/من-نحن/page-243584381"
        )
      );
    }

    /* اتصل بنا */
    const contactLink = Array.from(
      document.querySelectorAll("a")
    ).find((link) => {
      const text = link.textContent.trim();

      return (
        text === "اتصل بنا" ||
        text === "تواصل معنا"
      );
    });

    if (!findDirectItem("اتصل بنا")) {
      desktopMenu.appendChild(
        createMenuItem(
          "اتصل بنا",
          contactLink?.href || "/contact-us"
        )
      );
    }
/* التأكد من إظهار الروابط الإضافية على الكمبيوتر */
["من نحن", "اتصل بنا"].forEach((label) => {
  const item = findDirectItem(label);

  if (!item) return;

  item.classList.remove(
    "!hidden",
    "hidden",
    "lg:!block",
    "lg:!inline-block"
  );

  item.classList.add(
    "root-level",
    "lalan-extra-menu-item"
  );

  item.style.removeProperty("display");
});
    /* تحديد الرابط الحالي */
    const currentPath =
      decodeURI(
        window.location.pathname.replace(/\/+$/, "")
      ) || "/";

    desktopMenu
      .querySelectorAll(":scope > li.root-level > a")
      .forEach((link) => {
        link.classList.remove("lalan-menu-active");

        const linkPath =
          decodeURI(
            new URL(link.href, window.location.origin)
              .pathname
              .replace(/\/+$/, "")
          ) || "/";

        const isExact = linkPath === currentPath;

        const isInside =
          linkPath !== "/" &&
          currentPath.startsWith(linkPath);

        if (isExact || isInside) {
          link.classList.add("lalan-menu-active");
        }
      });
  }

  /* ==========================================
     11.3) أيقونة الحساب
     ========================================== */

  

  /* ==========================================
     11.4) البحث والمفضلة
     ========================================== */

  function setupLalanHeaderActions(
    header,
    mainNav,
    headerActions
  ) {
    let actionsBox = header.querySelector(
      ".lalan-header-actions"
    );

    if (!actionsBox) {
      actionsBox = document.createElement("div");
      actionsBox.className = "lalan-header-actions";

      actionsBox.innerHTML = `
        <button
          type="button"
          class="lalan-header-action lalan-search-toggle"
          aria-label="البحث"
          aria-expanded="false"
        >
          <i class="sicon-search"></i>
        </button>

        <a
          href="/account/wishlist"
          class="lalan-header-action lalan-wishlist-link"
          aria-label="المفضلة"
        >
          <i class="sicon-heart"></i>
        </a>
      `;

      headerActions.insertAdjacentElement(
        "afterbegin",
        actionsBox
      );
    }

    const originalSearch = document.querySelector(
      ".top-navbar .header-search"
    );

    let searchPanel = header.querySelector(
      ".lalan-header-search-panel"
    );

    if (originalSearch && !searchPanel) {
      searchPanel = document.createElement("div");
      searchPanel.className =
        "lalan-header-search-panel";

      originalSearch.classList.add(
        "lalan-moved-search"
      );

      searchPanel.appendChild(originalSearch);
      mainNav.appendChild(searchPanel);
    }

    if (!searchPanel) return;

    const searchToggle = actionsBox.querySelector(
      ".lalan-search-toggle"
    );

    const searchInput = searchPanel.querySelector(
      ".s-search-input"
    );

    function closeSearch() {
      header.classList.remove("lalan-search-open");

      searchToggle?.setAttribute(
        "aria-expanded",
        "false"
      );
    }

    function toggleSearch(event) {
      event.preventDefault();
      event.stopPropagation();

      const opening =
        !header.classList.contains(
          "lalan-search-open"
        );

      header.classList.toggle(
        "lalan-search-open",
        opening
      );

      searchToggle?.setAttribute(
        "aria-expanded",
        opening ? "true" : "false"
      );

      if (opening) {
        window.setTimeout(() => {
          searchInput?.focus();
        }, 180);
      }
    }

    if (
      searchToggle &&
      searchToggle.dataset.lalanReady !== "true"
    ) {
      searchToggle.dataset.lalanReady = "true";
      searchToggle.addEventListener(
        "click",
        toggleSearch
      );
    }

    if (
      searchPanel.dataset.lalanReady !== "true"
    ) {
      searchPanel.dataset.lalanReady = "true";

      searchPanel.addEventListener(
        "click",
        (event) => event.stopPropagation()
      );
    }

    if (
      document.documentElement.dataset
        .lalanSearchEvents !== "true"
    ) {
      document.documentElement.dataset
        .lalanSearchEvents = "true";

      document.addEventListener(
        "click",
        closeSearch
      );

      document.addEventListener(
        "keydown",
        (event) => {
          if (event.key === "Escape") {
            closeSearch();
          }
        }
      );
    }
  }

/* ==========================================
   قائمة حساب العميل
   ========================================== */

function setupLalanCustomerAccountMenu() {
  const accountMenus = document.querySelectorAll(
    ".s-user-menu-inline, .s-user-menu-dropdown-list"
  );

  if (!accountMenus.length) return false;

  const normalizePath = (url) => {
    try {
      const path = new URL(
        url,
        window.location.origin
      ).pathname.replace(/\/+$/, "");

      return path || "/";
    } catch {
      return "";
    }
  };

  const currentPath = normalizePath(
    window.location.href
  );

  /* ========================================
     تعديل الروابط وتحديد الصفحة الحالية
     ======================================== */

  accountMenus.forEach((menu) => {
    let links = Array.from(
      menu.querySelectorAll(
        ".s-user-menu-dropdown-item-link"
      )
    );

    /* إضافة معلومات العميل للقائمة الجانبية */
    if (
      menu.classList.contains("s-user-menu-inline") &&
      !menu.parentElement.querySelector(
        ".lalan-account-user"
      )
    ) {
      const sourceHeader = document.querySelector(
        ".s-user-menu-dropdown-header"
      );

      const sourceAvatar =
        sourceHeader?.querySelector("img")?.src ||
        document.querySelector(
          ".s-user-menu-trigger-avatar"
        )?.src ||
        "";

      const sourceName =
        sourceHeader
          ?.querySelector(
            ".s-user-menu-dropdown-header-content p"
          )
          ?.textContent.trim() ||
        document.querySelector(
          ".s-user-menu-trigger-name"
        )?.textContent.trim() ||
        "حسابي";

      const userBox =
        document.createElement("div");

      userBox.className =
        "lalan-account-user";

      userBox.innerHTML = `
        ${
          sourceAvatar
            ? `
              <img
                src="${sourceAvatar}"
                alt="${sourceName}"
              >
            `
            : `
              <span class="lalan-account-user-icon">
                <i class="sicon-user"></i>
              </span>
            `
        }

        <div>
          <strong>${sourceName}</strong>
          <span>مرحبًا بك في حسابك</span>
        </div>
      `;

      menu.parentElement.insertAdjacentElement(
        "afterbegin",
        userBox
      );
    }

    /*
      رابط حساب سلة الخارجي:
      نحفظه للعناوين ثم نحوله لبيانات الحساب.
    */
    const accountLink = links.find((link) => {
      const href =
        link.getAttribute("href") || "";

      const title = link
        .querySelector(
          ".s-user-menu-dropdown-item-title"
        )
        ?.textContent.trim();

      return (
        href.includes("accounts.salla.com") ||
        title === "حسابي"
      );
    });

    if (accountLink) {
      if (
        accountLink.href.includes(
          "accounts.salla.com"
        )
      ) {
        document.documentElement.dataset
          .lalanAddressesUrl =
          accountLink.href;
      }

      accountLink.href =
        "/account/profile";

      accountLink.target = "_self";
      accountLink.removeAttribute("rel");

      const title = accountLink.querySelector(
        ".s-user-menu-dropdown-item-title"
      );

      if (title) {
        title.textContent =
          "بيانات الحساب";
      }
    }

    /* إزالة أي تحديد قديم */
    menu
      .querySelectorAll(
        ".s-user-menu-dropdown-item"
      )
      .forEach((item) => {
        item.classList.remove(
          "active",
          "is-active",
          "lalan-account-active"
        );
      });

    /* تحديد الصفحة الحالية فقط */
    menu
      .querySelectorAll(
        ".s-user-menu-dropdown-item-link"
      )
      .forEach((link) => {
        const linkPath = normalizePath(
          link.href
        );

        if (linkPath === currentPath) {
          link
            .closest(
              ".s-user-menu-dropdown-item"
            )
            ?.classList.add(
              "lalan-account-active"
            );
        }
      });
  });

  /* ========================================
     قائمة مستقلة للجوال
     لا تنقل قائمة الكمبيوتر ولا تلمس الهيدر
     ======================================== */

  const accountContent = document.querySelector(
    "#main-content .main-content"
  );

  const inlineMenu = document.querySelector(
    "#main-content .s-user-menu-inline"
  );

  if (!accountContent || !inlineMenu) {
    return true;
  }

  /* إنشاء زر الجوال مرة واحدة */
  if (
    !document.querySelector(
      ".lalan-account-menu-toggle"
    )
  ) {
    const toggleButton =
      document.createElement("button");

    toggleButton.type = "button";
    toggleButton.className =
      "lalan-account-menu-toggle";

    toggleButton.innerHTML = `
      <i class="sicon-menu"></i>
      <span>قائمة الحساب</span>
    `;

    accountContent.insertAdjacentElement(
      "afterbegin",
      toggleButton
    );
  }

  /* إنشاء Drawer مستقل مرة واحدة */
  if (
    !document.querySelector(
      ".lalan-account-mobile-drawer"
    )
  ) {
    const drawer =
      document.createElement("div");

    drawer.className =
      "lalan-account-mobile-drawer";

    const userBox = inlineMenu
      .parentElement
      .querySelector(
        ".lalan-account-user"
      );

    const clonedUser = userBox
      ? userBox.cloneNode(true)
      : null;

    const clonedMenu =
      inlineMenu.cloneNode(true);

    drawer.innerHTML = `
      <div class="lalan-account-mobile-backdrop"></div>

      <aside
        class="lalan-account-mobile-panel"
        aria-label="قائمة الحساب"
      >
        <div class="lalan-account-mobile-header">
          <strong>قائمة الحساب</strong>

          <button
            type="button"
            class="lalan-account-mobile-close"
            aria-label="إغلاق قائمة الحساب"
          >
            ×
          </button>
        </div>

        <div class="lalan-account-mobile-content"></div>
      </aside>
    `;

    const drawerContent = drawer.querySelector(
      ".lalan-account-mobile-content"
    );

    if (clonedUser) {
      drawerContent.appendChild(
        clonedUser
      );
    }

    drawerContent.appendChild(
      clonedMenu
    );

    document.body.appendChild(drawer);

    const closeDrawer = () => {
      document.body.classList.remove(
        "lalan-account-drawer-open"
      );
    };

    drawer
      .querySelector(
        ".lalan-account-mobile-backdrop"
      )
      .addEventListener(
        "click",
        closeDrawer
      );

    drawer
      .querySelector(
        ".lalan-account-mobile-close"
      )
      .addEventListener(
        "click",
        closeDrawer
      );

    clonedMenu.addEventListener(
      "click",
      (event) => {
        if (
          event.target.closest(
            ".s-user-menu-dropdown-item-link"
          )
        ) {
          closeDrawer();
        }
      }
    );

    document.addEventListener(
      "keydown",
      (event) => {
        if (event.key === "Escape") {
          closeDrawer();
        }
      }
    );
  }

  const toggleButton = document.querySelector(
    ".lalan-account-menu-toggle"
  );

  if (
    toggleButton &&
    toggleButton.dataset.lalanReady !==
      "true"
  ) {
    toggleButton.dataset.lalanReady =
      "true";

    toggleButton.addEventListener(
      "click",
      () => {
        document.body.classList.add(
          "lalan-account-drawer-open"
        );
      }
    );
  }

  return true;
}
  
  /* ==========================================
   تثبيت الهيدر
   ========================================== */

function setupLalanStickyHeader(header, mainNav) {
  if (mainNav.dataset.lalanStickyReady === "true") return;

  mainNav.dataset.lalanStickyReady = "true";

  const sentinel = document.createElement("div");
  sentinel.className = "lalan-sticky-sentinel";

  const spacer = document.createElement("div");
  spacer.className = "lalan-sticky-spacer";
  spacer.hidden = true;

  mainNav.insertAdjacentElement("beforebegin", sentinel);
  mainNav.insertAdjacentElement("afterend", spacer);

  function setFixed(fixed) {
    const height = mainNav.offsetHeight;

    mainNav.classList.toggle("lalan-mainnav-fixed", fixed);
    header.classList.toggle("lalan-header-scrolled", fixed);

    spacer.hidden = !fixed;
    spacer.style.height = fixed ? `${height}px` : "0px";
  }

  const observer = new IntersectionObserver(
    ([entry]) => {
      setFixed(!entry.isIntersecting);
    },
    {
      threshold:0,
      rootMargin:"0px"
    }
  );

  observer.observe(sentinel);

  window.addEventListener(
    "resize",
    function () {
      if (mainNav.classList.contains("lalan-mainnav-fixed")) {
        spacer.style.height = `${mainNav.offsetHeight}px`;
      }
    },
    { passive:true }
  );
}

  /* ==========================================
     11 حق الجوال
     ========================================== */

  
  function setupLalanMobileAccountLink() {
  const userMenu = document.querySelector(
    ".store-header salla-user-menu"
  );

  if (!userMenu) return false;

  if (
    userMenu.dataset.lalanMobileAccountReady ===
    "true"
  ) {
    return true;
  }

  userMenu.dataset.lalanMobileAccountReady =
    "true";

  userMenu.addEventListener(
    "click",
    (event) => {
      if (
        !window.matchMedia(
          "(max-width: 1023px)"
        ).matches
      ) {
        return;
      }

      const trigger = event.target.closest(
        ".s-user-menu-trigger, .s-user-menu-trigger-slot"
      );

      if (!trigger) return;

      event.preventDefault();
      event.stopPropagation();

      window.location.href =
        "/account/profile";
    },
    true
  );

  return true;
}
  
  /* ==========================================
     11.6) تشغيل الهيدر
     ========================================== */

  function setupLalanHeader() {
    const header = document.querySelector(
      ".store-header"
    );

    const mainNav = document.querySelector(
      "#mainnav"
    );

    const desktopMenu = document.querySelector(
      "#mobile-menu .main-menu"
    );

    const headerActions = mainNav?.querySelector(
      ".flex.items-center.justify-end"
    );

    if (
      !header ||
      !mainNav ||
      !desktopMenu ||
      !headerActions
    ) {
      return false;
    }

    if (
      header.dataset.lalanHeaderReady === "true"
    ) {
      return true;
    }

    header.dataset.lalanHeaderReady = "true";
    header.classList.add("lalan-header");

    setupLalanMenu(desktopMenu);

    setupLalanHeaderActions(
      header,
      mainNav,
      headerActions
    );
    
    setupLalanCustomerAccountMenu();
    
    setupLalanMobileAccountLink();
    
    setupLalanStickyHeader(header, mainNav);
    
    requestAnimationFrame(() => {
      header.classList.add(
        "lalan-header-ready"
      );
    });

    return true;
  }

  /* ==========================================
     التشغيل مع انتظار مكونات سلة
     ========================================== */

  function initializeLalanHeader() {
    let attempts = 0;
    const maxAttempts = 30;

    function attempt() {
      attempts += 1;

      const adsReady =
        setupLalanAdsSlider() ||
        !document.querySelector(
          "salla-advertisement"
        );

      const headerReady = setupLalanHeader();
      setupLalanAddressesCard();
      if (
        adsReady &&
        headerReady
      ) {
        return;
      }

      if (attempts < maxAttempts) {
        window.setTimeout(attempt, 100);
      }
    }

    attempt();
    
    setTimeout(
  setupLalanAddressesCard,
  500
);
  }

  if (document.readyState === "loading") {
    document.addEventListener(
      "DOMContentLoaded",
      initializeLalanHeader,
      { once: true }
    );
  } else {
    initializeLalanHeader();
  }

  /* تحديث قائمة الحساب عند تحميل مكونات سلة */

  const lalanAccountMenuObserver =
  new MutationObserver(() => {
    setupLalanCustomerAccountMenu();
  });

lalanAccountMenuObserver.observe(
  document.body,
  {
    childList: true,
    subtree: true
  }
);
  
})();

  /* اضافة زر ادارة العناوين */

function setupLalanAddressesCard() {
  const profileForm = document.querySelector(
    ".form--user-profile"
  );

  if (!profileForm) return false;

  if (
    document.querySelector(
      ".lalan-addresses-card"
    )
  ) {
    return true;
  }

  const addressesUrl =
    document.documentElement.dataset
      .lalanAddressesUrl;

  if (!addressesUrl) return false;

  const card = document.createElement("div");

  card.className = "lalan-addresses-card";

  card.innerHTML = `
    <div class="lalan-addresses-card-icon">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
        fill="none"
        aria-hidden="true"
      >
        <path
          d="M12 21s7-5.3 7-12a7 7 0 1 0-14 0c0 6.7 7 12 7 12Z"
          stroke="currentColor"
          stroke-width="1.8"
          stroke-linecap="round"
          stroke-linejoin="round"
        />

        <circle
          cx="12"
          cy="9"
          r="2.3"
          stroke="currentColor"
          stroke-width="1.8"
        />
      </svg>
    </div>

    <div class="lalan-addresses-card-content">
      <strong>إدارة العناوين</strong>

      <span>
        أضف أو عدّل عناوين الشحن الخاصة بك.
      </span>
    </div>

    <a
      href="${addressesUrl}"
      target="_blank"
      rel="noopener noreferrer"
      class="lalan-addresses-card-button"
    >
      إدارة العناوين
    </a>
  `;

  profileForm.insertAdjacentElement(
    "afterend",
    card
  );

  return true;
}