/* ─────────────────────────────────────────────────────────────────
Hoopoetech shared primitives:
- Logo
- Placeholder (striped, optional caution-tape header)
- HeroSchematic (animated technical drawing)
- Service glyphs (line-icon style, monospaced industrial)
- Reveal-on-scroll hook
───────────────────────────────────────────────────────────────── */
function Logo() {
return (
);
}
/* Striped placeholder for imagery the user will swap in later */
function Placeholder({ label, tape = false, style }) {
return (
);
}
/* Hook: add `.in` class when element enters viewport */
function useReveal() {
const ref = React.useRef(null);
React.useEffect(() => {
const el = ref.current;
if (!el) return;
const io = new IntersectionObserver(
(entries) => entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('in'); }),
{ threshold: 0.12 }
);
io.observe(el);
return () => io.disconnect();
}, []);
return ref;
}
/* Hero schematic — animated drafting-style drawing */
function HeroSchematic() {
return (
);
}
/* ── Service glyphs ──────────────────────────────────────────────
72x72 line drawings. Industrial / drafting style, monochrome.
───────────────────────────────────────────────────────────── */
const G = {
stroke: 'currentColor',
fill: 'none',
strokeWidth: 1.4,
strokeLinecap: 'round',
strokeLinejoin: 'round',
};
function GlyphResearch() {
return (
);
}
function GlyphBox() {
return (
);
}
function GlyphPacking() {
return (
);
}
function GlyphCNC() {
return (
);
}
function GlyphAcrylic() {
return (
);
}
function GlyphLaser() {
return (
);
}
function GlyphMDF() {
return (
);
}
function GlyphEPS() {
return (
);
}
function GlyphMetal() {
return (
);
}
function GlyphMetalLaser() {
return (
);
}
function GlyphCNCMachine() {
return (
);
}
function GlyphCarbon() {
return (
);
}
/* ── Service-card placeholder image variants for case studies ── */
function PlaceImgA() {
return (
);
}
function PlaceImgB() {
return (
);
}
function PlaceImgC() {
return (
);
}
function PlaceImgD() {
return (
);
}
const CASE_IMAGES = [PlaceImgA, PlaceImgB, PlaceImgC, PlaceImgD, PlaceImgA, PlaceImgB, PlaceImgC, PlaceImgD];
const SERVICE_GLYPHS = {
research: GlyphResearch,
box: GlyphBox,
packing: GlyphPacking,
cnc: GlyphCNC,
acrylic: GlyphAcrylic,
laser: GlyphLaser,
mdf: GlyphMDF,
eps: GlyphEPS,
metal: GlyphMetal,
metallaser: GlyphMetalLaser,
cncmachine: GlyphCNCMachine,
carbon: GlyphCarbon,
};
Object.assign(window, {
Logo, Placeholder, useReveal,
HeroSchematic, SERVICE_GLYPHS, CASE_IMAGES,
});