+ {/* Top Control Bar */}
+
+
+
+
+
+
+ {productName}
+
+
+ {images.length > 1 ? `${images.indexOf(currentImg) + 1} از ${images.length}` : 'تصویر با کیفیت اصلی'}
+
+
+
+
+ {/* Floating Zoom & Tool Controls */}
+
+
+
+
+ {Math.round(scale * 100)}%
+
+
+
+
+ {scale > 1 && (
+
+ )}
+
+
+
+
+
+ {/* Center Viewer Canvas with Pan and Zoom */}
+
+ {/* Navigation Next / Prev Buttons */}
+ {images.length > 1 && (
+ <>
+
+
+
+ >
+ )}
+
+ {/* Interactive Zoomable Image Element */}
+
1 ? "cursor-grab duration-150" : "cursor-zoom-in duration-200"
+ }`}
+ style={{
+ transform: `translate(${position.x}px, ${position.y}px) scale(${scale})`,
+ transformOrigin: "center center",
+ }}
+ onClick={(e) => {
+ if (scale === 1) {
+ setScale(2);
+ }
+ }}
+ >
+ {/* Raw unoptimized img element for 100% original full-resolution & clarity */}
+

+
+
+ {/* Drag instruction helper for zoomed view */}
+ {scale > 1 && (
+
+
+ برای جابجایی بکشید (Drag) • برای زوم اسکرول کنید
+
+ )}
+
+
+ {/* Bottom Thumbnail Strip */}
+ {images.length > 1 && (
+
+ {images.map((img, idx) => {
+ const isSelected = img === currentImg;
+ return (
+
+ );
+ })}
+
+ )}
+
+