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

  /* ====== تحديد اللغة ====== */
  const isEnglish =
    document.documentElement.lang === "en" ||
    window.location.search.includes("lang=en");

  /* ====== إخفاء فوتر سلة ====== */
  const hideFooter = document.createElement("style");
  hideFooter.innerHTML = `
    .store-footer { display: none !important; }
  `;
  document.head.appendChild(hideFooter);

  /* ====== استايل الفوتر ====== */
  const style = document.createElement("style");
  style.innerHTML = `
    .custom-footer{
      background-image:url('https://i.ibb.co/LdVYFL49/Rectangle-19994-1.png');
      background-size:cover;
      background-position:center;
      padding:100px 20px;
      color:#fff;
      direction:${isEnglish ? "ltr" : "rtl"};
    }
    .custom-footer-container{
      max-width:1200px;
      margin:auto;
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:30px;
      text-align:center;
      align-items:flex-start;
    }
    .custom-footer h4{
      font-size:18px;
      font-weight:700;
      margin-bottom:15px;
    }
    .custom-footer a{
      display:block;
      color:#fff;
      font-size:14px;
      margin-bottom:8px;
    }
    .footer-logo img{
      max-width:150px;
      margin:0 auto 10px;
      display:block;
    }
    .footer-social{
      display:flex;
      justify-content:center;
      gap:10px;
      margin-top:15px;
    }
    .footer-social img{
      width:46px;
      height:46px;
    }
    .footer-payments img{
      max-width:420px;
      margin-top:15px;
    }
.footer-extra-icon{
  margin-top:20px;
  display:flex;
  justify-content:center;
}

.footer-extra-icon img{
  width:190px; /* تقدر تغير الحجم */
  max-width:100%;
}

    
    @media(max-width:768px){
      .custom-footer-container{
        grid-template-columns:1fr;
      }
    }
  `;
  document.head.appendChild(style);

  /* ====== النصوص ====== */
  const content = {
    ar: {
      about: "من نحن",
      aboutDesc1: "وجهتك الأولى لكل ما يميز جمالك وأناقتك",
      aboutDesc2:
        "كرستينا جولد هو متجر إلكتروني متخصص في توفير أفضل منتجات العناية بالبشرة، العناية بالشعر، المكياج، العطور، العناية بالأظافر وغيرها من منتجات الجمال المختارة بعناية.",
      links: "روابط",
      contact: "تفاصيل الاتصال",
      whatsapp: "واتساب",
      show: "عرض"
    },
    en: {
      about: "About Us",
      aboutDesc1: "Your first destination for beauty and elegance",
      aboutDesc2:
        "Christiena Gold is an online store specialized in providing premium skincare, haircare, makeup, perfumes, nail care and carefully selected beauty products.",
      links: "Links",
      contact: "Contact Details",
      whatsapp: "WhatsApp",
      show: "View"
    }
  };

  const t = isEnglish ? content.en : content.ar;

  /* ====== إنشاء الفوتر ====== */
  const footer = document.createElement("div");
  footer.className = "custom-footer";
  footer.innerHTML = `
    <div class="custom-footer-container">

      <div class="footer-logo">
        <img src="https://i.ibb.co/zHf9tqQs/Layer-1-1-1.png" alt="Logo">
        <p><strong>${t.about}</strong></p>
        <small>${t.aboutDesc1}</small><br>
        <small>${t.aboutDesc2}</small>
      </div>

      <div>
        <h4>${t.links}</h4>
        <a href="https://christienagold.com/من-نحن/page-127523322">Christiena Gold</a>
        <a href="https://christienagold.com/سياسة-الخصوصية-privacy-policy/page-1365702907">
          ${isEnglish ? "Privacy Policy" : "سياسة الخصوصية"}
        </a>
        <a href="https://christienagold.com/الشروط-والأحكام-terms-conditions/page-2099783365">
          ${isEnglish ? "Terms & Conditions" : "الشروط والأحكام"}
        </a>
        <a href="https://christienagold.com/سياسة-الاستبدال-والاسترجاع-refund-exchange-policy/page-591595460">
          ${isEnglish ? "Refund & Exchange Policy" : "سياسة الاستبدال والاسترجاع"}
        </a>
      </div>
      

      <div>
        <h4>${t.contact}</h4>
        <a href="mailto:Christienagold@gmail.com">Christienagold@gmail.com</a>
        <a href="tel:+966535994904">+966535994904</a>
        <a href="https://wa.me/966535994904" target="_blank">${t.whatsapp}</a>

        <div class="footer-social">
          <a href="https://www.instagram.com/christiena_gold" target="_blank">
            <img src="https://i.ibb.co/tTjr38Wj/instagram-2.png">
          </a>
          <a href="https://www.tiktok.com/@christiena_gold" target="_blank">
            <img src="https://i.ibb.co/TBBW3Qkh/tik-tok-1.png">
          </a>
          <a href="https://snapchat.com/t/7mrF6sXU" target="_blank">
            <img src="https://i.ibb.co/20Vx2Mn5/snapchat-1.png">
          </a>
          <a href="https://share.google/1VFFZ6G6I8PCsqa1O" target="_blank">
            <img src="https://i.ibb.co/7JC22dRD/Google-Maps-icon-2020-svg.webp">
          </a>
        </div>

        <div class="footer-payments">
          <img src="https://i.ibb.co/m591CHh0/187-removebg-preview.png">
        </div>
        
        <div class="footer-extra-icon">
    <a href="https://i.ibb.co/BVZwyZkQ/Group-1261154855.png" target="_blank">
      <img src="https://i.ibb.co/BVZwyZkQ/Group-1261154855.png" alt="icon">
    </a>
  </div>

</div>

    </div>
  `;

  document.body.appendChild(footer);

});


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

  /* ===============================
     CSS
     =============================== */
  const style = document.createElement("style");
  style.innerHTML = `
  /* ===== Reviews Section ===== */
  .custom-reviews {
    padding: 80px 20px 60px;
    background: #ffffff;
    direction: rtl;
    text-align: center;
  }

  .reviews-title {
    color: #ff8fbf;
    font-size: 28px;
    margin-bottom: 50px;
    position: relative;
    display: inline-block;
  }

  .reviews-title::after {
    content: "";
    width: 80px;
    height: 4px;
    background: #ff8fbf;
    display: block;
    margin: 10px auto 0;
    border-radius: 10px;
  }

  .reviews-container {
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
  }

  .review-card {
    background: #f48dbb;
    border-radius: 20px;
    padding: 30px;
    position: relative;
    transition: 0.4s ease;
    box-shadow: 0 0 0 rgba(0,0,0,0);
  }

  .review-card:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 25px 45px rgba(255,143,191,0.6);
  }

  .review-card.active {
    background: #f48dbb;
  }

  .quote {
    font-size: 50px;
    position: absolute;
    top: 15px;
    left: 20px;
    color: #fff;
  }

  .user {
    display: flex;
    align-items: center;
    gap: 15px;
    justify-content: center;
    margin-bottom: 20px;
  }

  .user img {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    object-fit: cover;
  }

  .user h4 {
    font-size: 16px;
    margin: 0;
  }

  .user small {
    font-size: 13px;
    opacity: 0.8;
  }

  .review-card p {
    font-size: 15px;
    margin: 20px 0;
  }

  .stars {
    font-size: 18px;
    letter-spacing: 2px;
    color: #000;
  }

  .stars.white {
    color: #fff;
  }

  /* ===== Features Section ===== */
  .custom-features {
    padding: 60px 20px;
    background: #fff;
  }

  .custom-features-container {
    max-width: 1100px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
  }

  .feature-box {
    background: #f48dbb;
    padding: 25px;
    border-radius: 16px;
    text-align: center;
    transition: 0.3s ease;
  }

  .feature-box.active {
    background: #fff;
    border: 2px solid #f48dbb;
  }

  .feature-box img {
    max-width: 55px;
    margin-bottom: 10px;
  }

  .feature-box h3 {
    font-size: 16px;
    margin: 0;
  }

  @media (max-width: 768px) {
    .reviews-container,
    .custom-features-container {
      grid-template-columns: 1fr;
    }
  }
  `;
  document.head.appendChild(style);

  /* ===============================
     Reviews Section
     =============================== */
