// Azlani — shared components used across pages
// Brandmark — uses uploaded Azlani logo asset (house + headset + chimney).
const AzlaniLogo = ({ size = 28, style = {} }) => (
);
const Nav = ({ current }) => (
);
const Footer = () => (
);
// Hook: reveal element when it enters viewport.
// Uses both IntersectionObserver AND a sync in-viewport check + scroll listener
// fallback so it always fires regardless of iframe quirks.
const useReveal = () => {
const ref = React.useRef(null);
const [shown, setShown] = React.useState(false);
React.useEffect(() => {
if (!ref.current) return;
let done = false;
const finish = () => { if (!done) { done = true; setShown(true); } };
const check = () => {
if (!ref.current) return;
const r = ref.current.getBoundingClientRect();
const vh = window.innerHeight || document.documentElement.clientHeight;
// Reveal once the element's top has crossed below 92% of the viewport,
// regardless of whether it's still on-screen (handles fast-scroll past).
if (r.top < vh * 0.92) finish();
};
// Defer the initial check by 2 RAFs so the hidden state has a chance to
// paint first — guarantees the CSS transition has a "from" frame.
requestAnimationFrame(() => requestAnimationFrame(check));
if (done) return;
// IntersectionObserver primary
let obs;
try {
obs = new IntersectionObserver(([e]) => {
if (e.isIntersecting) finish();
}, { threshold: 0.05, rootMargin: '0px 0px -8% 0px' });
obs.observe(ref.current);
} catch (_) {}
// Scroll/resize fallback
const onScroll = () => { check(); if (done) cleanup(); };
window.addEventListener('scroll', onScroll, { passive: true });
window.addEventListener('resize', onScroll);
const cleanup = () => {
window.removeEventListener('scroll', onScroll);
window.removeEventListener('resize', onScroll);
if (obs) obs.disconnect();
};
return cleanup;
}, []);
return [ref, shown];
};
// FadeUp/RevealLines: plain pass-throughs. Hidden-tab CSS animation pause was
// causing above-the-fold content to render blank in some iframe contexts; the
// page has plenty of other motion (auroras, ticker, scroll scenes, marquees).
const RevealLines = ({ lines, className = '', style = {} }) => (
{lines.map((line, i) => (
{line}
))}
);
const FadeUp = ({ children, className = '', style = {} }) => (
{children}
);
// Tiny mini-phone component used in lots of places
const PhoneFrame = ({ children, scale = 1 }) => (
);
Object.assign(window, { Nav, Footer, useReveal, RevealLines, FadeUp, PhoneFrame, AzlaniLogo });