document.addEventListener("DOMContentLoaded", function () {
  const style = document.createElement("style");
  style.innerHTML = `
    .custom-footer {
      position:relative;
      width:100%;
      height:500px;
      overflow:hidden;
      color:#fff;
      background:#f4e9da;
      display:flex;
      align-items:center;
      justify-content:center;
    }
    
    

    .custom-footer video {
      position:absolute;
      top:50%; left:50%;
      width:100%; height:100%;
      object-fit:cover;
      z-index:0;
      transform:translate(-50%,-50%);
    }

    .custom-footer .overlay {
      position:absolute;
      top:0; left:0;
      width:100%; height:100%;
      background:rgba(0,0,0,0.4);
      z-index:1;
    }

    .footer-content {
      position:relative;
      z-index:2;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      padding:30px 15px;
      text-align:center;
      gap:18px;
      height:100%;
    }

    .footer-logo {
      
      width:10rem;
      margin-bottom:15px;
      opacity:0;
      transform:translateY(-20px);
      animation: logoAppear 1.2s ease forwards;
    }

    @keyframes logoAppear {
      from {opacity:0; transform:translateY(-30px) scale(0.9);}
      to {opacity:1; transform:translateY(0) scale(1);}
    }

    .footer-links a {
      color:#fff;
      font-size:15px;
      text-decoration:none;
      background:rgba(255,255,255,0.15);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      padding:12px 16px;
      border-radius:12px;
      transition:all 0.3s ease;
      font-weight:bold;
      margin:8px 0;
      display:block;
    }

    .footer-links a:hover {
      background:rgba(255,255,255,0.3);
      color:#ffd700;
      transform:scale(1.05);
      box-shadow:0 0 15px rgba(255,215,0,0.6);
    }

    .footer-links a:active {
      transform:scale(0.95);
      box-shadow:0 0 8px rgba(255,215,0,0.8);
    }

    .footer-copy {
      font-size:13px;
      margin-top:10px;
      opacity:0.9;
    }

    .footer-advaz {
      font-size:14px;
      font-weight:bold;
      margin-top:8px;
      color:#fff;
      text-shadow:0 0 10px rgba(255,215,0,0.8);
    }


    @media (max-width:767px){
      .footer-logo { max-height:90px; }
      .footer-links {
        display:flex;
        flex-direction:column;
        gap:12px;
        width:100%;
      }
      .footer-links a {
        width:100%;
      }
      .custom-footer video {
        object-fit:cover;
      }
    }


    @media (min-width:768px){
      .footer-links {
        display:flex;
        flex-direction:column;
        align-items:center;
        width:100%;
      }
      .footer-links a {
        width:100%;
      }
          .custom-footer {
      position:relative;
      width:100%;
      height:600px;
      overflow:hidden;
      color:#fff;
      background:#f4e9da;
      display:flex;
      align-items:center;
      justify-content:center;
    }
    }
  `;
  document.head.appendChild(style);

  const footerHTML = `
    <footer class="custom-footer">
      <video autoplay muted loop playsinline preload="auto" src="https://files.catbox.moe/mgew0y.mp4"></video>
      <div class="overlay"></div>
      <div class="footer-content">
        <img src="https://i.ibb.co/gMpfgkNv/LOGO-PNG-DEVOLOP-copy.png" alt="footer-logo" class="footer-logo" />
        <div class="footer-links">
          <a href="https://tigerworks.store/%D8%B3%D9%8A%D8%A7%D8%B3%D8%A9-%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85-%D9%88%D8%A7%D9%84%D8%AE%D8%B5%D9%88%D8%B5%D9%8A%D8%A9/page-1161368310">سياسة الاستخدام والخصوصية</a>
          <a href="https://tigerworks.store/%D8%B3%D9%8A%D8%A7%D8%B3%D8%A9-%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D8%A8%D8%AF%D8%A7%D9%84-%D9%88%D8%A7%D9%84%D8%A5%D8%B3%D8%AA%D8%B1%D8%AC%D8%A7%D8%B9/page-386281975">سياسة الاستبدال والاسترجاع</a>
          <a href="tel:+966580559933">تواصل معنا</a>
        </div>
        <div class="footer-copy">جميع الحقوق محفوظة © Tiger Works 2025</div>
        <div class="footer-advaz">برمجة وتطوير ادفاز</div>
      </div>
    </footer>
  `;

  const oldFooter = document.querySelector("footer.store-footer");
  if (oldFooter) oldFooter.remove();
  document.body.insertAdjacentHTML("beforeend", footerHTML);
});