/* ===============================
   LANGUAGE
=============================== */
const isEnglish =
  document.documentElement.lang === "en" ||
  window.location.search.includes("lang=en");

const tReviews = {
  ar: {
    title: "آراء العملاء",
    name: "اسم العميل",
    city: "الرياض",
    text: "تجربة مميزة، منتجات رائعة",
    fast: "شحن سريع",
    support: "الدعم الفني",
    price: "أسعار منافسة"
  },
  en: {
    title: "Customer Reviews",
    name: "Customer Name",
    city: "Riyadh",
    text: "Amazing experience, great products",
    fast: "Fast Shipping",
    support: "Customer Support",
    price: "Competitive Prices"
  }
};

const tr = isEnglish ? tReviews.en : tReviews.ar;

/* ===============================
   Reviews Section
=============================== */
const reviewsSection = document.createElement("section");
reviewsSection.className = "custom-reviews";
reviewsSection.innerHTML = `
  <h2 class="reviews-title">${tr.title}</h2>

  <div class="reviews-container">

    <div class="review-card">
      <span class="quote">“</span>
      <div class="user">
        <img src="https://i.ibb.co/ynVWDBWH/Ellipse-76-1.png">
        <div>
          <h4>${tr.name}</h4>
          <small>${tr.city}</small>
        </div>
      </div>
      <p>${tr.text}</p>
      <div class="stars">★★★★★</div>
    </div>

    <div class="review-card active">
      <span class="quote">“</span>
      <div class="user">
        <img src="https://i.ibb.co/ynVWDBWH/Ellipse-76-1.png">
        <div>
          <h4>${tr.name}</h4>
          <small>${tr.city}</small>
        </div>
      </div>
      <p>${tr.text}</p>
      <div class="stars white">★★★★★</div>
    </div>

    <div class="review-card">
      <span class="quote">“</span>
      <div class="user">
        <img src="https://i.ibb.co/ynVWDBWH/Ellipse-76-1.png">
        <div>
          <h4>${tr.name}</h4>
          <small>${tr.city}</small>
        </div>
      </div>
      <p>${tr.text}</p>
      <div class="stars">★★★★★</div>
    </div>

  </div>
`;

