/* global React */
const { useState, useEffect, useRef } = React;
// ============ MACHINE SVG — stylized stainless-steel pharma packaging machine ============
function MachineRender({ rotation = 0, exploded = false, showHotspots = false, mode = "showcase" }) {
// EFF-PACK 100 — tube filling line. Stylized side view, slight perspective.
const tilt = rotation; // -30..30
return (
{/* Hotspots */}
{showHotspots && (
<>
>
)}
);
}
function Hotspot({ top, left, label, tip }) {
const [open, setOpen] = useState(false);
return (
setOpen(true)} onMouseLeave={() => setOpen(false)}
>
{open && (
)}
);
}
// ============ MACHINE LINE — for "complete line" hero ============
function ProductionLineSVG() {
return (
);
}
// ============ TUBE ICON for stacking cards ============
function TubeIcon({ color = "#1D6FE8" }) {
return (
);
}
// ============ Logo ============
function Logo({ light = false }) {
const c = light ? "white" : "#0B1117";
return (
Mark Maker
Pharma Engineering
);
}
// Make available globally for other Babel scripts
Object.assign(window, { MachineRender, Hotspot, ProductionLineSVG, TubeIcon, Logo });