document.addEventListener("DOMContentLoaded", function () {
  const fontLink = document.createElement("link");
  fontLink.rel = "stylesheet";
  fontLink.href = "https://fonts.googleapis.com/css2?family=Scheherazade+New:wght@700&display=swap";
  document.head.appendChild(fontLink);

  const faLink = document.createElement("link");
  faLink.rel = "stylesheet";
  faLink.href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css";
  document.head.appendChild(faLink);

  const style = document.createElement("style");
  style.innerHTML = `
    :root {
      --main-color: #A6823F;
      --text-color: #fff;
      --bg-dark: rgba(30,30,30,0.4);
    }

    .custom-navbar {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 20px;
      background: var(--bg-dark);
      backdrop-filter: blur(6px);
      z-index: 9999;
      transition: background 0.3s ease;
    }

    .navbar-section {
      display: flex;
      align-items: center;
      gap: 20px;
    }

    .navbar-center {
      flex: 1;
      justify-content: center;
      display: flex;
      gap: 25px;
    }

    .navbar-center a {
      color: var(--text-color);
      text-decoration: none;
      font-weight: bold;
      font-size: 1rem;
      transition: color 0.3s ease;
    }

    .navbar-center a:hover {
      color: gold;
    }

    .logo img {
      height: 55px;
      object-fit: contain;
    }

    .nav-actions a, .nav-actions button {
      color: var(--text-color);
      font-size: 1.3rem;
      text-decoration: none;
      background: none;
      border: none;
      cursor: pointer;
      transition: color 0.3s ease;
    }

    .nav-actions a:hover, .nav-actions button:hover {
      color: var(--main-color);
    }

    .hamburger {
      display: none;
      font-size: 1.8rem;
    }

    .mobile-menu {
      position: fixed;
      top: 0;
      right: -100%;
      width: 70%;
      height: 100%;
      background: var(--bg-dark);
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 80px;
      transition: right 0.3s ease-in-out;
      z-index: 9998;
    }

    .mobile-menu a {
      color: var(--text-color);
      display: block;
      padding: 15px 0;
      font-size: 1.2rem;
      text-decoration: none;
      width: 100%;
      text-align: center;
    }

    .mobile-menu a:hover {
      background: rgba(166, 130, 63, 0.15);
    }

    .mobile-menu.show {
      right: 0;
    }

    .close-menu {
      position: absolute;
      top: 15px;
      right: 15px;
      font-size: 1.8rem;
      color: var(--text-color);
      cursor: pointer;
    }

    @media (max-width: 768px) {
      .navbar-center {
        display: none;
      }
      .hamburger {
        display: block;
      }
    }
  `;
  document.head.appendChild(style);

  const navbarHtml = `
    <div class="custom-navbar">
      <div class="navbar-section logo">
        <img src="https://i.ibb.co/gMpfgkNv/LOGO-PNG-DEVOLOP-copy.png" alt="شعار المتجر">
      </div>
      <div class="navbar-center">
         <a href="https://tigerworks.store/"> الرئيسية</a>
      <a href="https://tigerworks.store/%D9%85%D8%B3%D8%AA%D9%84%D8%B2%D9%85%D8%A7%D8%AA-%D9%85%D9%86%D8%B2%D9%84/c1438230915">مستلزمات المنزل</a>
      <a href="https://tigerworks.store/%D8%A7%D9%84%D8%A7%D8%AB%D8%A7%D8%AB/c1902368653">الأثاث  </a>
      <a href="https://tigerworks.store/%D8%A7%D9%84%D8%AF%D9%8A%D9%83%D9%88%D8%B1/c1128855182">الديكور  </a>
      <a href="https://tigerworks.store/latest-products">أحدث المنتجات </a>
      <a href="https://tigerworks.store/offers">التخفيضات  </a>

      </div>
      <div class="navbar-section nav-actions">
        <button class="header-btnn"><i class="fas fa-user"></i></button>
        <a href="https://tigerworks.store/cart"><i class="fas fa-shopping-cart"></i></a>
        <button class="hamburger"><i class="fas fa-bars"></i></button>
      </div>
    </div>
    <div class="mobile-menu">
      <span class="close-menu"><i class="fas fa-times"></i></span>
      <a href="https://tigerworks.store/"> الرئيسية</a>
      <a href="https://tigerworks.store/%D9%85%D8%B3%D8%AA%D9%84%D8%B2%D9%85%D8%A7%D8%AA-%D9%85%D9%86%D8%B2%D9%84/c1438230915">مستلزمات المنزل</a>
      <a href="https://tigerworks.store/%D8%A7%D9%84%D8%A7%D8%AB%D8%A7%D8%AB/c1902368653">الأثاث  </a>
      <a href="https://tigerworks.store/%D8%A7%D9%84%D8%AF%D9%8A%D9%83%D9%88%D8%B1/c1128855182">الديكور  </a>
      <a href="https://tigerworks.store/latest-products">أحدث المنتجات </a>
      <a href="https://tigerworks.store/offers">التخفيضات  </a>
    </div>
  `;

  document.body.insertAdjacentHTML("afterbegin", navbarHtml);

  const hamburger = document.querySelector(".hamburger");
  const mobileMenu = document.querySelector(".mobile-menu");
  const closeMenu = document.querySelector(".close-menu");

  hamburger.addEventListener("click", () => mobileMenu.classList.add("show"));
  closeMenu.addEventListener("click", () => mobileMenu.classList.remove("show"));
});
   document.addEventListener("click", (e) => {
  // لو القائمة مفتوحة و المستخدم ضغط خارجها وخارج زر الهامبرجر
  if (mobileMenu.classList.contains("show") && 
      !mobileMenu.contains(e.target) && 
      !hamburger.contains(e.target)) {
    mobileMenu.classList.remove("show");
  }
});
   
   document.addEventListener("DOMContentLoaded", function () {
  try {
    // تحميل الخطوط و Font Awesome
    const fontLink = document.createElement("link");
    fontLink.rel = "stylesheet";
    fontLink.href = "https://fonts.googleapis.com/css2?family=Scheherazade+New:wght@600&display=swap";
    document.head.appendChild(fontLink);

    const faLink = document.createElement("link");
    faLink.rel = "stylesheet";
    faLink.href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css";
    document.head.appendChild(faLink);

    const style = document.createElement("style");
    style.innerHTML = `
      :root {
        --main-color: #A6823F;
        --text-color: #fff;
        --bg-dark: #1E1E1E;
      }

      .video-banner {
        position: relative;
        width: 100%;
        height: 100vh;
        overflow: hidden;
      }

      .video-banner video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: -1;
      }
      .custom-navbar {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 20px;
        background: rgba(30, 30, 30, 0.4);
        backdrop-filter: blur(6px);
        z-index: 10;
      }

      .navbar-section {
        display: flex;
        align-items: center;
        gap: 20px;
      }

      .navbar-center {
        flex: 1;
        justify-content: center;
        display: flex;
        gap: 25px;
      }

      .navbar-center a {
        color: var(--text-color);
        text-decoration: none;
        font-weight: bold;
        font-size: 1rem;
        transition: color 0.3s ease;
      }

      

      .logo img {
        height: 55px;
        object-fit: contain;
      }

      .nav-actions a {
        color: var(--text-color);
        font-size: 1.3rem;
        text-decoration: none;
        transition: color 0.3s ease;
      }

      .nav-actions a:hover {
        color: var(--main-color);
      }

  
      .hamburger {
        display: none;
        font-size: 1.8rem;
        color: var(--text-color);
        cursor: pointer;
        background: none;
        border: none;
      }


      .mobile-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 70%;
        height: 100%;
        background: var(--bg-dark);
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 80px;
        transition: right 0.3s ease-in-out;
        z-index: 20;
      }

      .mobile-menu a {
        color: var(--text-color);
        display: block;
        padding: 15px 0;
        font-size: 1.2rem;
        text-decoration: none;
        width: 100%;
        text-align: center;
      }

      .mobile-menu a:hover {
        background: rgba(166, 130, 63, 0.15);
      }

      .mobile-menu.show {
        right: 0;
      }

      .close-menu {
        position: absolute;
        top: 15px;
        right: 15px;
        font-size: 1.8rem;
        color: var(--text-color);
        cursor: pointer;
      }

    
      @media (max-width: 768px) {
        .navbar-center {
          display: none; 
        }
        .hamburger {
          display: block;
        }
      }

     
      .video-banner-content {
        position: relative;
        z-index: 2;
        top: 50%;
        transform: translateY(-50%);
        text-align: center;
        color: var(--text-color);
        max-width: 90%;
        margin: 0 auto;
      }

      .video-banner-content h1 {
        font-family: 'Scheherazade New', serif;
        font-size: 2.8rem;
        margin-bottom: 15px;
      }

      .video-banner-content h2 {
        font-size: 1.5rem;
        margin-bottom: 20px;
        font-weight: 400;
        background:transparent
      }

      .video-banner-content .banner-btn {
        display: inline-block;
        padding: 12px 28px;
        border-radius: 6px;
        background: var(--main-color);
        color: var(--text-color);
        font-weight: bold;
        text-decoration: none;
        font-size: 1.2rem;
        letter-spacing: 0.5px;
        transition: all 0.3s ease;
      }

      .video-banner-content .banner-btn:hover {
        background: #8B6B2F;
        transform: translateY(-3px) scale(1.05);
      }
    `;
    document.head.appendChild(style);

    const targetBanner = document.querySelector('section.s-block.s-block--fixed-banner img[src*="or9sfKXdN8sXI0tdzxEDisjm8tFa9Vi3NAGl5zep.png"]');
    if (targetBanner) {
      const parentSection = targetBanner.closest("section.s-block.s-block--fixed-banner");
      parentSection.innerHTML = `
        <div class="video-banner">
         

          <video autoplay muted loop playsinline>
            <source src="https://files.catbox.moe/xljhk3.mp4" type="video/mp4">
          </video>

          <div class="video-banner-content">
           <h1>اكتشف عالم الأثاث والديكور</h1>
<h2>حوّل منزلك إلى مساحة تعكس ذوقك وأناقتك</h2>
            <a href="https://tigerworks.store/" class="banner-btn">تسوق الآن</a>
          </div>
        </div>
      `;

      const hamburger = document.querySelector(".hamburger");
      const mobileMenu = document.querySelector(".mobile-menu");
      const closeMenu = document.querySelector(".close-menu");

      hamburger.addEventListener("click", () => {
        mobileMenu.classList.add("show");
      });

      closeMenu.addEventListener("click", () => {
        mobileMenu.classList.remove("show");
      });
      document.addEventListener("click", (e) => {
  // لو القائمة مفتوحة و المستخدم ضغط خارجها وخارج زر الهامبرجر
  if (mobileMenu.classList.contains("show") && 
      !mobileMenu.contains(e.target) && 
      !hamburger.contains(e.target)) {
    mobileMenu.classList.remove("show");
  }
});
    }
  } catch (error) {
    console.error("خطأ في الكود:", error);
  }
});




