// ============================================
// Shared components
// ============================================
// Normaliseert paden zoals "uploads/foo.jpg" naar "/uploads/foo.jpg".
// Absolute URLs (http(s)://, //, data:) blijven onaangeraakt.
function normalizeAssetUrl(u) {
if (!u) return '';
if (/^(https?:)?\/\//i.test(u) || u.startsWith('data:') || u.startsWith('/')) return u;
return '/' + u;
}
// Placeholder image with monospace label — toont een echte afbeelding als `src` is meegegeven.
function Placeholder({ label = 'image', ratio = '4/3', style = {}, className = '', src = '', fit = 'cover', bg = '' }) {
if (src) {
return (
);
}
return (
{label}
);
}
// Reveal-on-scroll wrapper
function Reveal({ children, className = '', delay = 0, stagger = false, as: As = 'div' }) {
const ref = React.useRef(null);
const [visible, setVisible] = React.useState(false);
React.useEffect(() => {
const el = ref.current;
if (!el) return;
const obs = new IntersectionObserver(
(entries) => {
entries.forEach(e => {
if (e.isIntersecting) {
setVisible(true);
obs.unobserve(el);
}
});
},
{ threshold: 0.12, rootMargin: '0px 0px -10% 0px' }
);
obs.observe(el);
return () => obs.disconnect();
}, []);
return (
{children}
);
}
// Section header with eyebrow + title
function SectionHeader({ eyebrow, title, subtitle, align = 'left' }) {
return (
{eyebrow && (
{eyebrow}
)}
{title}
{subtitle && {subtitle}
}
);
}
// Icon set (minimal stroke icons)
const Icon = {
ArrowRight: ({ size = 16 }) => (
),
Calendar: ({ size = 18 }) => (
),
Clock: ({ size = 18 }) => (
),
Users: ({ size = 18 }) => (
),
Pin: ({ size = 18 }) => (
),
Phone: ({ size = 18 }) => (
),
Mail: ({ size = 18 }) => (
),
Check: ({ size = 16 }) => (
),
Close: ({ size = 20 }) => (
),
Filter: ({ size = 16 }) => (
),
Plus: ({ size = 16 }) => (
),
Minus: ({ size = 16 }) => (
),
Sparkle: ({ size = 16 }) => (
),
Menu: ({ size = 22 }) => (
),
Instagram: ({ size = 18 }) => (
),
Facebook: ({ size = 18 }) => (
),
};
window.LM_UI = { Placeholder, Reveal, SectionHeader, Icon };