// ui.jsx - shared building blocks: Logo, Icon set, Placeholder, Reveal, primitives
const { useState, useEffect, useRef, useCallback } = React;
/* ---------- Wordmark / Logo ---------- */
function Logo({ size = 22, mono = false, forceLight = false }) {
if (window.LOGO_IMG) {
const hgt = Math.round(size * 1.42);
const common = { height: hgt, width: 'auto' };
if (forceLight) {
return 
;
}
return (
);
}
return (
RealtyMarketing
.App
);
}
/* ---------- Icons (functional UI line icons) ---------- */
const Icon = ({ name, size = 22, stroke = 1.6, color = 'currentColor' }) => {
const p = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: color, strokeWidth: stroke, strokeLinecap: 'round', strokeLinejoin: 'round' };
const paths = {
link: <>,
radar: <>,
sparkle: <>,
share: <>,
play: <>,
image: <>,
bolt: <>,
globe: <>,
phone: <>,
monitor: <>,
check: <>,
arrow: <>,
chevron: <>,
shield: <>,
palette: <>,
clock: <>,
layers: <>,
tag: <>,
quote: <>,
};
return ;
};
/* ---------- Brand glyph icons for socials/stores (simple) ---------- */
const Brand = ({ name, size = 18, color = 'currentColor' }) => {
const p = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: color, strokeWidth: 1.6, strokeLinecap: 'round', strokeLinejoin: 'round' };
const g = {
instagram: <>,
facebook: <>,
tiktok: <>,
youtube: <>,
linkedin: <>,
x: <>,
apple: <>,
android: <>,
};
return ;
};
/* ---------- Striped placeholder imagery ---------- */
function Placeholder({ label, style, className = '', children, radius }) {
return (
{children || {label}}
);
}
/* ---------- Scroll reveal ---------- */
function useReveal() {
useEffect(() => {
const els = document.querySelectorAll('.reveal:not(.in)');
if (!('IntersectionObserver' in window)) { els.forEach(e => e.classList.add('in')); return; }
const io = new IntersectionObserver((entries) => {
entries.forEach(en => { if (en.isIntersecting) { en.target.classList.add('in'); io.unobserve(en.target); } });
}, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });
els.forEach(e => io.observe(e));
return () => io.disconnect();
});
}
/* ---------- Reveal wrapper ---------- */
function R({ children, delay = 0, as = 'div', className = '', style, ...rest }) {
const Tag = as;
return {children};
}
Object.assign(window, { Logo, Icon, Brand, Placeholder, useReveal, R });