document.addEventListener("DOMContentLoaded", function () {
  try {
    const style = document.createElement("style");
    style.innerHTML = `
      .perfume-hero {
        margin-top: 10px;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #262626;
        border-radius: 0;
        padding: 60px 40px;
        width: 100%;
        box-shadow: 0 8px 25px rgba(0,0,0,0.4);
        gap: 40px;
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.8s ease, transform 0.8s ease;
        position: relative;
        overflow: hidden;
      }

      .perfume-hero.show {
        opacity: 1;
        transform: translateY(0);
      }

      .perfume-hero-left {
        flex: 1;
        text-align: right;
        direction: rtl;
      }

      .perfume-hero-left h4 {
        font-size: 1.2rem;
        color: #f1f1f1;
        margin-bottom: 10px;
        opacity: 0;
      }
      .perfume-hero.show .perfume-hero-left h4 {
        animation: fadeIn 1s ease forwards;
      }

      .perfume-hero-left h1 {
        font-family: 'Scheherazade New', serif;
        font-size: 2.4rem;
        color: #ffffff;
        margin-bottom: 15px;
        border-right: 3px solid #ffffff;
        white-space: nowrap;
        overflow: hidden;
        width: 0;
      }
      .perfume-hero.show .perfume-hero-left h1 {
        animation: typing 3s steps(40, end) forwards, blink 0.8s step-end infinite;
      }

      .perfume-hero-left p {
        font-size: 1.2rem;
        color: #ddd;
        max-width: 500px;
        line-height: 1.8;
        margin-bottom: 15px;
        opacity: 0;
      }
      .perfume-hero.show .perfume-hero-left p {
        animation: fadeIn 1s ease forwards;
        animation-delay: 3.2s;
      }

      .perfume-features {
        list-style: none;
        padding: 0;
        margin: 10px 0 20px;
        opacity: 0;
      }
      .perfume-features li {
        margin-bottom: 6px;
        color: #ccc;
        font-size: 1rem;
        position: relative;
        padding-right: 20px;
      }
      .perfume-features li::before {
        content: "✧";
        position: absolute;
        right: 0;
        color: #f1f1f1;
      }
      .perfume-hero.show .perfume-features {
        animation: fadeIn 1s ease forwards;
        animation-delay: 3.8s;
      }

      .perfume-btn {
        display: inline-block;
        background: #f1f1f1;
        color: #262626;
        font-weight: bold;
        padding: 16px 50px;
        border-radius: 40px;
        font-size: 1.3rem;
        letter-spacing: 0.5px;
        box-shadow: 0 6px 20px rgba(0,0,0,0.3);
        transition: 0.3s ease;
        opacity: 0;
        position: relative;
        overflow: hidden;
      }
      .perfume-hero.show .perfume-btn {
        animation: fadeInUp 0.8s ease forwards;
        animation-delay: 4.3s;
      }
      .perfume-btn:hover {
        background: #ffffff;
        transform: translateY(-3px) scale(1.05);
        box-shadow: 0 10px 25px rgba(255,255,255,0.3);
      }

      .perfume-hero-right {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .perfume-hero-right img {
        width: 280px;
        max-width: 90%;
        opacity: 0;
        transform: scale(0.8);
        transition: opacity 1s ease, transform 1s ease;
      }
      .perfume-hero.show .perfume-hero-right img {
        opacity: 1;
        transform: scale(1);
        animation: spin 20s linear infinite;
      }

      /* حركات */
      @keyframes spin {
        from { transform: scale(1) rotate(0deg); }
        to { transform: scale(1) rotate(360deg); }
      }
      @keyframes typing {
        from { width: 0; }
        to { width: 100%; }
      }
      @keyframes blink {
        50% { border-color: transparent; }
      }
      @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
      }
      @keyframes fadeInUp {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
      }

      @media(max-width: 900px) {
        .perfume-hero {
          flex-direction: column; /* الصورة فوق النص */
          text-align: center;
          gap: 20px;
          padding: 40px 20px;
        }
        .perfume-hero-left {
          text-align: center;
        }
        .perfume-hero-left h1 {
          font-size: 2rem;
          border-right: none;
          white-space: normal;
        }
        .perfume-hero-left p {
          font-size: 1rem;
          max-width: 100%;
        }
        .perfume-hero-right img {
          width: 200px;
        }
        .perfume-btn {
          display: block;
          margin: 20px auto 0;
          width: 80%; /* الزر يأخذ عرض السكشن */
          text-align: center;
        }
      }
    `;
    document.head.appendChild(style);

    const targetBanner = document.querySelector(
      'section.s-block.s-block--fixed-banner img[src*="jUDmNFDMMRGeEKt85JNeE2f8j79btKA4dEPdxiSG.png"]'
    );
    if (targetBanner) {
      const parentSection = targetBanner.closest("section.s-block.s-block--fixed-banner");
      if (parentSection) {
        parentSection.innerHTML = `
          <div class="perfume-hero">
            <div class="perfume-hero-right">
              <img src="https://i.ibb.co/LzySWh8s/png-armchair-furniture-stool-brown.png" alt="كرسي">
            </div>
            <div class="perfume-hero-left">
              <h4>ديكور يغير أجواء منزلك ✨</h4>
              <h1>أثاث أنيق يضيف لمسة فريدة</h1>
              <p>اكتشف تشكيلتنا المميزة من الأثاث والديكور التي تجمع بين الأناقة والجودة لتجعل منزلك أكثر دفئاً وجمالاً.</p>
              <ul class="perfume-features">
                <li>تصاميم عصرية وجودة عالية</li>
                <li>خدمة توصيل سريعة وآمنة</li>
                <li>قطع تضيف شخصية لكل ركن</li>
              </ul>
              <a href="https://tigerworks.store/latest-products" class="perfume-btn">تسوق الآن</a>
            </div>
          </div>
        `;

        const perfumeHero = parentSection.querySelector(".perfume-hero");
        const observer = new IntersectionObserver((entries) => {
          entries.forEach((entry) => {
            if (entry.isIntersecting) {
              perfumeHero.classList.add("show");
              observer.disconnect();
            }
          });
        }, { threshold: 0.5 });
        observer.observe(perfumeHero);
      }
    }
  } catch (error) {
    console.error("خطأ في كود هيرو الأثاث:", error);
  }
});





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

    const fontLink = document.createElement("link");
    fontLink.rel = "stylesheet";
    fontLink.href = "https://fonts.googleapis.com/css2?family=Scheherazade+New:wght@700&display=swap";
    document.head.appendChild(fontLink);

    const style = document.createElement("style");
    style.innerHTML = `
      .home-section {
        position: relative;
        width: 100%;
        background: url("https://i.ibb.co/mxZB9R3/image.png") center/cover no-repeat;
        min-height: 500px;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        padding-bottom: 0;
margin-bottom: 50px;
      }
      .home-content {
        background: rgba(255,255,255,0.9);
        border-radius: 20px;
        padding: 30px;
        max-width: 600px;
        text-align: center;
        box-shadow: 0 8px 25px rgba(0,0,0,0.15);
        transform: translateY(50%);
        opacity: 0;
        transition: opacity 0.8s ease, transform 0.8s ease;
      }
      .home-section.show .home-content {
        opacity: 1;
      }
      .home-title {
        font-size: 2rem;
        font-family: 'Scheherazade New', serif;
        font-weight: bold;
        color: #262626;
        white-space: nowrap;
        border-right: 3px solid #262626;
        display: inline-block;
      }
      .home-desc {
        font-size: 1.1rem;
        color: #262626;
        opacity: 0;
        margin: 15px 0;
        transition: opacity 1s ease;
      }
      .shop-btn {
        display: inline-block;
        background: #262626;
        color: white;
        font-weight: bold;
        padding: 12px 35px;
        border-radius: 40px;
        font-size: 1.1rem;
        box-shadow: 0 6px 20px rgba(0,0,0,0.2);
        opacity: 0;
        transition: opacity 1s ease, transform 0.3s ease;
      }
      .shop-btn:hover {
        transform: scale(1.05);
        background: #000000;
      }
    `;
    document.head.appendChild(style);

    const targetBanner = document.querySelector(
      'section.s-block.s-block--fixed-banner img[src*="iPnQ0u0pB7AftTy9Nwq0egxkWUc0tbCaa6AybBQ8.png"]'
    );

    if (targetBanner) {
      const parentSection = targetBanner.closest("section.s-block.s-block--fixed-banner");
      if (parentSection) {
        parentSection.innerHTML = `
          <div class="home-section">
            <div class="home-content">
              <h2 class="home-title"></h2>
              <p class="home-desc">اكتشف تشكيلة متنوعة من مستلزمات المنزل والديكور لتجعل كل زاوية في بيتك أجمل وأكثر راحة.</p>
              <a href="https://tigerworks.store/%D9%85%D8%B3%D8%AA%D9%84%D8%B2%D9%85%D8%A7%D8%AA-%D9%85%D9%86%D8%B2%D9%84/c1438230915" class="shop-btn">تسوق الآن</a>
            </div>
          </div>
        `;

        const section = parentSection.querySelector(".home-section");
        const content = section.querySelector(".home-content");
        const title = content.querySelector(".home-title");
        const desc = content.querySelector(".home-desc");
        const btn = content.querySelector(".shop-btn");

        const titleText = "مستلزمات منزل أنيقة لكل ذوق 🏠";

  
        const observer = new IntersectionObserver((entries) => {
          entries.forEach((entry) => {
            if (entry.isIntersecting) {
              section.classList.add("show");
              typeWriter(title, titleText, () => {
                desc.style.opacity = 1;
                setTimeout(() => btn.style.opacity = 1, 600);
              });
              observer.disconnect();
            }
          });
        }, { threshold: 0.4 });
        observer.observe(section);

        // دالة الكتابة التدريجية
        function typeWriter(element, text, callback) {
          let i = 0;
          element.textContent = "";
          const interval = setInterval(() => {
            element.textContent += text[i];
            i++;
            if (i >= text.length) {
              clearInterval(interval);
              element.style.borderRight = "none";
              if (callback) callback();
            }
          }, 80);
        }
      }
    }
  } catch (error) {
    console.error("خطأ في سكشن مستلزمات المنزل:", error);
  }
});