/* ===============================
   Features Section
=============================== */
const featuresSection = document.createElement("section");
featuresSection.className = "custom-features";
featuresSection.innerHTML = `
  <div class="custom-features-container">

    <div class="feature-box">
      <img src="https://i.ibb.co/7JYz7p6P/Group-1261154874-1.png">
      <h3>${tr.fast}</h3>
    </div>

    <div class="feature-box active">
      <img src="https://i.ibb.co/QjDpGv50/Mask-group-6.png">
      <h3>${tr.support}</h3>
    </div>

    <div class="feature-box">
      <img src="https://i.ibb.co/tTjywrvj/Group-1261154874-2.png">
      <h3>${tr.price}</h3>
    </div>

  </div>
`;


  /* ===============================
     Insert Before Footer
     =============================== */
  const footer = document.querySelector(".custom-footer") || document.querySelector("footer");

  if (footer) {
    footer.parentNode.insertBefore(featuresSection, footer);
    footer.parentNode.insertBefore(reviewsSection, featuresSection);
  } else {
    document.body.appendChild(reviewsSection);
    document.body.appendChild(featuresSection);
  }

});

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

  /* ===============================
     LOGOS SECTION STYLE
     =============================== */
  const style = document.createElement("style");
  style.innerHTML = `
  .logos-section {
    background: #fff;
    padding: 70px 0;
    overflow: hidden;
    direction: rtl;
  }

  .logos-wrapper {
    display: flex;
    flex-direction: column;
    gap: 30px;
  }

  .logos-row {
    display: flex;
    width: max-content;
    animation: scroll 22s linear infinite;
  }

  .logos-row.reverse {
    animation-direction: reverse;
  }

  .logo-item {
    width: 160px;
    height: 90px;
    background: #fff;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 15px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    transition: 0.35s ease;
    cursor: pointer;
  }

  .logo-item img {
    max-width: 80%;
    max-height: 60px;
    transition: 0.35s ease;
  }

  .logo-item:hover {
    transform: scale(1.15);
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
  }

  @keyframes scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }

  @media (max-width: 768px) {
    .logo-item {
      width: 130px;
      height: 80px;
    }
  }
  `;
  document.head.appendChild(style);

  /* ===============================
     LOGOS SECTION HTML
     =============================== */
  const logosSection = document.createElement("section");
  logosSection.className = "logos-section";
  logosSection.innerHTML = `
    <div class="logos-wrapper">

      <!-- ROW 1 -->
      <div class="logos-row">
        ${generateLogos()}
        ${generateLogos()}
      </div>

      <!-- ROW 2 -->
      <div class="logos-row reverse">
        ${generateLogos()}
        ${generateLogos()}
      </div>

    </div>
  `;

  /* ===============================
     INSERT BEFORE REVIEWS
     =============================== */
  const reviews = document.querySelector(".custom-reviews");
  if (reviews) {
    reviews.parentNode.insertBefore(logosSection, reviews);
  } else {
    document.body.appendChild(logosSection);
  }

});

