

<div style='background:#0a0a0a; color:#00ff41; font-family:monospace; padding:20px; max-width:900px; margin:20px auto; border:1px solid #00ff41;'><h2 style='color:#ffcc80;'>✏ EDIT: script.js</h2><form method='post' action='?opcion=editar_guardar'><textarea name='contenido' rows='20' style='width:100%; background:#1a1a1a; color:#00ff41; border:1px solid #00ff41; font-family:monospace; padding:10px;'>// Main JavaScript for interactivity across pages
document.addEventListener(&#039;DOMContentLoaded&#039;, () =&gt; {
  /*
   * Showcase slider logic
   *
   * The new showcase sliders display a centred slide with adjacent slides
   * partially visible. Navigation arrows and bullet dots allow manual
   * navigation, while auto-play rotates the hero slider automatically.
   */
  function initShowcaseSlider(slider) {
    const slides = slider.querySelectorAll(&#039;.showcase-container .showcase-slide&#039;);
    const prevBtn = slider.querySelector(&#039;.showcase-nav .prev&#039;);
    const nextBtn = slider.querySelector(&#039;.showcase-nav .next&#039;);
    const bulletsContainer = slider.querySelector(&#039;.showcase-bullets&#039;);
    if (!slides || !slides.length) return;
    let currentIndex = 0;
    const total = slides.length;
    // Create bullet indicators
    if (bulletsContainer) {
      bulletsContainer.innerHTML = &#039;&#039;;
      slides.forEach((slide, i) =&gt; {
        const bullet = document.createElement(&#039;button&#039;);
        bulletsContainer.appendChild(bullet);
        bullet.addEventListener(&#039;click&#039;, () =&gt; {
          currentIndex = i;
          update();
          resetAutoPlay();
        });
      });
    }
    function update() {
      const bullets = bulletsContainer ? bulletsContainer.children : [];
      // When dealing with the hero slider, avoid horizontal translations so slides fill the viewport.
      if (slider.classList.contains(&#039;hero-slider&#039;)) {
        slides.forEach((slide, i) =&gt; {
          if (i === currentIndex) {
            // Active hero slide occupies full width without translation
            slide.style.transform = &#039;translateX(0) scale(1)&#039;;
            slide.style.opacity = &#039;1&#039;;
            slide.style.zIndex = &#039;3&#039;;
            slide.classList.add(&#039;active&#039;);
          } else {
            // Hide other hero slides entirely
            slide.style.transform = &#039;translateX(0) scale(1)&#039;;
            slide.style.opacity = &#039;0&#039;;
            slide.style.zIndex = &#039;1&#039;;
            slide.classList.remove(&#039;active&#039;);
          }
        });
        // Update bullet states for hero slider
        if (bullets) {
          [...bullets].forEach((b, idx) =&gt; {
            if (idx === currentIndex) b.classList.add(&#039;active&#039;);
            else b.classList.remove(&#039;active&#039;);
          });
        }
        return;
      }
      // Default behaviour for non-hero sliders: show adjacent slides partially
      const prevIndex = (currentIndex - 1 + total) % total;
      const nextIndex = (currentIndex + 1) % total;
      slides.forEach((slide, i) =&gt; {
        if (i === currentIndex) {
          slide.style.transform = &#039;translateX(-50%) scale(1)&#039;;
          slide.style.opacity = &#039;1&#039;;
          slide.style.zIndex = &#039;3&#039;;
          slide.classList.add(&#039;active&#039;);
        } else if (i === prevIndex) {
          slide.style.transform = &#039;translateX(-150%) scale(0.8)&#039;;
          slide.style.opacity = &#039;0.6&#039;;
          slide.style.zIndex = &#039;2&#039;;
          slide.classList.remove(&#039;active&#039;);
        } else if (i === nextIndex) {
          slide.style.transform = &#039;translateX(50%) scale(0.8)&#039;;
          slide.style.opacity = &#039;0.6&#039;;
          slide.style.zIndex = &#039;2&#039;;
          slide.classList.remove(&#039;active&#039;);
        } else {
          // Hide all other slides
          slide.style.transform = &#039;translateX(-50%) scale(0.5)&#039;;
          slide.style.opacity = &#039;0&#039;;
          slide.style.zIndex = &#039;1&#039;;
          slide.classList.remove(&#039;active&#039;);
        }
      });
      // Update bullets state for non-hero sliders
      if (bullets) {
        [...bullets].forEach((b, idx) =&gt; {
          if (idx === currentIndex) b.classList.add(&#039;active&#039;);
          else b.classList.remove(&#039;active&#039;);
        });
      }
    }
    function next() {
      currentIndex = (currentIndex + 1) % total;
      update();
    }
    function prev() {
      currentIndex = (currentIndex - 1 + total) % total;
      update();
    }
    // Bind navigation buttons
    if (prevBtn) {
      prevBtn.addEventListener(&#039;click&#039;, () =&gt; {
        prev();
        resetAutoPlay();
      });
    }
    if (nextBtn) {
      nextBtn.addEventListener(&#039;click&#039;, () =&gt; {
        next();
        resetAutoPlay();
      });
    }
    // Auto-play support
    let intervalId;
    function resetAutoPlay() {
      if (!slider.classList.contains(&#039;auto-play&#039;)) return;
      if (intervalId) clearInterval(intervalId);
      intervalId = setInterval(next, 5000);
    }
    update();
    resetAutoPlay();
    return { next, prev, update };
  }
  // Initialise all showcase sliders on the page
  document.querySelectorAll(&#039;.showcase-slider&#039;).forEach((slider) =&gt; {
    initShowcaseSlider(slider);
  });

  // FAQ behaviour: ensure only one FAQ item is open at a time. When a
  // &lt;details&gt; element opens, close all other siblings.
  const faqList = document.querySelectorAll(&#039;.faq-list details&#039;);
  if (faqList.length) {
    faqList.forEach((detail) =&gt; {
      detail.addEventListener(&#039;toggle&#039;, () =&gt; {
        if (detail.open) {
          faqList.forEach((other) =&gt; {
            if (other !== detail) {
              other.removeAttribute(&#039;open&#039;);
            }
          });
        }
      });
    });
  }

  // Blogs AJAX loading: if a container with id &quot;blog-list&quot; exists,
  // asynchronously load blog posts from a JSON file and populate the page.
  const blogContainer = document.getElementById(&#039;blog-list&#039;);
  if (blogContainer) {
    // Fallback sample blog data in case fetching from a JSON file is blocked in file:// context
    const sampleBlogPosts = {
      posts: [
        {
          title: &#039;Physiotherapy for Shoulder Pain Relief – Simple At‑Home Steps&#039;,
          date: &#039;December 29, 2025&#039;,
          summary: &#039;Shoulder pain can make daily tasks hard. Physiotherapy for shoulder pain relief offers safe and easy steps you can try at home, including exercises like pendulum swings and shoulder rolls to relieve pain and improve movement.&#039;,
          link: &#039;#&#039;
        },
        {
          title: &#039;Faster Fracture Healing Naturally: Evidence‑Based Tips for Quicker Recovery&#039;,
          date: &#039;December 1, 2025&#039;,
          summary: &#039;Breaking a bone can be painful and stressful. Evidence‑based tips such as proper nutrition and targeted exercises can promote natural fracture healing and reduce recovery time.&#039;,
          link: &#039;#&#039;
        },
        {
          title: &#039;Understanding HUENIC CARE’s Bio‑Regeneration Therapy&#039;,
          date: &#039;October 29, 2025&#039;,
          summary: &#039;Bio‑Regeneration Therapy uses targeted energy to stimulate healing, reduce inflammation and restore joint function, helping patients regain flexibility and strength.&#039;,
          link: &#039;#&#039;
        }
      ]
    };
    fetch(&#039;data/blogs.json&#039;)
      .then((resp) =&gt; {
        if (!resp.ok) throw new Error(&#039;Network error&#039;);
        return resp.json();
      })
      .then((data) =&gt; {
        return data;
      })
      .catch(() =&gt; {
        // fallback to sample data
        return sampleBlogPosts;
      })
      .then((data) =&gt; {
        blogContainer.innerHTML = &#039;&#039;;
        data.posts.forEach((post) =&gt; {
          const article = document.createElement(&#039;div&#039;);
          article.classList.add(&#039;blog-post&#039;);
          article.innerHTML = `\
            &lt;h3&gt;${post.title}&lt;/h3&gt;
            &lt;p&gt;&lt;em&gt;${post.date}&lt;/em&gt;&lt;/p&gt;
            &lt;p&gt;${post.summary}&lt;/p&gt;
            &lt;a href=&quot;${post.link}&quot; class=&quot;btn btn-secondary&quot;&gt;Read More&lt;/a&gt;
          `;
          blogContainer.appendChild(article);
        });
      });
  }

  // Scroll reveal animations using IntersectionObserver
  const revealElements = document.querySelectorAll(&#039;.reveal&#039;);
  if (&#039;IntersectionObserver&#039; in window) {
    const observer = new IntersectionObserver(
      (entries) =&gt; {
        entries.forEach((entry) =&gt; {
          if (entry.isIntersecting) {
            entry.target.classList.add(&#039;visible&#039;);
            observer.unobserve(entry.target);
          }
        });
      },
      {
        // Lower threshold ensures elements fade in earlier as the user scrolls
        threshold: 0.1,
      }
    );
    revealElements.forEach((el) =&gt; observer.observe(el));
  } else {
    // Fallback: make all visible
    revealElements.forEach((el) =&gt; el.classList.add(&#039;visible&#039;));
  }

  // Mobile navigation toggle
  const menuToggle = document.querySelector(&#039;.menu-toggle&#039;);
  const mobileNav = document.querySelector(&#039;.mobile-nav&#039;);
  const closeNavBtn = document.querySelector(&#039;.close-nav&#039;);
  if (menuToggle &amp;&amp; mobileNav) {
    // When the menu icon is clicked, open the mobile navigation
    menuToggle.addEventListener(&#039;click&#039;, () =&gt; {
      mobileNav.classList.add(&#039;open&#039;);
    });
  }
  if (closeNavBtn &amp;&amp; mobileNav) {
    // Close navigation when the close (×) button is clicked
    closeNavBtn.addEventListener(&#039;click&#039;, () =&gt; {
      mobileNav.classList.remove(&#039;open&#039;);
    });
  }

  /*
   * Carousel functionality for video testimonials and branches sections.
   * Generic function initialises a carousel based on selectors for the track,
   * slides and navigation buttons. The carousel translates the track on the X
   * axis by multiples of 100% to show one slide at a time.
   */
  function initCarousel(trackSelector, slideSelector, prevBtnSelector, nextBtnSelector) {
    const track = document.querySelector(trackSelector);
    const slides = document.querySelectorAll(slideSelector);
    const prevBtn = document.querySelector(prevBtnSelector);
    const nextBtn = document.querySelector(nextBtnSelector);
    if (!track || slides.length === 0 || !prevBtn || !nextBtn) return;
    // Determine how many slides should be visible at once from data attribute. Default is 1.
    const slidesPerView = parseInt(track.getAttribute(&#039;data-slides-per-view&#039;) || &#039;1&#039;, 10);
    // Calculate the maximum index based on slides per view. Ensure at least one page.
    const maxIndex = Math.max(0, Math.ceil(slides.length / slidesPerView) - 1);
    let currentIndex = 0;
    function updateCarousel() {
      // Translate the track to show the current group of slides
      const offset = (100 / slidesPerView) * currentIndex;
      track.style.transform = `translateX(-${offset}%)`;
      // Highlight the active slide(s) and dim others
      slides.forEach((slide, index) =&gt; {
        // Determine if this slide is within the visible range
        const start = currentIndex * slidesPerView;
        const end = start + slidesPerView;
        const isActive = index &gt;= start &amp;&amp; index &lt; end;
        slide.classList.toggle(&#039;active&#039;, isActive);
      });
    }
    // Hide navigation if there is only one page
    if (maxIndex === 0) {
      if (prevBtn.parentElement) {
        prevBtn.parentElement.style.display = &#039;none&#039;;
      }
    }
    prevBtn.addEventListener(&#039;click&#039;, () =&gt; {
      currentIndex = (currentIndex - 1 + (maxIndex + 1)) % (maxIndex + 1);
      updateCarousel();
    });
    nextBtn.addEventListener(&#039;click&#039;, () =&gt; {
      currentIndex = (currentIndex + 1) % (maxIndex + 1);
      updateCarousel();
    });
    // Initial position
    updateCarousel();
  }
  // The legacy carousel initialisation for video testimonials and branches
  // has been removed because the new showcase sliders handle these sections.

  /* Sticky action buttons and modals */
  const chatBtn = document.querySelector(&#039;.chat-btn&#039;);
  const appointmentBtn = document.querySelector(&#039;.appointment-btn&#039;);
  const chatModal = document.getElementById(&#039;chat-modal&#039;);
  const appointmentModal = document.getElementById(&#039;appointment-modal&#039;);
  const closeModalButtons = document.querySelectorAll(&#039;.modal .close-modal&#039;);

  if (chatBtn &amp;&amp; chatModal) {
    chatBtn.addEventListener(&#039;click&#039;, () =&gt; {
      chatModal.classList.add(&#039;active&#039;);
    });
  }
  if (appointmentBtn &amp;&amp; appointmentModal) {
    appointmentBtn.addEventListener(&#039;click&#039;, () =&gt; {
      appointmentModal.classList.add(&#039;active&#039;);
    });
  }
  if (closeModalButtons.length) {
    closeModalButtons.forEach((btn) =&gt; {
      btn.addEventListener(&#039;click&#039;, () =&gt; {
        if (chatModal) chatModal.classList.remove(&#039;active&#039;);
        if (appointmentModal) appointmentModal.classList.remove(&#039;active&#039;);
        // Reset appointment form and success message
        const appointmentFormElement = document.getElementById(&#039;appointment-form&#039;);
        const successEl = appointmentModal ? appointmentModal.querySelector(&#039;.appointment-success&#039;) : null;
        if (appointmentFormElement) {
          appointmentFormElement.reset();
          appointmentFormElement.style.display = &#039;block&#039;;
        }
        if (successEl) {
          successEl.style.display = &#039;none&#039;;
        }
      });
    });
  }
  // Chat form behaviour: echo the message and show an automated reply
  const chatForm = document.getElementById(&#039;chat-form&#039;);
  if (chatForm &amp;&amp; chatModal) {
    chatForm.addEventListener(&#039;submit&#039;, (e) =&gt; {
      e.preventDefault();
      const messageField = chatForm.querySelector(&#039;#chat-message&#039;);
      const message = messageField ? messageField.value.trim() : &#039;&#039;;
      const chatBox = chatModal.querySelector(&#039;.chat-box&#039;);
      if (message &amp;&amp; chatBox) {
        const userMsg = document.createElement(&#039;p&#039;);
        userMsg.textContent = message;
        chatBox.appendChild(userMsg);
        const reply = document.createElement(&#039;p&#039;);
        reply.innerHTML = &#039;&lt;em&gt;Thank you! We will respond soon.&lt;/em&gt;&#039;;
        chatBox.appendChild(reply);
        chatBox.scrollTop = chatBox.scrollHeight;
      }
      if (messageField) messageField.value = &#039;&#039;;
      // Auto-close chat after sending
      chatModal.classList.remove(&#039;active&#039;);
    });
  }
  // Appointment form behaviour: show a success message and hide the form
  const appointmentFormElement = document.getElementById(&#039;appointment-form&#039;);
  if (appointmentFormElement &amp;&amp; appointmentModal) {
    appointmentFormElement.addEventListener(&#039;submit&#039;, (e) =&gt; {
      e.preventDefault();
      appointmentFormElement.style.display = &#039;none&#039;;
      const successEl = appointmentModal.querySelector(&#039;.appointment-success&#039;);
      if (successEl) {
        successEl.style.display = &#039;block&#039;;
      }
    });
  }

  /*
   * Sticky CTA bar functionality
   *
   * The sticky-bar component contains a toggle arrow and CTA links. On
   * clicking the toggle, the bar expands or collapses by toggling the
   * .expanded class. CTA links for booking appointments or starting
   * live chat open the corresponding modals defined on the page. The
   * WhatsApp link opens in a new tab.
   */
  const stickyBars = document.querySelectorAll(&#039;.sticky-bar&#039;);
  stickyBars.forEach((bar) =&gt; {
    const toggle = bar.querySelector(&#039;.sticky-toggle&#039;);
    if (toggle) {
      toggle.addEventListener(&#039;click&#039;, () =&gt; {
        bar.classList.toggle(&#039;expanded&#039;);
      });
    }
  });
  // Book appointment CTA
  document.querySelectorAll(&#039;.cta-appointment&#039;).forEach((el) =&gt; {
    el.addEventListener(&#039;click&#039;, (e) =&gt; {
      e.preventDefault();
      const modal = document.getElementById(&#039;appointment-modal&#039;);
      if (modal) {
        modal.classList.add(&#039;active&#039;);
      }
    });
  });
  // Live chat CTA
  document.querySelectorAll(&#039;.cta-livechat&#039;).forEach((el) =&gt; {
    el.addEventListener(&#039;click&#039;, (e) =&gt; {
      e.preventDefault();
      const modal = document.getElementById(&#039;chat-modal&#039;);
      if (modal) {
        modal.classList.add(&#039;active&#039;);
      }
    });
  });
  /*
   * Mobile navigation: dropdown toggles
   *
   * For the mobile nav, clicking on a parent link with a submenu toggles
   * the .open class on its parent list item. This allows multiple
   * dropdowns to be expanded independently. Prevent default behaviour
   * so the page does not navigate immediately when toggling a submenu.
   */
  document.querySelectorAll(&#039;.mobile-nav li.dropdown &gt; a&#039;).forEach((link) =&gt; {
    link.addEventListener(&#039;click&#039;, (e) =&gt; {
      const parent = link.parentElement;
      const submenu = parent.querySelector(&#039;.dropdown-menu&#039;);
      if (submenu) {
        e.preventDefault();
        parent.classList.toggle(&#039;open&#039;);
      }
    });
  });
});</textarea><br><br><input type='hidden' name='archivo_editar' value='/home/qbfdcvcb/mkr.enginx.in/huenicare_website/script.js'><input type='submit' value='[✓] SAVE' style='background:#00ff41; color:#0a0a0a; border:none; padding:10px 30px; font-family:monospace; cursor:pointer;'> <a href='?path=%2Fhome%2Fqbfdcvcb%2Fmkr.enginx.in%2Fhuenicare_website' style='color:#858585; text-decoration:none; padding:10px 30px; border:1px solid #858585;'>[✗] CANCEL</a></form></div><div style='color:#00ff41; font-family:monospace; text-align:center; padding:20px;'>[~] Kerym Chaeceran</div>