document.addEventListener("DOMContentLoaded", function () {
  try {
    // تحميل الخط
    const fontLink = document.createElement("link");
    fontLink.rel = "stylesheet";
    fontLink.href = "https://fonts.googleapis.com/css2?family=Scheherazade+New:wght@700&display=swap";
    document.head.appendChild(fontLink);

    const style = document.createElement("style");
    style.innerHTML = `
      .furniture-section {
        position: relative;
        width: 100%;
        background: url("https://i.ibb.co/wF2ZCc0g/image.png") center/cover no-repeat;
        min-height: 500px;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        padding-bottom: 0;
margin-bottom: 50px;
      }
      .furniture-content {
        background: rgba(255,255,255,0.9);
        border-radius: 20px;
        padding: 30px;
        max-width: 600px;
        text-align: center;
        box-shadow: 0 8px 25px rgba(0,0,0,0.15);
        transform: translateY(50%);
        opacity: 0;
        transition: opacity 0.8s ease, transform 0.8s ease;
      }
      .furniture-section.show .furniture-content {
        opacity: 1;
      }
      .furniture-title {
        font-size: 2rem;
        font-family: 'Scheherazade New', serif;
        font-weight: bold;
        color: #262626;
        white-space: nowrap;
        border-right: 3px solid #262626;
        display: inline-block;
      }
      .furniture-desc {
        font-size: 1.1rem;
        color: #262626;
        opacity: 0;
        margin: 15px 0;
        transition: opacity 1s ease;
      }
      .shop-btn {
        display: inline-block;
        background: #262626;
        color: white;
        font-weight: bold;
        padding: 12px 35px;
        border-radius: 40px;
        font-size: 1.1rem;
        box-shadow: 0 6px 20px rgba(0,0,0,0.2);
        opacity: 0;
        transition: opacity 1s ease, transform 0.3s ease;
      }
      .shop-btn:hover {
        transform: scale(1.05);
        background: #000000;
      }
    `;
    document.head.appendChild(style);

    const targetBanner = document.querySelector(
      'section.s-block.s-block--fixed-banner img[src*="pSnNq3gNWT4pRCN39vh1LpzIqDCYB2p3IKVuyMLe.png"]'
    );

    if (targetBanner) {
      const parentSection = targetBanner.closest("section.s-block.s-block--fixed-banner");
      if (parentSection) {
        parentSection.innerHTML = `
          <div class="furniture-section">
            <div class="furniture-content">
              <h2 class="furniture-title"></h2>
              <p class="furniture-desc">اكتشف مجموعتنا المميزة من الأثاث والديكور لتحويل منزلك إلى مساحة أنيقة ومريحة.</p>
              <a href="https://tigerworks.store/%D8%A7%D9%84%D8%A7%D8%AB%D8%A7%D8%AB/c1902368653" class="shop-btn">تسوق الآن</a>
            </div>
          </div>
        `;

        const section = parentSection.querySelector(".furniture-section");
        const content = section.querySelector(".furniture-content");
        const title = content.querySelector(".furniture-title");
        const desc = content.querySelector(".furniture-desc");
        const btn = content.querySelector(".shop-btn");

        const titleText = "أضف لمسة أناقة لمنزلك 🛋️";

        const observer = new IntersectionObserver((entries) => {
          entries.forEach((entry) => {
            if (entry.isIntersecting) {
              section.classList.add("show");
              typeWriter(title, titleText, () => {
                desc.style.opacity = 1;
                setTimeout(() => btn.style.opacity = 1, 600);
              });
              observer.disconnect();
            }
          });
        }, { threshold: 0.4 });
        observer.observe(section);

        function typeWriter(element, text, callback) {
          let i = 0;
          element.textContent = "";
          const interval = setInterval(() => {
            element.textContent += text[i];
            i++;
            if (i >= text.length) {
              clearInterval(interval);
              element.style.borderRight = "none";
              if (callback) callback();
            }
          }, 80);
        }
      }
    }
  } catch (error) {
    console.error("خطأ في سكشن الأثاث:", error);
  }
});



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

    const fontLink = document.createElement("link");
    fontLink.rel = "stylesheet";
    fontLink.href = "https://fonts.googleapis.com/css2?family=Scheherazade+New:wght@700&display=swap";
    document.head.appendChild(fontLink);

    const style = document.createElement("style");
    style.innerHTML = `
      .decor-section {
        position: relative;
        width: 100%;
        background: url("https://i.ibb.co/7NXfKLwd/image.png") center/cover no-repeat;
        min-height: 500px;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        padding-bottom: 0;
margin-bottom: 50px;
      }
      .decor-content {
        background: rgba(255,255,255,0.9);
        border-radius: 20px;
        padding: 30px;
        max-width: 600px;
        text-align: center;
        box-shadow: 0 8px 25px rgba(0,0,0,0.15);
        transform: translateY(50%);
        opacity: 0;
        transition: opacity 0.8s ease, transform 0.8s ease;
      }
      .decor-section.show .decor-content {
        opacity: 1;
      }
      .decor-title {
        font-size: 2rem;
        font-family: 'Scheherazade New', serif;
        font-weight: bold;
        color: #262626;
        white-space: nowrap;
        border-right: 3px solid #262626;
        display: inline-block;
      }
      .decor-desc {
        font-size: 1.1rem;
        color: #333;
        opacity: 0;
        margin: 15px 0;
        transition: opacity 1s ease;
      }
      .decor-btn {
        display: inline-block;
        background: #262626;
        color: white;
        font-weight: bold;
        padding: 12px 35px;
        border-radius: 40px;
        font-size: 1.1rem;
        box-shadow: 0 6px 20px rgba(0,0,0,0.2);
        opacity: 0;
        transition: opacity 1s ease, transform 0.3s ease;
      }
      .decor-btn:hover {
        transform: scale(1.05);
        background: #000;
      }
    `;
    document.head.appendChild(style);

    const targetBanner = document.querySelector(
      'section.s-block.s-block--fixed-banner img[src*="ttIQpZFfISdKOGU4Zz6gLL2P0tmWU2tJ0qpYruZg.png"]'
    );

    if (targetBanner) {
      const parentSection = targetBanner.closest("section.s-block.s-block--fixed-banner");
      if (parentSection) {
        parentSection.innerHTML = `
          <div class="decor-section">
            <div class="decor-content">
              <h2 class="decor-title"></h2>
              <p class="decor-desc">اكتشف تشكيلتنا الأنيقة من الديكورات لتجعل منزلك أكثر جمالاً ورقياً.</p>
              <a href="https://deem-sa.store/%D8%A7%D9%84%D8%AF%D9%8A%D9%83%D9%88%D8%B1/c123456789" class="decor-btn">تسوق الآن</a>
            </div>
          </div>
        `;

        const section = parentSection.querySelector(".decor-section");
        const content = section.querySelector(".decor-content");
        const title = content.querySelector(".decor-title");
        const desc = content.querySelector(".decor-desc");
        const btn = content.querySelector(".decor-btn");

        const titleText = "أضف لمسة فنية إلى منزلك 🏡";

       
        const observer = new IntersectionObserver((entries) => {
          entries.forEach((entry) => {
            if (entry.isIntersecting) {
              section.classList.add("show");
              typeWriter(title, titleText, () => {
                desc.style.opacity = 1;
                setTimeout(() => btn.style.opacity = 1, 600);
              });
              observer.disconnect();
            }
          });
        }, { threshold: 0.4 });
        observer.observe(section);

      
        function typeWriter(element, text, callback) {
          let i = 0;
          element.textContent = "";
          const interval = setInterval(() => {
            element.textContent += text[i];
            i++;
            if (i >= text.length) {
              clearInterval(interval);
              element.style.borderRight = "none";
              if (callback) callback();
            }
          }, 80);
        }
      }
    }
  } catch (error) {
    console.error("خطأ في سكشن الديكور:", error);
  }
});




