/**
* ui.jsx — small shared building blocks used by every section:
* the icon set, the language hook, the section heading pattern and
* the image placeholder. Keeping them here avoids repeating markup.
*/
/** Reads the language context provided in app.jsx.
* Returns { lang, setLang, t } where t is the active translation tree. */
function useLang() {
return React.useContext(window.LangContext);
}
/**
* Icon — single inline-SVG icon set (24×24, stroke-based).
* One component instead of an icon font keeps the download dependency-free
* and lets CSS color icons via `currentColor`.
*/
function Icon({ name, size = 22 }) {
const paths = {
pin: ,
phone: ,
mail: ,
clock: ,
key: ,
lock: ,
shield: ,
car: ,
safe: ,
siren: ,
star: ,
check: ,
chevron: ,
menu: ,
close: ,
arrow: ,
camera: ,
whatsapp: (
),
};
return (
);
}
/** SectionHead — the repeated kicker/title/lead heading pattern. */
function SectionHead({ kicker, title, lead, center }) {
return (
{kicker}
{title}
{lead &&
{lead}
}
);
}
/**
* Placeholder — a clearly-marked slot for the owner's real photos.
* Swap each instance for an with descriptive alt text before launch
* (see README → "Replacing placeholders").
*/
function Placeholder({ label, variant = "" }) {
return (
{label}
);
}
/* Share with the other Babel-compiled files (each gets its own scope). */
Object.assign(window, { useLang, Icon, SectionHead, Placeholder });
/**
* RevealObserver — hooks an IntersectionObserver that stays alive across
* React re-renders (language switches, etc.). A MutationObserver watches
* the document for new .reveal elements and feeds them in automatically.
*/
(function setupRevealObserver() {
if (typeof IntersectionObserver === "undefined") return;
var io = new IntersectionObserver(
function (entries) {
entries.forEach(function (entry) {
if (entry.isIntersecting) {
entry.target.classList.add("revealed");
io.unobserve(entry.target);
}
});
},
{ threshold: 0.12, rootMargin: "0px 0px -40px 0px" }
);
function scan() {
document.querySelectorAll(".reveal:not(.revealed)").forEach(function (el) {
io.observe(el);
});
}
/* Watch for DOM mutations — React re-renders trigger new .reveal nodes */
if (typeof MutationObserver !== "undefined") {
var mo = new MutationObserver(function () { setTimeout(scan, 60); });
var root = document.getElementById("root") || document.body;
mo.observe(root, { childList: true, subtree: true });
}
/* Initial scan once React has rendered */
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", function () { setTimeout(scan, 200); });
} else {
setTimeout(scan, 200);
}
setTimeout(scan, 600);
})();