// Create the top bar container
const topBar = document.createElement('div');
topBar.className = 'top-bar';
topBar.style.overflow = 'hidden';
// Add the slider content
const slides = [
  'لا تفوت الفرصة! استخدم كود  <span class="clickable"> M11 <i class="sicon-special-discount clickable" title="Copy"></i></span> عند طلبك الأول واستمتع بخصم مميز!',
  'شحن مجاني ويوصلك خلال 48 ساعة 🚀',
  'للتواصل مع خدمة العملاء <a href="tel:920008195">920008195</a>',
];



// Create the slider wrapper
const sliderWrapper = document.createElement('div');
sliderWrapper.className = 'slider-wrapper';
sliderWrapper.style.display = 'flex';
sliderWrapper.style.flexDirection = 'column';
sliderWrapper.style.alignItems = 'center';
sliderWrapper.style.transition = 'transform 1s ease';
topBar.appendChild(sliderWrapper);

// Add slides to the slider wrapper
slides.forEach((text) => {
  const slide = document.createElement('div');
  slide.className = 'slide';
  slide.style.padding = '2px 0';
  slide.style.margin= '2px 0';
  slide.innerHTML = text; // Support HTML for clickable TEST
  sliderWrapper.appendChild(slide);
});

// Append the top bar to the body
document.body.appendChild(topBar);

// Implement the vertical slider functionality
let currentIndex = 0;
const slideHeight = 34; // Each slide's height in pixels

setInterval(() => {
  currentIndex = (currentIndex + 1) % slides.length;
  const offset = currentIndex * -slideHeight; // Adjust slide position
  sliderWrapper.style.transform = `translateY(${offset}px)`;
}, 4000); // Change every 4 seconds


// Handle clickable 'TEST' to copy text
document.addEventListener('click', (e) => {
  if (e.target.classList.contains('clickable')) {
    const icon = e.target.querySelector('.sicon-special-discount');
    if (icon) {
      const tempInput = document.createElement('input');
      tempInput.value = 'M11';
      document.body.appendChild(tempInput);
      tempInput.select();
      document.execCommand('copy');
      document.body.removeChild(tempInput);

      icon.classList.replace('sicon-special-discount', 'sicon-special-check');

      setTimeout(() => {
        icon.classList.replace('sicon-special-check', 'sicon-special-discount');
      }, 3000);
    }
  }
});

const overlayBg = document.querySelector('.overlay-bg');
// Create the YouTube iframe element
const iframe = document.createElement('iframe');
iframe.src = 'https://www.youtube.com/embed/GRab0Y46Pgw?autoplay=1&mute=1&loop=1&playlist=GRab0Y46Pgw'; 
iframe.className = 'video-background';
iframe.frameBorder = '0';
iframe.allow = 'autoplay; fullscreen';

// Set iframe properties for full-screen background
iframe.style.width = '100%';
iframe.style.height = '100%';

// Replace the background image with the iframe
overlayBg.style.backgroundImage = 'none';
overlayBg.appendChild(iframe);

    document.addEventListener("DOMContentLoaded", function () {
  // Select the <a> tag
  const anchorTag = document.querySelector(".lg\\:col-span-2 a");

  // Create a new paragraph element
  const newParagraph = document.createElement("p");
  newParagraph.textContent =
    "شركة رائدة في تصنيع وتعبئة مياه الشرب من أرض المدينة المنورة. نحرص دائمًا على تقديم منتج آمن وصحي باستخدام أحدث التقنيات الابتكارية والحديثة، وفق أعلى معايير الجودة العالمية. كما نلتزم بتقديم خدمة عملاء متميزة تضمن رضاكم طوال رحلتكم معنا.";

  // Add a class to the paragraph
  newParagraph.classList.add("footer-paragraph");

  // Append the paragraph after the <a> tag
  anchorTag.insertAdjacentElement("afterend", newParagraph);
});

document.addEventListener("DOMContentLoaded", function () {
  // Select the target div
  const targetDiv = document.querySelector(".s-block--hero-slider");

  // Create the icon element
  const iconElement = document.createElement("i");
  iconElement.className = "sicon-play"; // Add the class
  iconElement.setAttribute("onclick", "copyIconName(this)"); // Add the onclick attribute

  // Append the icon to the target div
  targetDiv.appendChild(iconElement);
});

document.addEventListener("DOMContentLoaded", function () {
  // Create the modal HTML structure
  const modalHTML = `
    <div class="custom-modal">
    <i class="sicon-screw-phillips"></i>
      <div class="box">
        <iframe 
          src="https://www.youtube.com/embed/GRab0Y46Pgw?si=haKR_-tKXO34UmCO" 
          title="YouTube video player" 
          frameborder="0" 
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
          referrerpolicy="strict-origin-when-cross-origin" 
          allowfullscreen>
        </iframe>
      </div>
    </div>
  `;

  // Append the modal to the body
  document.body.insertAdjacentHTML("beforeend", modalHTML);
});

document.addEventListener("DOMContentLoaded", function () {
  // Select the icons and modal
  const playIcon = document.querySelector(".sicon-play");
  const closeIcon = document.querySelector(".sicon-screw-phillips");
  const modal = document.querySelector(".custom-modal");
  const iframe = modal.querySelector("iframe");

  // Add click event to show the modal
  playIcon.addEventListener("click", function () {
    modal.style.display = "flex";
  });

  // Add click event to hide the modal
  closeIcon.addEventListener("click", function () {
    modal.style.display = "none";
    // Stop and reset the video by removing and re-adding the src
    const currentSrc = iframe.src;
    iframe.src = ""; // Remove the src
    iframe.src = currentSrc; // Re-apply the src to reset the video
  });
});

document.addEventListener('DOMContentLoaded', () => {
  const mainNav = document.querySelector('.main-nav-container');

  window.addEventListener('scroll', () => {
    if (mainNav) {
      if (window.scrollY > 0) {
        mainNav.classList.remove('fixed-pinned', 'animated', 'fixed-header');
      } else {
        mainNav.classList.remove('fixed-pinned', 'animated', 'fixed-header');
      }
    }
  });
});

// Select the element with the specific structure
const elements = document.querySelectorAll('.s-block--banners .grid');

elements.forEach((element) => {
  element.classList.forEach((className) => {
    if (className === 'md:grid-cols-2') {
      // Replace 'md:grid-cols-2' with 'grid-cols-2'
      element.classList.remove(className);
      element.classList.add('grid-cols-2');
    }
  });
});