document.addEventListener("DOMContentLoaded", function () {
  const myLoginBtn = document.querySelector(".header-btnn");
  if (!myLoginBtn) return;

  myLoginBtn.addEventListener("click", function () {
    if (window.salla && salla.event) {
      salla.event.dispatch("login::open");
    }
  });

  function onLoggedIn() {
    myLoginBtn.innerHTML = '<i class="fas fa-user-check"></i>';
    const icon = myLoginBtn.querySelector("i");
    if (icon) {
      icon.style.fontSize = "18px";
      icon.style.color = "rgb(166, 130, 63)";
      icon.style.transition = "0.3s";
      icon.style.cursor = "pointer";
    }

    const dropdown = document.createElement("div");
    dropdown.className = "custom-user-dropdown";
    dropdown.style.position = "absolute";
    dropdown.style.backgroundColor = "#ffffff";
    dropdown.style.border = "1px solid rgb(166, 130, 63)";
    dropdown.style.boxShadow = "0 8px 20px rgba(0,0,0,0.15)";
    dropdown.style.padding = "0";
    dropdown.style.borderRadius = "10px";
    dropdown.style.minWidth = "200px";
    dropdown.style.fontFamily = "sans-serif";
    dropdown.style.zIndex = "9999";
    dropdown.style.overflow = "hidden";
    dropdown.style.top = `${myLoginBtn.offsetHeight + 5}px`;
    dropdown.style.left = "0px";
    dropdown.style.maxHeight = "0";
    dropdown.style.transition = "max-height 0.4s ease, opacity 0.4s ease";
    dropdown.style.opacity = "0";

    const items = [
      { text: "الاشعارات", href: "https://tigerworks.store/notifications", icon: "fas fa-bell" },
      { text: "الطلبات", href: "https://tigerworks.store/orders", icon: "fas fa-shopping-bag" },
      { text: "طلبات بانتظار الدفع", href: "https://tigerworks.store/pending_orders", icon: "fas fa-hourglass-half" },
      { text: "حسابي", href: "https://tigerworks.store/profile", icon: "fas fa-user" },
      { text: "الامنيات", href: "https://tigerworks.store/wishlist", icon: "fas fa-heart" },
      { text: "نقاط الولاء", href: "https://tigerworks.store/loyalty_program", icon: "fas fa-gem" },
      { text: "تسجيل خروج", href: "https://tigerworks.store/logout", icon: "fas fa-sign-out-alt" }
    ];

    items.forEach(itemData => {
      const item = document.createElement("a");
      item.href = itemData.href;
      item.style.display = "flex";
      item.style.alignItems = "center";
      item.style.padding = "8px 15px";
      item.style.fontSize = "14px";
      item.style.color = "rgb(166, 130, 63)";
      item.style.textDecoration = "none";
      item.style.fontWeight = "500";
      item.style.transition = "background 0.3s, color 0.3s";

      const iTag = document.createElement("i");
      iTag.className = itemData.icon;
      iTag.style.marginRight = "6px";
      iTag.style.fontSize = "16px";
      item.appendChild(iTag);

      const textNode = document.createTextNode(itemData.text);
      item.appendChild(textNode);

      item.addEventListener("mouseenter", () => {
        item.style.backgroundColor = "rgb(166, 130, 63)";
        item.style.color = "#ffffff";
        iTag.style.color = "#ffffff";
      });
      item.addEventListener("mouseleave", () => {
        item.style.backgroundColor = "transparent";
        item.style.color = "rgb(166, 130, 63)";
        iTag.style.color = "rgb(166, 130, 63)";
      });

      dropdown.appendChild(item);
    });

    myLoginBtn.parentElement.style.position = "relative";
    myLoginBtn.parentElement.appendChild(dropdown);

    let isOpen = false;
    myLoginBtn.addEventListener("click", function () {
      if (!isOpen) {
        dropdown.style.maxHeight = dropdown.scrollHeight + "px";
        dropdown.style.opacity = "1";
      } else {
        dropdown.style.maxHeight = "0";
        dropdown.style.opacity = "0";
      }
      isOpen = !isOpen;
    });

    window.addEventListener("resize", () => {
      dropdown.style.top = `${myLoginBtn.offsetHeight + 5}px`;
      dropdown.style.left = "0px";
    });
  }

  const checkLoginInterval = setInterval(() => {
    const token = localStorage.getItem("token");
    if (token) {
      clearInterval(checkLoginInterval);
      onLoggedIn();
    }
  }, 500);
});





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

   
    (function() {
      const allProducts = [];
      const selectedProducts = {
        product1: null,
        product2: null
      };

      function scrapeProducts() {
        const productCards = document.querySelectorAll('.s-product-card-vertical');
        allProducts.length = 0;
        productCards.forEach(card => {
          try {
            const id = card.id.replace('s-product-card-id-', '');
            const nameElement = card.querySelector('.s-product-card-content h3') || card.querySelector('.s-product-name');
            const name = nameElement ? nameElement.innerText.trim() : 'Unknown Product';
            const imageUrl = card.querySelector('.s-product-card-image img')?.getAttribute('data-src') || card.querySelector('.s-product-card-image img')?.src || '';
            const priceElement = card.querySelector('.s-product-card-price') || card.querySelector('.s-product-price-new');
            let price = priceElement ? priceElement.innerText.trim() : '0';
            
            if (!price.includes('ريال')) {
              price += ' ريال';
            }
            
            const productUrl = card.querySelector('.s-product-card-entry')?.href || '';
            let description = 'لا يوجد وصف متاح برجاء التوجه لصفحة المنتج لاظهار كامل المقارنة.';

            // Check if we are on the product's own page
            const isCurrentProductPage = window.location.href.includes(productUrl);
            if (isCurrentProductPage) {
              const descriptionElement = document.querySelector('.article--main') || document.querySelector('.product__description') || document.querySelector('.s-product-main-details-description');
              if (descriptionElement) {
                const paragraphs = descriptionElement.querySelectorAll('p');
                let descriptionText = '';
                paragraphs.forEach(p => {
                  descriptionText += p.textContent.trim() + ' ';
                });
                description = descriptionText.trim();
              }
            } else {
              description = 'الرجاء الدخول لصفحة المنتج لعرض الوصف الكامل.';
            }

            if (id && name) {
              allProducts.push({ id, name, imageUrl, price, productUrl, description });
            }
          } catch (e) {
            console.error("خطأ في جمع بيانات المنتج:", e);
          }
        });
      }

      function fetchAndDisplayProductDetails(product, slot) {
        const displayContainer = document.querySelector('.compare-products-display');
        const displaySlot = document.createElement('div');
        displaySlot.className = 'selected-product-card';
        displaySlot.innerHTML = `
          <img src="${product.imageUrl}" alt="${product.name}" />
          <h4>${product.name}</h4>
          <p class="product-price">${product.price}</p>
          <p>${product.description}</p>
        `;
        displaySlot.setAttribute('data-slot', slot);

        const existingSlot = displayContainer.querySelector(`.selected-product-card[data-slot="${slot}"]`);
        if (existingSlot) {
          existingSlot.remove();
        }

        const allSlots = Array.from(displayContainer.children);
        if (slot === 'product1') {
          if (allSlots[0]) { allSlots[0].remove(); }
          displayContainer.prepend(displaySlot);
        } else {
          displayContainer.appendChild(displaySlot);
        }
      }

      function searchProducts(event, resultsList) {
        const query = event.target.value;
        const slot = event.target.dataset.slot;
        resultsList.innerHTML = '';
        if (query.length < 2) { return; }
        const filteredProducts = allProducts.filter(product =>
          product.name.toLowerCase().includes(query.toLowerCase())
        );
        if (filteredProducts.length === 0) {
          resultsList.innerHTML = '<li style="padding: 10px;">لا توجد منتجات مطابقة.</li>';
        } else {
          filteredProducts.forEach(product => {
            const li = document.createElement('li');
            li.className = 'compare-result-item';
            li.innerHTML = `
              <img src="${product.imageUrl}" alt="${product.name}" />
              <span>${product.name}</span>
            `;
            li.addEventListener('click', () => {
              selectedProducts[slot] = product;
              fetchAndDisplayProductDetails(product, slot);
              resultsList.innerHTML = '';
              event.target.value = product.name;
            });
            resultsList.appendChild(li);
          });
        }
      }

      function createCompareUI() {
        const floatButton = document.createElement('button');
        floatButton.id = 'custom-compare-button';
        floatButton.innerHTML = 'قارن بنفسك';
        document.body.appendChild(floatButton);

        const modalOverlay = document.createElement('div');
        modalOverlay.className = 'compare-modal-overlay';
        modalOverlay.style.display = 'none';

        const modalContent = document.createElement('div');
        modalContent.className = 'compare-modal-content';
        modalContent.innerHTML = `
          <div class="compare-modal-header">
            <h2>مقارنة المنتجات</h2>
            <button class="compare-close-button">&times;</button>
          </div>
          <div class="compare-search-container">
            <div class="compare-search-box">
              <input type="text" class="compare-search-input" data-slot="product1" placeholder="ابحث عن المنتج الأول...">
              <ul class="compare-results-list"></ul>
            </div>
            <div class="compare-search-box">
              <input type="text" class="compare-search-input" data-slot="product2" placeholder="ابحث عن المنتج الثاني...">
              <ul class="compare-results-list"></ul>
            </div>
          </div>
          <div class="compare-products-display"></div>
        `;

        modalOverlay.appendChild(modalContent);
        document.body.appendChild(modalOverlay);

        floatButton.addEventListener('click', () => {
          modalOverlay.style.display = 'flex';
          modalOverlay.classList.add('active');
          document.body.classList.add('no-scroll');
          scrapeProducts();
        });

        modalContent.querySelector('.compare-close-button').addEventListener('click', () => {
          modalOverlay.style.display = 'none';
          modalOverlay.classList.remove('active');
          document.body.classList.remove('no-scroll');
        });

        const searchInputs = modalContent.querySelectorAll('.compare-search-input');
        const resultsLists = modalContent.querySelectorAll('.compare-results-list');

        searchInputs[0].addEventListener('input', (e) => searchProducts(e, resultsLists[0]));
        searchInputs[1].addEventListener('input', (e) => searchProducts(e, resultsLists[1]));
      }
      
      createCompareUI();
      scrapeProducts();
    })();

   
    (function() {
      const whatsappNumber = "+966500800053";

      const createRateUI = () => {
        const rateButton = document.createElement('button');
        rateButton.id = 'rate-button';
        rateButton.innerHTML = '⭐';
        rateButton.setAttribute('aria-label', 'قيم منتجاتنا');
        document.body.appendChild(rateButton);

        const rateModalOverlay = document.createElement('div');
        rateModalOverlay.className = 'rate-modal-overlay';
        rateModalOverlay.style.display = 'none';

        const rateModalContent = document.createElement('div');
        rateModalContent.className = 'rate-modal-content';
        rateModalContent.innerHTML = `
          <button class="rate-close-button">&times;</button>
          <h2>قيم منتجاتنا</h2>
          <form id="rate-form">
            <label for="product-name">اسم المنتج:</label>
            <input type="text" id="product-name" name="product-name" required>
            
            <label for="product-rating">تقييمك (1-5):</label>
            <input type="number" id="product-rating" name="product-rating" min="1" max="5" required>
            
            <label for="product-feedback">ملاحظاتك (اختياري):</label>
            <textarea id="product-feedback" name="product-feedback" rows="3"></textarea>
            
            <button type="submit">إرسال التقييم عبر واتساب</button>
          </form>
        `;
        
        rateModalOverlay.appendChild(rateModalContent);
        document.body.appendChild(rateModalOverlay);

        rateButton.addEventListener('click', () => {
          rateModalOverlay.style.display = 'flex';
        });

        rateModalContent.querySelector('.rate-close-button').addEventListener('click', () => {
          rateModalOverlay.style.display = 'none';
        });

        window.addEventListener('click', (event) => {
          if (event.target === rateModalOverlay) {
            rateModalOverlay.style.display = 'none';
          }
        });

        const rateForm = rateModalContent.querySelector('#rate-form');
        rateForm.addEventListener('submit', (event) => {
          event.preventDefault();
          
          const productName = rateForm.querySelector('#product-name').value;
          const productRating = rateForm.querySelector('#product-rating').value;
          const productFeedback = rateForm.querySelector('#product-feedback').value;
          
          const message = `
*تقييم جديد للمنتج*
*اسم المنتج:* ${productName}
*التقييم:* ${productRating} من 5 ⭐
*ملاحظات العميل:* ${productFeedback || 'لا يوجد ملاحظات.'}
          `;
          
          const encodedMessage = encodeURIComponent(message.trim());
          const whatsappURL = `https://wa.me/${whatsappNumber}?text=${encodedMessage}`;
          
          window.open(whatsappURL, '_blank');
          
          rateModalOverlay.style.display = 'none';
          rateForm.reset();
        });
      };
      
      createRateUI();
    })();
});




