window.addEventListener(
  'load',
  // (
  () => {
    createIntroSection();
    createWhySection();
    changeFooterCopyright();
    createPopUp();
  }
);

function createIntroSection() {
  // Locate the image element by its source
  const imageSrc =
    'https://cdn.salla.sa/form-builder/qCCxabsdX6ayL4rvxOjGfdz6eW0t5hECRJ2Y6r9P.gif';
  const imageElement = document.querySelector(`img[src="${imageSrc}"]`);

  if (imageElement) {
    // Create a new div element
    const container = document.createElement('div');
    container.classList.add('intro-container');

    // Add a simple string to the div
    const textNode = document.createElement('p');
    textNode.textContent = 'واجهة جديدة لأزياء الاطفال ';

    container.appendChild(textNode);

    // Create a list for social icons
    const iconList = document.createElement('ul');
    iconList.className = 'intro-container-social-icons';
    iconList.style.listStyleType = 'none'; // Remove default list styling
    iconList.style.padding = '0';

    // Add social icons to the list
    const socialIcons = [
      {
        name: 'WhatsApp',
        link: 'https://wa.me/966539219941',
        icon: '',
        element: `<a href="https://pizokids.com/ar/whatsapp/send">
            <i class="sicon-whatsapp2"></i>
        </a>`,
      },
      {
        name: 'email',
        link: 'mailto:',
        icon: '',
        element: `<a href="mailto:elpizo2018@gmail.com">
            <i class="sicon-mail"></i>
        </a>`,
      },
      {
        name: 'instagram',
        link: 'https://www.instagram.com/PIZOKIDS/#',
        icon: '',
        element: `<a href="https://www.instagram.com/PIZOKIDS" target="_blank" rel="noreferrer" aria-label="انستقرام"><i class="sicon-instagram"></i></a>`,
      },
      {
        name: 'snapchat',
        link: 'https://www.snapchat.com/add/ads.elpizo',
        icon: '',
        element: `<a href="https://www.snapchat.com/add/ads.elpizo" target="_blank" rel="noreferrer" aria-label="سناب شات"><i class="sicon-snapchat"></i></a>`,
      },
    ]; // Example icons
    socialIcons.forEach((icon) => {
      const listItem = document.createElement('li');
      listItem.innerHTML = icon.element;
      // listItem.style.display = 'inline-block'; // Display icons inline
      // listItem.style.margin = '0 10px'; // Add some margin between icons

      // const iconImg = document.createElement('img');
      // iconImg.src = `path/to/${icon}.png`; // Replace with actual path to icons
      // iconImg.alt = icon;
      // iconImg.style.width = '24px'; // Set icon size

      // listItem.appendChild(iconImg);
      iconList.appendChild(listItem);
    });

    container.appendChild(iconList);

    // Create the element with the specified class
    const swiperElement = document.createElement('div');
    swiperElement.className =
      'swiper s-slider-container swiper-initialized swiper-horizontal swiper-pointer-events swiper-rtl swiper-backface-hidden';

    // Insert the new elements after the image
    imageElement.insertAdjacentElement('afterend', container);
    container.insertAdjacentElement('afterend', swiperElement);
  } else {
    // console.error('Image with the specified source not found.');
  }
}

