/* ============================================================
Shared components + inline SVG icons
============================================================ */
const { useState, useEffect, useRef } = React;
/* ---- Minimal stroke icons (no decorative SVG art, just UI glyphs) ---- */
const Icon = ({ name, size = 20, stroke = 1.7, ...p }) => {
const paths = {
calendar: <>,
pin: <>,
users: <>,
gavel: <>,
check: ,
plus: ,
arrowRight: ,
arrowLeft: ,
mail: <>,
phone: ,
instagram: <>,
whatsapp: ,
book: <>,
clock: <>,
star: ,
sparkle: ,
shield: ,
globe: <>,
document: <>,
menu: ,
close: ,
};
return (
);
};
/* ---- Scroll reveal wrapper ---- */
const Reveal = ({ children, delay = 0, as: Tag = "div", className = "", ...p }) => {
const ref = useRef(null);
const [shown, setShown] = useState(false);
useEffect(() => {
const el = ref.current;
if (!el) return;
// Already in view on mount? reveal immediately.
const r = el.getBoundingClientRect();
if (r.top < window.innerHeight && r.bottom > 0) { setShown(true); return; }
let fired = false;
const io = new IntersectionObserver(
([e]) => { if (e.isIntersecting) { fired = true; setShown(true); io.disconnect(); } },
{ threshold: 0.12, rootMargin: "0px 0px -8% 0px" }
);
io.observe(el);
// Failsafe: if the observer never fires (some embedded iframes), reveal anyway.
const t = setTimeout(() => { if (!fired) setShown(true); }, 1200);
return () => { io.disconnect(); clearTimeout(t); };
}, []);
return (
{children}
);
};
/* ---- Animated counting stat ---- */
const CountStat = ({ to, suffix = "", label }) => {
const ref = useRef(null);
const [val, setVal] = useState(0);
useEffect(() => {
const el = ref.current;
let started = false;
const run = () => {
if (started) return;
started = true;
const dur = 1400, start = performance.now();
const tick = (now) => {
const t = Math.min(1, (now - start) / dur);
const eased = 1 - Math.pow(1 - t, 3);
setVal(Math.round(to * eased));
if (t < 1) requestAnimationFrame(tick);
};
requestAnimationFrame(tick);
};
const r = el.getBoundingClientRect();
if (r.top < window.innerHeight && r.bottom > 0) { run(); return; }
const io = new IntersectionObserver(([e]) => {
if (!e.isIntersecting) return;
io.disconnect();
run();
}, { threshold: 0.5 });
io.observe(el);
const t = setTimeout(run, 1400);
return () => { io.disconnect(); clearTimeout(t); };
}, [to]);
return (
);
};
/* ---- Section header ---- */
const SectionHead = ({ eyebrow, title, sub, center, light }) => (
{eyebrow}
{title}
{sub &&
{sub}
}
);
/* ---- Balochistan-inspired geometric divider (repeating diamond lattice) ---- */
const GeoDivider = ({ tone = "gold" }) => {
const id = useRef("geo-" + Math.random().toString(36).slice(2, 8)).current;
const stroke = tone === "light" ? "rgba(247,239,224,.5)" : "rgba(185,122,34,.45)";
const dot = tone === "light" ? "rgba(240,226,203,.8)" : "rgba(185,122,34,.7)";
return (
);
};
Object.assign(window, { Icon, Reveal, CountStat, SectionHead, GeoDivider });