// components.jsx โ small shared building blocks + icons
const Icon = ({ name, size = 20, stroke = 1.5, color = "currentColor" }) => {
const props = {
width: size, height: size, viewBox: "0 0 24 24",
fill: "none", stroke: color, strokeWidth: stroke,
strokeLinecap: "round", strokeLinejoin: "round",
};
switch (name) {
case "arrow-right":
return ();
case "arrow-up-right":
return ();
case "play":
return ();
case "check":
return ();
case "plus":
return ();
case "star":
return ();
case "whatsapp":
return ();
case "instagram":
return ();
case "tiktok":
return ();
case "youtube":
return ();
// service icons
case "i-valuation":
return ();
case "i-strategy":
return ();
case "i-invest":
return ();
case "i-timeline":
return ();
case "i-portfolio":
return ();
case "i-upgrader":
return ();
case "chevron-down":
return ();
case "i-calc":
return ();
default: return null;
}
};
// Reveal-on-scroll helper
const Reveal = ({ children, delay = 0, as: As = "div", ...rest }) => {
const ref = React.useRef(null);
React.useEffect(() => {
const el = ref.current;
if (!el) return;
const obs = new IntersectionObserver(([entry]) => {
if (entry.isIntersecting) {
setTimeout(() => el.classList.add("in"), delay);
obs.unobserve(el);
}
}, { threshold: 0.12, rootMargin: "-40px 0px" });
obs.observe(el);
return () => obs.disconnect();
}, [delay]);
return {children};
};
// Brand mark โ uses the Property Scout logo image
const __PSLogo = () => (window.__resources && window.__resources.logoPropertyScout) || "assets/property-scout-logo.png";
const BrandMark = ({ variant = "nav" }) => (
})
{variant === "nav" && Shi Yao ยท PropNex
}
);
Object.assign(window, { Icon, Reveal, BrandMark });