/* ─── Service Image Placeholders (500×500 product-shot style) ─────
One unique stylized SVG per service. Dark base + pineapple accent.
Designed to read like high-end product photography until real
images are dropped in.
────────────────────────────────────────────────────────────── */
const _IMG_BG_STOPS = (
);
/* Common chrome: gradient bg + grid + corner ticks + caption */
function ImgFrame({ children, caption, code }) {
return (
);
}
/* 1. Carbon fibre — woven twill */
function ImgCarbon() {
return (
{Array.from({length: 9}).map((_, r) => (
{Array.from({length: 9}).map((_, c) => {
const x = c * 40;
const y = r * 40;
const lit = (r + c) % 4 < 2;
return (
);
})}
))}
);
}
/* 2. Rubber gasket — concentric ring + bolt holes */
function ImgRubber() {
return (
{/* bolt holes */}
{Array.from({length: 8}).map((_, i) => {
const a = (i / 8) * Math.PI * 2;
return ;
})}
);
}
/* 3. Car mats — quilted diamond pattern */
function ImgCarMat() {
return (
{Array.from({length: 10}).map((_, r) =>
Array.from({length: 12}).map((_, c) => (
))
)}
HPM
);
}
/* 4. Asbestos gasket — fibrous board with hole pattern */
function ImgAsbestos() {
return (
{/* fibrous texture */}
{Array.from({length: 80}).map((_, i) => {
const x1 = Math.random()*380, y1 = Math.random()*380;
const x2 = x1 + (Math.random()-0.5)*40;
const y2 = y1 + (Math.random()-0.5)*40;
return ;
})}
{/* cut shape */}
);
}
/* 5. EPS foam — beads */
function ImgEPS() {
return (
{/* beads */}
{Array.from({length: 90}).map((_, i) => {
const r = 12 + Math.random()*16;
const x = 20 + Math.random()*340;
const y = 20 + Math.random()*340;
return ;
})}
{/* hot-wire cut path */}
);
}
/* 6. Acrylic sheet — layered transparent panes */
function ImgAcrylic() {
return (
{/* engraved logo */}
HPM
);
}
/* 7. MDF & Plywood — routed panel */
function ImgMDF() {
return (
{/* wood grain */}
{Array.from({length: 18}).map((_, i) => (
))}
{/* routed pattern */}
);
}
/* 8. Aluminium — extrusion profile */
function ImgAluminium() {
return (
{/* T-slot extrusion */}
{/* shine */}
{/* dimensions */}
80 × 80 mm
);
}
/* 9. Stainless steel — laser-cut filigree */
function ImgStainless() {
return (
{/* perforation lattice */}
{Array.from({length: 8}).map((_, r) =>
Array.from({length: 8}).map((_, c) => {
const cx = 40 + c*40;
const cy = 40 + r*40;
const odd = (r+c) % 2;
return odd
?
: ;
})
)}
{/* laser path */}
);
}
/* 10. CNC engraving — toolpath spiral */
function ImgCNC() {
return (
{/* spiral toolpath */}
{
let d = 'M 0 0';
for (let t = 0; t < 30; t += 0.1) {
const r = t * 4;
const x = r * Math.cos(t);
const y = r * Math.sin(t);
d += ` L ${x} ${y}`;
}
return d;
})()} fill="none" stroke="#FFE135" strokeWidth="1.2"/>
G01 X120.00 Y0.00 F800
G02 X0.00 Y120.00 I-120 J0
);
}
/* 11. Industrial custom — exploded isometric part */
function ImgIndustrial() {
return (
{/* base */}
{/* connectors */}
[3] HOUSING · ALU
[2] PLATE · CF
[1] BASE · SS304
);
}
const SERVICE_IMAGES = {
carbon: ImgCarbon,
rubber: ImgRubber,
carmat: ImgCarMat,
asbestos: ImgAsbestos,
eps: ImgEPS,
acrylic: ImgAcrylic,
mdf: ImgMDF,
aluminium: ImgAluminium,
stainless: ImgStainless,
cnc: ImgCNC,
industrial: ImgIndustrial,
};
Object.assign(window, { SERVICE_IMAGES });