const section = document.querySelector('#app > div.app-inner.flex.flex-col.min-h-full > section.s-block.s-block--categories');
 
const faqData = [
  {
    question: "كم يستغرق توصيل الطلب ؟",
    answer: "عادة ما يتم توصيل الطلب خلال 7-14 يوم اعمل"
  },
  {
    question: "هل يمكن ارجاع المنتج في حالة لم يعجبني؟",
    answer: "نعم ندعم في متجرنا سياسة الاسترجاع بشرط أن لا تتجاوز المدة 10 أيام من استلام المنتج"
  },
  {
    question: "هل منتجاتكم أصلية؟",
    answer: "أكيد نحن نفخر بأن منتجاتنا أصلية وذات جودة عالية"
  }
];

// هنشيك قبل ما يدخل علي الكود اذا موجود او لا ( عشان ال performance )
if (section) {
  // هنا بنمسح كل الي مكتوب في السكشن (عشان احنا مش عاوزين الي جوا عاوزين بس الdiv الي فيها ال section نكتب فيها )
  section.innerHTML = '';

  
  let questionsHTML = faqData.map(({ question, answer }) => `
    <div class="question-item">
      <div class="question standard-question-item-bg-color">
        <h6>${question}</h6>
        <i class="sicon-keyboard_arrow_down"></i>
      </div>
      <div class="answer standard-question-item-bg-color" style="display: none;">
        <p>${answer}</p>
      </div>
    </div>
  `).join('');

  
  section.innerHTML = `
    <section class="questions-block standard" 
             style="--questions-bg-color: ; --title-color: ; --subtitle-color: ; --title-bg-color: #ffffff; --questions-bg-opacity: 50; --questions-bg-blur: 10px; --question-item-bg-color: #000000; --question-item-bg-opacity: 100; --question-item-bg-blur: 0px; --questions-bg-img:url('')">
        <div class="questions_container">
            <div class="s-block_title_container">
                <div class="right-side relative w-full z-2">
                    <div class="main-title">
                        <h5>الأسئلة الشائعة</h5>
                    </div>
                    <p class="subtitle"></p>
                </div>
            </div>
            <div class="relative py-10">
                <div class="question_content">
                    ${questionsHTML}
                </div>
            </div>
        </div>
        <div class="flex justify-center items-center w-full mt-10">
            <p class="h-2 w-20 bg-color-primary"></p>
        </div>
    </section>
  `;


  const script = document.createElement('script');
  script.textContent = `
    document.querySelectorAll('.question-item .question').forEach(question => {
      question.addEventListener('click', function() {
        const answer = this.nextElementSibling;
        const isVisible = answer.style.display === 'block';
        
      
        document.querySelectorAll('.answer').forEach(a => a.style.display = 'none');
        
    
        answer.style.display = isVisible ? 'none' : 'block';
      });
    });
  `;
  section.appendChild(script);
} else {
  console.warn('العنصر المطلوب غير موجود في الصفحة.');
}




