search.js

/* ═══════════════════════════════════════════════════════
   search.js — Site-wide search index + engine
   All pages include this file and call initSearch(...)
   ═══════════════════════════════════════════════════════ */

const SITE_SEARCH_DATA = [

  /* ── Welding Gloves ───────────────────────────────── */
  {
    label: "Split Leather Welding Gloves",
    text:  "Split Leather Welding Gloves styled in elegant red split leather palm protection inner layer densely woven cotton fabric adjustable wrist function welding heat",
    page:  "Products", url: "/product#welding"
  },
  {
    label: "Red Leather Welding Gloves",
    text:  "Red Leather Welding Gloves withstands elevated temperatures sparks molten metal complete interior lining high-quality split leather welding",
    page:  "Products", url: "/product#welding"
  },
  {
    label: "Leather Welding Gloves (10\")",
    text:  "Leather Welding Gloves 10 inch lining high-grade economic versions welding",
    page:  "Products", url: "/product#welding"
  },
  {
    label: "Split Leather Welding Gloves (13\")",
    text:  "Split Leather Welding Gloves 13 inch palm patch no lining economic version welding",
    page:  "Products", url: "/product#welding"
  },
  {
    label: "Kevlar Welding Gloves — Premium",
    text:  "Kevlar Welding Gloves premium heat resistance sparks high temperatures molten metal cut resistance safety industrial",
    page:  "Products", url: "/product#welding"
  },
  {
    label: "Leather Welding Gloves (No Lining)",
    text:  "Leather Welding Gloves no lining premium standard quality welding protection",
    page:  "Products", url: "/product#welding"
  },
  {
    label: "Leather Split Welding Gloves (13\")",
    text:  "Leather Split Welding Gloves 13 inch tall economic variants welding",
    page:  "Products", url: "/product#welding"
  },

  /* ── Canadian Gloves ──────────────────────────────── */
  {
    label: "Split Canadian Gloves",
    text:  "Split Canadian Gloves robust split leather superior durability wear resistance high-grade economic versions canadian",
    page:  "Products", url: "/product#canadian"
  },
  {
    label: "Chrome Leather Canadian Gloves",
    text:  "Chrome Leather Canadian Gloves palm patch standard quality canadian work gloves",
    page:  "Products", url: "/product#canadian"
  },
  {
    label: "Biscuit Beige Canadian Gloves — Premium",
    text:  "Biscuit Beige Canadian Gloves grain leather palm patch premium quality canadian",
    page:  "Products", url: "/product#canadian"
  },
  {
    label: "Grain Canadian Gloves",
    text:  "Grain Canadian Gloves high wear resistance longevity premium standard quality canadian leather",
    page:  "Products", url: "/product#canadian"
  },

  /* ── Driver Gloves ────────────────────────────────── */
  {
    label: "Back Split Front Chrome Driver Gloves",
    text:  "Back Split Front Chrome Driver Gloves split leather back flexibility breathability chrome leather palm fingers wear resistance premium standard driver",
    page:  "Products", url: "/product#driver"
  },
  {
    label: "Chrome Leather Driver Gloves",
    text:  "Chrome Leather Driver Gloves comfortable secure fit no lining premium standard driver industrial",
    page:  "Products", url: "/product#driver"
  },
  {
    label: "Back Split Driver Gloves",
    text:  "Back Split Driver Gloves split leather back airflow comfort interior lining premium standard driver",
    page:  "Products", url: "/product#driver"
  },

  /* ── Home / About ─────────────────────────────────── */
  {
    label: "About DSY Gloves",
    text:  "DSY Gloves established 1990 superior quality leather work gloves India West Bengal Panihati manufacturer exporter",
    page:  "Home", url: "/home#about"
  },
  {
    label: "Quality Craftsmanship",
    text:  "quality craftsmanship every pair manufactured exceeds industry standards tanning stitching premium leather gloves",
    page:  "Home", url: "/home#about"
  },
  {
    label: "Heat & Flame Protection",
    text:  "heat flame protection welding thermal Kevlar safety industrial gloves fire sparks",
    page:  "Home", url: "/home#about"
  },
  {
    label: "Trusted Since 1990",
    text:  "trusted since 1990 decades reliability trusted partner protective leather gloves history legacy",
    page:  "Home", url: "/home#about"
  },

  /* ── Contact ──────────────────────────────────────── */
  {
    label: "Our Address",
    text:  "contact address 256 Sarodapally Rabindranagar Ghola Bazar Panihati Municipality West Bengal 700111 India DSY Gloves",
    page:  "Contact", url: "/contact"
  },
  {
    label: "Email & Phone",
    text:  "contact email info@dsygloves.com dsygloves@gmail.com phone 6289578362 8420927274 9433432024 call enquiry",
    page:  "Contact", url: "/contact"
  },
];

/* ── Page badge colours ─────────────────────────────── */
const PAGE_BADGE = {
  Products: { bg: "#e0e7ff", color: "#3730a3" },
  Home:     { bg: "#dcfce7", color: "#166534" },
  Contact:  { bg: "#fef3c7", color: "#92400e" },
};

function _highlight(text, query) {
  const esc = query.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
  return text.replace(new RegExp(`(${esc})`, "gi"), "<mark>$1</mark>");
}

function _badge(page) {
  const b = PAGE_BADGE[page] || { bg: "#f1f5f9", color: "#475569" };
  return `<span style="font-size:0.65rem;font-weight:700;padding:2px 7px;border-radius:999px;background:${b.bg};color:${b.color};margin-left:auto;flex-shrink:0;white-space:nowrap">${page}</span>`;
}

function initSearch(inputId, clearId, resultsId) {
  const input   = document.getElementById(inputId);
  const clear   = document.getElementById(clearId);
  const results = document.getElementById(resultsId);
  if (!input) return;

  const SEARCH_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#888" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>`;

  function renderResults(query) {
    const q = query.toLowerCase();
    const matches = SITE_SEARCH_DATA.filter(d => d.text.toLowerCase().includes(q));

    if (matches.length === 0) {
      return `<div class="no-results">
        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#ccc" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/><line x1="8" y1="11" x2="14" y2="11"/></svg>
        <p>No results for <strong>"${query}"</strong></p>
        <span>Try a different keyword</span>
      </div>`;
    }

    return matches.slice(0, 8).map((d, i) =>
      `<div class="result-item" data-url="${d.url}" style="display:flex;align-items:center;gap:8px">
        ${SEARCH_SVG}
        <span style="flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis">${_highlight(d.label, query)}</span>
        ${_badge(d.page)}
      </div>`
    ).join("");
  }

  input.addEventListener("input", () => {
    const query = input.value.trim();
    clear.style.display = query ? "flex" : "none";
    if (!query) { results.innerHTML = ""; results.classList.remove("visible"); return; }
    results.innerHTML = renderResults(query);
    results.classList.add("visible");
  });

  results.addEventListener("click", (e) => {
    const item = e.target.closest(".result-item[data-url]");
    if (!item) return;
    results.classList.remove("visible");
    window.location.href = item.dataset.url;
  });

  clear.addEventListener("click", () => {
    input.value = "";
    clear.style.display = "none";
    results.innerHTML = "";
    results.classList.remove("visible");
    input.focus();
  });

  document.addEventListener("click", (e) => {
    if (!e.target.closest(".search-wrapper")) results.classList.remove("visible");
  });
}