function createWhySection() {
  let parent = null;
  if (document.querySelector('section.s-block--banners')) {
    parent = document.querySelector('section.s-block--banners');
  } else if (document.querySelector('section.s-block--categories')) {
    parent = document.querySelector('section.s-block--products');
  }

  if (parent === null) {
    console.error('Parent element not found');
    return;
  } else {
    console.log('Parent element found');
  }
  // Create container div
  const container = document.createElement('div');
  container.style.cssText = `
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
    font-family: Arial, sans-serif;
`;

  // Create header
  const header = document.createElement('div');
  header.innerHTML = `
    <h1 style="font-size: 2.5em; margin-bottom: 10px;margin-top: 20px;">Why choose</h1>
    <h2 style="font-size: 2em; font-style: italic; margin-bottom: 5px;">PIZO KIDS</h2>
`;

  // Create features container
  const featuresContainer = document.createElement('div');
  featuresContainer.style.cssText = `
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 20px;
`;

  // Feature data
  const features = [
    {
      icon: '✱',
      title: 'High Quality',
      description: 'ملابس أطفال ذات جودة عالية وراحة مستدامة',
      iconColor: '#8080FF',
      imageUrl: 'https://i.imgur.com/s6oQdt0.png',
    },
    {
      icon: '✱',
      title: 'Creative Designers',
      description:
        'نعمل مع مصممين مبدعين لنضمن لك تصاميم خلابة تعكس جمال و شخصية طفلك المختلفة',
      iconColor: '#8080FF',
      imageUrl: 'https://i.imgur.com/TYOb3r8.png',
    },
    {
      icon: '♥',
      title: 'Competitive Prices',
      description: 'أسعار مناسبة للجميع بجودة تفوق التوقعات!',
      iconColor: '#8080FF',
      imageUrl: 'https://i.imgur.com/IJx8cOy.png',
    },
  ];

  // Create feature elements
  features.forEach((feature) => {
    const featureDiv = document.createElement('div');
    featureDiv.style.cssText = `
        flex: 1;
        min-width: 250px;
        padding: 20px;
        text-align: center;
    `;

    // const icon = document.createElement('div');
    // icon.textContent = feature.icon;
    // icon.style.cssText = `
    //     font-size: 2em;
    //     color: ${feature.iconColor};
    //     margin-bottom: 15px;
    // `;
    const icon = document.createElement('div');
    icon.style.cssText = `
        width: 100%;
        height: 100px;
        background-image: url(${feature.imageUrl});
        background-size: contain;
        background-position: center;
        // margin: 0 auto 15px;
        background-repeat: no-repeat;
    `;

    const title = document.createElement('h3');
    title.textContent = feature.title;
    title.style.cssText = `
        font-size: 1.5em;
        margin-bottom: 15px;
    `;

    const description = document.createElement('p');
    description.textContent = feature.description;
    description.style.cssText = `
        color: #666;
        line-height: 1.5;
    `;

    featureDiv.appendChild(icon);
    featureDiv.appendChild(title);
    featureDiv.appendChild(description);
    featuresContainer.appendChild(featureDiv);
  });

  // Append everything to container
  container.appendChild(header);
  container.appendChild(featuresContainer);

  // Add container to document body
  //   document.body.appendChild(container);
  parent.insertAdjacentElement('afterend', container);
}

function changeFooterCopyright() {
  // Default options
  const defaults = {
    currentYear: new Date().getFullYear(),
    mainText: 'All rights reserved | {year} PIZO KIDS ',
    footerSelectors: [
      'footer span.copyright-text p',
      'footer span.copyrights p',
    ],
  };

  // Merge default options with provided options
  const config = { ...defaults };

  // Replace {year} placeholder in mainText with the current year
  const formattedMainText = config.mainText.replace(
    '{year}',
    config.currentYear
  );

  // Try to find the footer paragraph using the provided selectors
  let pElement;
  for (const selector of config.footerSelectors) {
    pElement = document.querySelector(selector);
    if (pElement) break;
  }

  // If no paragraph element is found, create one
  if (!pElement) {
    return;
  }

  // Find  the link element
  let linkElement = pElement.querySelector('a');
  if (!linkElement) {
    return;
  }

  // Update the text and link attributes
  pElement.childNodes[0].nodeValue = formattedMainText;
  //   linkElement.textContent = config.linkText;
  //   linkElement.href = config.linkUrl;

  // Add some basic styling
  //   pElement.style.margin = '0';
  //   pElement.style.textAlign = 'center';
  //   linkElement.style.color = 'inherit';
  //   linkElement.style.textDecoration = 'underline';
  //   linkElement.style.fontWeight = 'bold';

  //   console.log('Footer copyright updated successfully.');
}

function createPopUp() {
  const isHomePage =
    window.location.pathname === '/' || document.querySelector('body.index');
  console.log('isHomePage', isHomePage);
  if (!isHomePage) return;
  const popup = document.createElement('div');
  popup.className = 'popup-overlay';

  popup.innerHTML = `
      <div class="popup-content">
          <button class="close-button" onclick="this.parentElement.parentElement.remove()">×</button>
          <div class="popup-text">
              ✨مرحبا فيك في عالم PIZO ✨<br><br>
              انضمي لنـا واحصلي على خصم خاص بك 😉<br><br>
              Join our club for a secret discount code ;)
          </div>
          <a href="https://api.whatsapp.com/send/?phone=966539219941&text&type=phone_number&app_absent=0" 
             class="whatsapp-button" 
             target="_blank">
              Join Now
          </a>
      </div>
  `;

  document.body.appendChild(popup);
}