if (document.querySelector(".index")) {
let yStyle = document.createElement("style");
yStyle.innerHTML = `
  .y-links ,
  .y-feat{
    margin: 40px 0px 20px;
    padding: 0px 15px;
  }
  .y-links .y-links-container {
    display: grid;
    grid-template-columns: repeat(3, minmax(0px, 400px));
    gap: 10px;
    justify-content: center;
    align-items: start;
  }
  .y-links-container a ,
  .y-feat-container a {
    display: flex;
    width: 100%;
    justify-content: center;
    transition: .3s linear;
  }
  .y-links-container a img ,
  .y-feat-container a img{
    max-width: 100%;
  }
  .y-links-container a:hover ,
  .y-feat-container a:hover {
    transform: scale(1.04);  
  }
  
  
  /* features section styles */
  
  .y-feat .y-feat-container {
    display: grid;
    grid-template-columns: repeat(3, minmax(0px, 600px));
    gap: 10px;
    justify-content: center;
    align-items: start;
  }
  
  @media (max-width: 1024px) {
  .y-feat .y-feat-container {
    grid-template-columns: repeat(2, minmax(0px, 1fr));
  }
    .y-feat-container a:nth-of-type(2) {
      grid-row: 1;
      grid-column: span 2;
    
    }    
  }
`;

document.head.appendChild(yStyle);



  let linksCont = document.createElement("div");
  linksCont.classList.add("y-links");
  linksCont.innerHTML = `
  <div class="y-links-container">
    <a href="/rouge-dior-matte-velvet/p2036439388
">
      <img src="https://i.postimg.cc/VkdXPcMD/Group-3687.png" 
 alt="link_1" />
    </a>
    <a href="/روج-ترافلجار-من-ديور-اصدار-خاص/p1218576120">
      <img src="https://i.postimg.cc/NjSmgPkY/Group-3688.png" 
alt="link_2" />
    </a>
    <a href="/redirect/categories/1344056036">
      <img src="https://i.postimg.cc/xdmHqy6m/Group-3689.png" 
alt="link_3" />
    </a>
  </div>
  `;
  document.querySelectorAll(".s-block--fixed-banner")[0].after(linksCont);
  

// features sections

  let ftCont = document.createElement("div");
  ftCont.classList.add("y-feat");
  ftCont.innerHTML = `
  <div class="y-feat-container">
    <a>
      <img src="https://i.postimg.cc/h41L9scb/feat-1.png" 
 alt="feat_1" />
    </a>
    <a>
      <img src="https://i.postimg.cc/HsWQ3MLG/feat-2.png" 
alt="feat_2" />
    </a>
        <a>
      <img src="https://i.postimg.cc/sDn5L2BM/feat-3.png" 
alt="feat_3" />
    </a>
  </div>
  `;
  document.querySelector("footer").before(ftCont);

}


const visitorCounter = document.createElement('div');
visitorCounter.style.cssText = `
  display: flex;
  align-items: center;
  background: white;
  padding: 8px 16px;
  border-radius: 100px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  font-family: Arial, sans-serif;
  direction: rtl;
  position: fixed;
  bottom: 130px;
  left: 20px;
  z-index: 1111111;
`;

const dot = document.createElement('div');
dot.style.cssText = `
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle at center, #FF8585 0%, #FF6B6B 100%);
  margin-left: 12px;
  animation: pulse 1.5s ease-in-out infinite;
`;

// Add the pulse animation
const style = document.createElement('style');
style.textContent = `
  @keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
  }
`;
document.head.appendChild(style);

const counterText = document.createElement('span');
let visitors = Math.floor(Math.random() * (100 - 50 + 1)) + 50;
const updateVisitors = () => {
  // Generate random number between 50 and 100
  visitors = Math.floor(Math.random() * (100 - 50 + 1)) + 50;
  counterText.textContent = `${visitors} زائر متواجد الآن`;
};
setInterval(updateVisitors, 2000);
counterText.textContent = `${visitors} زائر متواجد الآن`;
counterText.style.color = '#333';
counterText.style.fontWeight = "500";

visitorCounter.appendChild(dot);
visitorCounter.appendChild(counterText);
document.body.appendChild(visitorCounter);