document.addEventListener("DOMContentLoaded", function () {
    const images = document.querySelectorAll(".banner--fixed img");

    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add("show");
            }
        });
    }, { threshold: 0.2 });

    images.forEach(img => observer.observe(img));
});


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

  const bannerImages = document.querySelectorAll(".banner--fixed img");
  const bannerObserver = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add("visible");
        observer.unobserve(entry.target);
      }
    });
  }, { threshold: 0.1 });

  bannerImages.forEach(image => bannerObserver.observe(image));



 



  const backToTopButton = document.createElement("div");
  backToTopButton.id = "backToTop";
  backToTopButton.innerHTML = `
    <div class="icon">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="24" height="24">
        <path d="M12 4l-8 8h6v8h4v-8h6z" />
      </svg>
    </div>
    <svg class="circular-chart" viewBox="0 0 36 36">
      <path class="circle-bg" d="M18 2.0845a15.9155 15.9155 0 1 1 0 31.831a15.9155 15.9155 0 1 1 0-31.831" />
      <path class="circle" d="M18 2.0845a15.9155 15.9155 0 1 1 0 31.831a15.9155 15.9155 0 1 1 0-31.831" />
    </svg>`;
  document.body.appendChild(backToTopButton);

 
  const style = `
    #backToTop {
      position: fixed;
      bottom: 20px;
      right: 50%; 
      width: 60px;
      height: 60px;
      display: none;
      z-index: 1000;
    }

    #backToTop .icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 2;
      color: var(--main-color);
    }

    .circular-chart {
      width: 100%;
      height: 100%;
      transform: rotate(-90deg);
    }

    .circle-bg {
      fill: none;
      stroke: var(--third-color);
      stroke-width: 3.8;
    }

    .circle {
      fill: none;
      stroke: var(--main-color);
      stroke-width: 3.8;
      stroke-dasharray: 100, 100;
      stroke-linecap: round;
      transition: stroke-dasharray 0.1s linear;
    }

    #backToTop:hover .icon {
      color: var(--second-color);
    }
  `;

  const styleSheet = document.createElement("style");
  styleSheet.type = "text/css";
  styleSheet.textContent = style;
  document.head.appendChild(styleSheet);


  window.addEventListener("scroll", () => {
    const scrollTop = window.scrollY;
    const docHeight = document.documentElement.scrollHeight - window.innerHeight;
    const scrollPercent = (scrollTop / docHeight) * 100;

    if (scrollPercent > 1) {  	
      backToTopButton.style.display = "block";
    } else {
      backToTopButton.style.display = "none";
    }
    const circle = document.querySelector(".circle");
    const offset = 100 - scrollPercent;
    circle.style.strokeDasharray = `${scrollPercent}, 100`;
  });

  backToTopButton.addEventListener("click", () => {
    window.scrollTo({
      top: 0,
      behavior: "smooth",
    });
  });
});

