<!--
  ============================================================
  IMAGE HOVER-ZOOM FEATURE (Standalone)
  ============================================================
  Ye file sirf zoom feature ke liye hai — isme wahi CSS, HTML
  structure aur JS hai jo humne main page
  (siemens-hmi-ktp400-global-distributor.php) me add/fix kiya tha.

  ISME KYA FIX HAI:
  1) Hover karne par jahan mouse tha aur zoom kahin aur dikh raha
     tha — fix: transform:scale hover effect ko force-off kiya
     aur position calculation getBoundingClientRect() se accurate
     kiya.
  2) Image ka NICHE (bottom) wala hissa hover/zoom nahi ho raha
     tha — fix: wrapper/image ki height ko auto rakha aur
     overflow:visible force kiya, taaki poori image (top se
     bottom tak) hoverable rahe, kahin crop na ho.

  ISTEMAAL KAISE KAREIN:
  - Neeche wale <style> block ko apni page ke <head> me (ya
    already existing <style> ke andar) paste karein.
  - <div class="img-zoom-wrapper">...</div> wala HTML structure
    apni image ke around use karein — bas id="zoomImg" aur
    id="heroResult" (ya jo bhi naam chahein) sahi rakhein aur
    neeche <script> me wahi id daalein.
  - <script> ko page ke end me (</body> se pehle) paste karein.
  ============================================================
-->

<style>
/* ================= IMAGE ZOOM CSS ================= */

.img-zoom-wrapper{
  position: relative;      /* zaroori: result box isi ke reference se absolute rahega */
  display: inline-block;
  /* FIX: image ka bottom portion kahin crop na ho isliye wrapper
     ko apni image ki poori height ke hisaab se grow karne diya */
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

.img-zoom-wrapper img{
  display: block;
  max-width: 100%;
  width: 100%;
  /* FIX: image ki height auto rakhi taaki poori image (top se
     bottom tak) wrapper ke andar fully visible/hoverable rahe */
  height: auto !important;
  -webkit-user-drag: none;
  user-select: none;
  /* FIX: hover par koi bhi transform:scale() na lage — warna
     lens ka calculated position aur actual image size mismatch
     ho jaata hai ("hover kahin, zoom kahin" wala bug) */
  transform: none !important;
  transition: none !important;
}

.img-zoom-wrapper img:hover{
  transform: none !important;
}

.img-zoom-lens{
  position: absolute;
  border: 1px solid #999;
  background-color: rgba(255,255,255,0.35);
  pointer-events: none;    /* flicker/glitch se bachne ke liye zaroori */
  display: none;           /* hover se pehle chhupa rahega */
  box-sizing: border-box;
}

.img-zoom-result{
  position: absolute;      /* overlay — document flow se bahar, layout nahi hilega */
  top: 0;
  left: 105%;
  width: 280px;
  height: 280px;
  border: 1px solid #d4d4d4;
  background-repeat: no-repeat;
  background-color: #fafafa;
  display: none;           /* hover se pehle chhupa rahega */
  z-index: 50;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.15);
}

/* Chhoti screen (mobile/tablet) par side me jagah nahi hoti,
   isliye zoom result box wahan hide kar dete hain taaki
   mobile layout bhi na bigde */
@media (max-width: 768px){
  .img-zoom-result{ display: none !important; }
}

/* FIX: agar parent (jaise .hero) par fixed height / overflow:hidden
   set ho to wahi image ke bottom portion ko crop kar sakta hai.
   Apne actual parent selector ke hisaab se yahan overflow:visible
   add karein (neeche .hero sirf example ke taur par hai). */
.hero{
  overflow: visible !important;
}
</style>