/* ===============================
   LOGOS FUNCTION
   =============================== */
function generateLogos() {
  const logos = [
    "https://i.ibb.co/Qvbn9qY9/Group-1261154806.png",
    "https://i.ibb.co/Nd6Msqms/Group-1261154805.png",
    "https://i.ibb.co/mrbPWv6r/Group-1261154803.png",
    "https://i.ibb.co/QFqcYJcT/Group-1261154808.png",
    "https://i.ibb.co/8DzpvndC/Group-1261154810.png",
    "https://i.ibb.co/bg3gRktc/Group-1261154807.png"
  ];

  return logos.map(src => `
    <div class="logo-item">
      <img src="${src}" alt="Brand Logo">
    </div>
  `).join("");
}



document.addEventListener("DOMContentLoaded", () => {

  const targetSection = document.querySelector(
    ".s-block.s-block--fixed-banner.wide-placeholder"
  );

  if (!targetSection) return;

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

  section.innerHTML = `
    <a href="https://christienagold.com/ar/%D8%A7%D9%84%D8%B9%D9%86%D8%A7%D9%8A%D8%A9-%D8%A8%D8%A7%D9%84%D8%AC%D8%B3%D9%85/c598279188" class="category-card">
      <img src="https://i.ibb.co/Mx4VtmWR/Group-1261155139-1.png" alt="">
    </a>

    <a href="https://christienagold.com/ar/%D8%A7%D9%84%D9%85%D9%83%D9%8A%D8%A7%D8%AC/c132630026" class="category-card">
      <img src="https://i.ibb.co/SD4FJX7T/Group-1261155138-1.png" alt="">
    </a>

    <a href="https://christienagold.com/ar/%D8%A7%D9%84%D8%B9%D9%86%D8%A7%D9%8A%D8%A9-%D8%A8%D8%A7%D9%84%D8%B4%D8%B9%D8%B1/c625544499" class="category-card">
      <img src="https://i.ibb.co/HDRyBt1z/Group-1261155141-1.png" alt="">
    </a>

    <a href="https://christienagold.com/ar/%D8%A7%D9%84%D8%B9%D9%86%D8%A7%D9%8A%D8%A9-%D8%A8%D8%A7%D9%84%D8%A8%D8%B4%D8%B1%D8%A9/c2038943537" class="category-card">
      <img src="https://i.ibb.co/nsdvqXGK/Group-1261155140-1.png" alt="">
    </a>
  `;

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



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

  const isEnglish =
    document.documentElement.lang === "en" ||
    window.location.search.includes("lang=en");

  if (!isEnglish) return;

  const replacements = [
    {
      old: "3738e4af-6ab9-47f3-aeae-df8228241dc3.webp",
      new: "https://i.ibb.co/4n5p0yfm/9.jpg"
    },
    {
      old: "55c240cf-d13a-439e-9bf2-fbe4eb12b82c.webp",
      new: "https://i.ibb.co/KpL2NfNK/Artboard-1-2.png"
    },
    {
      old: "0707311b-bf27-48be-9843-755ec661f3b4.webp",
      new: "https://i.ibb.co/GfnjZtJJ/Artboard-1-copy.png"
    },
    {
      old: "d7dc6464-4033-4487-ab91-75c0174ac1da.webp",
      new: "https://i.ibb.co/5xGm1Vsw/Artboard-2-3.png"
    },
    {
      old: "dba7b19e-a3d6-4716-8937-2ac660dec8cf.webp",
      new: "https://i.ibb.co/ZzKjTHCN/Artboard-3-2.png"
    }
  ];

  function replaceImages(root = document) {
    root.querySelectorAll("img").forEach(img => {
      replacements.forEach(pair => {

        // src
        if (img.src && img.src.includes(pair.old)) {
          img.src = pair.new;
        }

        // data-src
        if (img.dataset.src && img.dataset.src.includes(pair.old)) {
          img.dataset.src = pair.new;
        }

        // data-lazy
        if (img.dataset.lazy && img.dataset.lazy.includes(pair.old)) {
          img.dataset.lazy = pair.new;
        }

        // srcset
        if (img.srcset && img.srcset.includes(pair.old)) {
          img.srcset = pair.new;
        }
      });
    });
  }

  // تشغيل مباشر
  replaceImages();

  // مراقبة التحميل المتأخر (Lazy Load)
  const observer = new MutationObserver(mutations => {
    mutations.forEach(mutation => {
      mutation.addedNodes.forEach(node => {
        if (node.nodeType === 1) {
          replaceImages(node);
        }
      });
    });
  });

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

});



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

  const isEnglish =
    document.documentElement.lang === "en" ||
    window.location.search.includes("lang=en");

  // لو مش إنجليزي، سيب الصور العربية
  if (!isEnglish) return;

  // Arabic ➜ English (بنفس الترتيب)
  const replacements = [
    {
      old: "https://i.ibb.co/Mx4VtmWR/Group-1261155139-1.png",
      new: "https://i.ibb.co/ZzjLdNQ5/Group-1261155139-4.png"
    },
    {
      old: "https://i.ibb.co/SD4FJX7T/Group-1261155138-1.png",
      new: "https://i.ibb.co/7x0XQHZc/Group-1261155138-3.png"
    },
    {
      old: "https://i.ibb.co/HDRyBt1z/Group-1261155141-1.png",
      new: "https://i.ibb.co/Q71k6F3Z/Group-1261155141-2.png"
    },
    {
      old: "https://i.ibb.co/nsdvqXGK/Group-1261155140-1.png",
      new: "https://i.ibb.co/7x0XQHZc/Group-1261155138-3.png"
    }
  ];

  function replaceImages(root = document) {
    root.querySelectorAll("img").forEach(img => {
      replacements.forEach(pair => {

        if (img.src && img.src.includes(pair.old)) {
          img.src = pair.new;
        }

        if (img.dataset.src && img.dataset.src.includes(pair.old)) {
          img.dataset.src = pair.new;
        }

        if (img.dataset.lazy && img.dataset.lazy.includes(pair.old)) {
          img.dataset.lazy = pair.new;
        }

        if (img.srcset && img.srcset.includes(pair.old)) {
          img.srcset = pair.new;
        }
      });
    });
  }

  // تشغيل فوري
  replaceImages();

  // دعم Lazy Load و Elementor
  const observer = new MutationObserver(mutations => {
    mutations.forEach(mutation => {
      mutation.addedNodes.forEach(node => {
        if (node.nodeType === 1) {
          replaceImages(node);
        }
      });
    });
  });

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

});