window.addEventListener('scroll', function () {
  const currentScroll = window.pageYOffset || document.documentElement.scrollTop;

  if (currentScroll > lastScrollTop) {

    menuButton.style.top = '65px';
  } else {
   
    menuButton.style.top = '0px';
  }

  lastScrollTop = currentScroll <= 0 ? 0 : currentScroll; 
});
document.addEventListener("DOMContentLoaded", function () {
  try {
    const style = document.createElement("style");
    style.innerHTML = `
      .faq-section {
        background: linear-gradient(135deg, #1f1f1f, #2a2a2a);
        padding: 60px 20px;
        max-width: 900px;
        margin: 40px auto;
        border-radius: 20px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.4);
        opacity: 0;
        transform: translateY(100px); /* يبدأ من أسفل */
        transition: opacity 0.9s ease, transform 0.9s ease;
      }
      .faq-section.show {
        opacity: 1;
        transform: translateY(0); /* يتحرك لمكانه الطبيعي */
      }
      .faq-title {
        text-align: center;
        color: #fff;
        font-size: 2rem;
        margin-bottom: 30px;
        font-weight: bold;
      }
      .faq-item {
        border-bottom: 1px solid rgba(255,255,255,0.1);
        margin-bottom: 10px;
        overflow: hidden;
      }
      .faq-question {
        background: none;
        border: none;
        width: 100%;
        text-align: right;
        font-size: 1.3rem;
        color: #fff;
        font-weight: 600;
        padding: 15px;
        cursor: pointer;
        position: relative;
        transition: background 0.3s ease;
      }
      .faq-question:hover {
        background: rgba(255, 255, 255, 0.05);
      }
      .faq-question::after {
        content: "＋";
        position: absolute;
        left: 20px;
        font-size: 1.5rem;
        transition: transform 0.3s ease;
      }
      .faq-question.active::after {
        transform: rotate(45deg);
      }
      .faq-answer {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height 0.5s ease, opacity 0.4s ease;
      }
      .faq-answer p {
        color: #ddd;
        padding: 0 15px 15px;
        font-size: 1rem;
        line-height: 1.8;
      }
      .faq-answer.show {
        max-height: 300px;
        opacity: 1;
      }
    `;
    document.head.appendChild(style);

    const targetBanner = document.querySelector(
      'section.s-block.s-block--fixed-banner img[src*="MtdJLIVyX3faCgmw5Jhu1VWo4GLw8Hz1Zm9NlOaU.png"]'
    );

    if (targetBanner) {
      const parentSection = targetBanner.closest("section.s-block.s-block--fixed-banner");
      if (parentSection) {
        parentSection.innerHTML = `
          <div class="faq-section">
            <h2 class="faq-title">الأسئلة الشائعة ❓</h2>
            <div class="faq-item">
              <button class="faq-question">كم يستغرق توصيل الطلب ؟</button>
              <div class="faq-answer">
                <p>عادة ما يتم توصيل الطلب خلال 7-14 يوم عمل.</p>
              </div>
            </div>
            <div class="faq-item">
              <button class="faq-question">هل يمكن ارجاع المنتج في حالة لم يعجبني؟</button>
              <div class="faq-answer">
                <p>نعم، ندعم في متجرنا سياسة الاسترجاع بشرط أن لا تتجاوز المدة 10 أيام من استلام المنتج.</p>
              </div>
            </div>
            <div class="faq-item">
              <button class="faq-question">هل منتجاتكم أصلية؟</button>
              <div class="faq-answer">
                <p>أكيد، نحن نفخر بأن منتجاتنا أصلية وذات جودة عالية.</p>
              </div>
            </div>
          </div>
        `;

        const faqSection = parentSection.querySelector(".faq-section");

        const observer = new IntersectionObserver((entries) => {
          entries.forEach((entry) => {
            if (entry.isIntersecting) {
              faqSection.classList.add("show");
              observer.disconnect();
            }
          });
        }, { threshold: 0.3 });

        observer.observe(faqSection);

        faqSection.querySelectorAll(".faq-question").forEach(button => {
          button.addEventListener("click", () => {
            button.classList.toggle("active");
            const answer = button.nextElementSibling;
            answer.classList.toggle("show");
          });
        });
      }
    }
  } catch (error) {
    console.error("خطأ في كود الأسئلة الشائعة:", error);
  }
});