/* Add custom CSS styles below */ 
document.addEventListener("DOMContentLoaded", () => {
  if (document.querySelector(".index")) {
    // ========== ADD GLOBAL STYLES ==========
    let style = document.createElement("style");
    style.innerHTML = `
      .s-block-customized-links {
        width: 100%;
        box-sizing: border-box;
        overflow: hidden;
        padding: 30px;
        position: relative;
        border-radius: 20px 20px 0 0;
        margin-top: 20px;
        margin-bottom: 20px;
      }
  .s-block-customized-links .container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap:30px;
    justify-content: center;
    margin: 0 auto;
    width: 100%;
    max-width: 500px;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .s-block-customized-links a {
    transition: 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    overflow: hidden;

  }

  .s-block-customized-links a:hover {
    transform: translateY(-10px);
  }

  .s-block-customized-links a img {
    max-width: 240px;
    height: 220x;
    object-fit: contain;
    display: block;
    margin: 0 auto;
  }
  
  

  @media (max-width: 768px) {
    .s-block-customized-links .container {
      
      justify-items: center;
    }
    
     .s-block-customized-links .s-slider-block__title, .s-block__title {
       margin-top:0 ;
     }
     
     .s-block-customized-links a img {
    max-width:100px;
    height: 100x;
    object-fit: contain;
    display: block;
    margin: 0 auto;
  }
  }
  
  /* Features Section Styles */
.features-section {
  width: 100%;
  padding: 40px 20px;
  background: transparent !important;
  overflow: hidden;
}

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

.feature-item {
  text-align: center;
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.feature-item:hover {
  transform: translateY(-10px);
}

.feature-image {
  width: 100%;
  max-width: 200px;
  height: auto;
  margin-bottom: 20px;
  transition: transform 0.3s ease;
}

.feature-item:hover .feature-image {
  transform: scale(1.05);
}

.feature-item h4 {
  margin: 15px 0;
  font-size: 16px;
  color: #000;
  text-align: center;
  font-weight: bold;
}

.feature-item p {
  color: #000;
  line-height: 1.4;
  font-size: 12px;
  text-align: center;
  max-width: 250px;
  margin: 0 auto;
  
}

@media (max-width: 768px) {
  .features-container {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto;
    gap: 30px;
  }
  .feature-item:first-child {
    grid-column: 1 / -1;
    grid-row: 1;
    max-width: 300px;
    margin: 0 auto;
  }
  .feature-item:first-child .feature-image {
    max-width: 250px;
  }
  .feature-item:nth-child(2),
  .feature-item:nth-child(3) {
    grid-row: 2;
    max-width: 250px;
    justify-self: center;
  }
}

@media (max-width: 576px) {
  .features-container {
    gap: 20px;
  }
  .feature-item:first-child {
    max-width: 250px;
  }
  .feature-item:first-child .feature-image {
    max-width: 200px;
  }
  .feature-item:nth-child(2),
  .feature-item:nth-child(3) {
    max-width: 200px;
  }
}

  
`;
document.head.append(style);

// ========== Customized Links ==========
const links = [
  { src: "https://i.postimg.cc/KvcN8Xyb/Frame-1597883354.png", slug: "https://simple-decor.com/ar/%D9%86%D9%85%D8%A7%D8%B0%D8%AC-%D8%AF%D9%8A%D9%83%D9%88%D8%B1%D8%A7%D8%AA-%D8%A7%D9%84%D8%AD%D8%A7%D8%A6%D8%B7/c92849391" },
  { src: "https://i.postimg.cc/4N81K8J9/Frame-1597883355.png", slug: "http://simple-decor.com/ar/%D9%83%D8%AA%D8%A7%D9%84%D9%88%D8%AC/c1495340792" },
   
];

const section = document.createElement("section");
section.classList.add("s-block", "s-block-customized-links");

const sCont = document.createElement("div");
sCont.classList.add("container");

const titleWrapper = document.createElement("div");
titleWrapper.className = "s-slider-block__title";
const titleDiv = document.createElement("div");
titleDiv.className = "s-slider-block__title-right";
titleDiv.innerHTML = "
الاقسام
";
titleWrapper.appendChild(titleDiv);
section.appendChild(titleWrapper);
section.appendChild(sCont);



links.forEach((e) => {
  const anc = document.createElement("a");
  anc.href = e.slug || "#";

  const img = document.createElement("img");
  img.src = e.src;
  img.alt = "Link image";

  anc.appendChild(img);
  sCont.appendChild(anc);
});

const firstBlock = document.querySelector(".s-block");
if (firstBlock) {
  firstBlock.after(section);
}

// ========== Features Section ==========
const featuresSection = document.createElement('section');
featuresSection.className = 'features-section';
featuresSection.innerHTML = `
  <div class="features-container">
    <div class="feature-item">
    
    <img class="feature-image" src="https://i.postimg.cc/8zjmLh5n/Frame-35-1.png" alt="Group-19" loading="lazy">
    
     <h4>شحن سريع و تركيب</h4>
<p>استلم طلبك في وقت قياسي</p>
   
    </div>
    <div class="feature-item">
      <img class="feature-image" src="https://i.postimg.cc/fWfCszp5/Frame-35.png" alt="Group-18" loading="lazy">

خدمة العملاء
تواصل معنا في أي وقت
تسوق آمن
تسوق آمن
استمتع بتجربة آمنة وخصوصية تامة 
      
    `;


document.querySelector("footer").before(featuresSection);

  }
});