// Define mapping of search keywords → page URLs
const productPages = {
  "flame arrester": "flame-arrester.html",
  "breather valve": "breather-valve.html",
  "emergency relief valve": "emergency-relief-valve.html",
  "pressure safety valve": "pressure-safety-valve.html",
  "gauge hatches": "gauge-hatches.html",
  "tank blanketing system": "tank-blanketing-system.html",
  "breather valve with flame arrester": "breather-valve-with-flame-arrester.html"
};
 
// Handle search form submit
function handleSearch(event) {
  event.preventDefault(); // Stop form from reloading the page
 
  const input = document.getElementById("searchInput").value.trim().toLowerCase();
  let found = false;
 
  // Check for exact or partial match
  for (let key in productPages) {
    if (key.includes(input) || input.includes(key)) {
      window.location.href = productPages[key];
      found = true;
      break;
    }
  }
 
  if (!found) {
    alert("No matching product found!");
  }
 
  return false; // Prevent default form behavior
}

// Jumper behavior: show when scrolled down; smooth scroll to top on click.
    (function () {
      const jumper = document.getElementById('jumper');
      const showAfter = 240; // px scrolled before showing jumper
      const bouncyClass = 'bouncy';
      const visibleClass = 'visible';

      // Show/hide on scroll
      function handleScroll() {
        if (window.scrollY > showAfter) {
          jumper.classList.add(visibleClass);
        } else {
          jumper.classList.remove(visibleClass);
        }
      }

      // Scroll to top with smooth behavior and brief focus for a11y
      function scrollToTop() {
        // Use native behavior; keep bouncy animation for a moment then stop
        window.scrollTo({ top: 0, behavior: 'smooth' });

        // Temporarily remove bounce so it's not distracting while moving
        jumper.classList.remove(bouncyClass);
        setTimeout(() => jumper.classList.add(bouncyClass), 1000);
      }

      // Keyboard support: Enter or Space triggers
      jumper.addEventListener('click', scrollToTop);
      jumper.addEventListener('keydown', (e) => {
        if (e.key === 'Enter' || e.key === ' ') {
          e.preventDefault();
          scrollToTop();
        }
      });

      // When a hash link is clicked, focus the target for accessibility
      document.querySelectorAll('a[href^="#"]').forEach(a => {
        a.addEventListener('click', function (ev) {
          const id = this.getAttribute('href').slice(1);
          const target = document.getElementById(id);
          if (target) {
            // Wait for scroll to happen (native smooth). Then focus target.
            // setTimeout is used as a simple way (no callback for CSS smooth)
            setTimeout(() => {
              // Focus only if focusable; otherwise add temporary tabindex then focus
              if (!target.hasAttribute('tabindex')) {
                target.setAttribute('tabindex', '-1');
                target.focus({ preventScroll: true });
                // optional: remove tabindex after a while
                setTimeout(() => target.removeAttribute('tabindex'), 800);
              } else {
                target.focus({ preventScroll: true });
              }
            }, 250);
          }
        });
      });

      // Initialize
      window.addEventListener('scroll', handleScroll, { passive: true });
      handleScroll(); // set initial state

      // Optional: hide jumper when near top on load
      document.addEventListener('DOMContentLoaded', handleScroll);
    })();

            const faqItems = document.querySelectorAll(".faq-item");

faqItems.forEach(item => {
  const btn = item.querySelector(".faq-question");

  btn.addEventListener("click", () => {
    // close other items
    faqItems.forEach(i => {
      if (i !== item) {
        i.classList.remove("active");
        i.querySelector(".icon").textContent = "+";
      }
    });

    // toggle current item
    item.classList.toggle("active");

    const icon = item.querySelector(".icon");
    icon.textContent = item.classList.contains("active") ? "–" : "+";
  });
});
  function changeImage(element) {
    // Change main image
    document.getElementById("mainImage").src = element.src;
    // Update active class
    document.querySelectorAll(".thumbnails img").forEach(img => img.classList.remove("active"));
    element.classList.add("active");
  }