<!-- ================= IMAGE ZOOM HTML STRUCTURE ================= -->
/*<div class="img-zoom-wrapper" id="heroZoomWrap">*/
/*  <img id="zoomImg"*/
/*    src="SIEMENS-HMI-KTP400-DEALER-IN-NAGPUR-AND-NASHIK.webp"*/
/*    alt="Siemens HMI KTP400 Basic Panel 6AV6647-0AC00-0AX0 Supplier Dealer Distributor Exporter">*/
/*  <div id="heroResult" class="img-zoom-result"></div>*/
/*</div>*/

<!-- ================= IMAGE ZOOM SCRIPT (fixed) ================= -->
<script>
function imageZoom(imgID, resultID) {
  var img = document.getElementById(imgID);
  var result = document.getElementById(resultID);
  if (!img || !result) return;
  var container = img.parentElement;
  var cx, cy;

  var lens = document.createElement("DIV");
  lens.setAttribute("class", "img-zoom-lens");
  container.appendChild(lens);

  // FIX: offsetWidth/offsetHeight ke bajaye getBoundingClientRect() se
  // liya gaya ACTUAL rendered width/height use karte hain. Isse image
  // ka bottom-most hissa bhi sahi se zoom hota hai, chahe CSS me
  // kuch bhi scaling/cropping ho.
  function getImgRenderedSize() {
    var r = img.getBoundingClientRect();
    return { w: r.width, h: r.height };
  }

  function setupZoom() {
    var size = getImgRenderedSize();
    var maxSafeZoom = img.naturalWidth / size.w;
    var desiredZoom = 4;
    var zoomFactor = Math.min(desiredZoom, maxSafeZoom);
    if (!zoomFactor || zoomFactor < 1.5) zoomFactor = 1.5;

    var lensW = result.offsetWidth / zoomFactor;
    var lensH = result.offsetHeight / zoomFactor;
    lens.style.width = lensW + "px";
    lens.style.height = lensH + "px";

    cx = result.offsetWidth / lensW;
    cy = result.offsetHeight / lensH;

    result.style.backgroundImage = "url('" + img.src + "')";
    result.style.backgroundSize = (size.w * cx) + "px " + (size.h * cy) + "px";
  }

  function getCursorPos(e) {
    // FIX: getBoundingClientRect() har mousemove par fresh liya
    // jaata hai, isliye scroll/resize hone par bhi lens ki position
    // hamesha actual image ke sapeksh (relative) sahi rahegi.
    var a = img.getBoundingClientRect();
    var x = e.clientX - a.left;
    var y = e.clientY - a.top;
    return { x: x, y: y };
  }

  function moveLens(e) {
    e.preventDefault();
    var size = getImgRenderedSize();
    var pos = getCursorPos(e);
    var x = pos.x - (lens.offsetWidth / 2);
    var y = pos.y - (lens.offsetHeight / 2);

    // FIX: clamp ab image ke ACTUAL rendered width/height (size.w,
    // size.h) ke against hoti hai — isliye lens bottom-most pixel
    // row tak bhi sahi se pahunchta hai.
    if (x > size.w - lens.offsetWidth) { x = size.w - lens.offsetWidth; }
    if (x < 0) { x = 0; }
    if (y > size.h - lens.offsetHeight) { y = size.h - lens.offsetHeight; }
    if (y < 0) { y = 0; }

    lens.style.left = x + "px";
    lens.style.top = y + "px";

    result.style.backgroundPosition = "-" + (x * cx) + "px -" + (y * cy) + "px";
  }

  container.addEventListener("mouseenter", function () {
    lens.style.display = "block";
    result.style.display = "block";
    setupZoom(); // FIX: har baar fresh values, taaki resize/layout shift par bhi zoom sahi rahe
  });

  container.addEventListener("mousemove", moveLens);

  container.addEventListener("mouseleave", function () {
    lens.style.display = "none";
    result.style.display = "none";
  });

  // FIX: window resize hone par (ya orientation change par) values fresh recalc ho jaayen
  window.addEventListener("resize", setupZoom);
}

window.addEventListener("load", function () {
  imageZoom("zoomImg", "heroResult");
});
</script>