/* eslint-disable */
/* NISE — Shared components, icons, hooks */
const { useState, useEffect, useRef, useMemo, useCallback } = React;
/* ------------------------------------------------------------------ */
/* Reveal hook — IntersectionObserver, adds .in class */
/* ------------------------------------------------------------------ */
function useReveal(opts = {}) {
const ref = useRef(null);
const [seen, setSeen] = useState(false);
useEffect(() => {
const el = ref.current;
if (!el) return;
const io = new IntersectionObserver((entries) => {
entries.forEach(e => {
if (e.isIntersecting) {
el.classList.add('in');
setSeen(true);
io.unobserve(el);
}
});
}, { threshold: opts.threshold ?? 0.18, rootMargin: opts.rootMargin ?? '0px 0px -8% 0px' });
io.observe(el);
return () => io.disconnect();
}, []);
return [ref, seen];
}
function Reveal({ as = 'div', children, className = '', delay = 0, ...rest }) {
const [ref] = useReveal();
const Tag = as;
return (
{children}
);
}
function Stagger({ as = 'div', children, className = '', ...rest }) {
const [ref] = useReveal();
const Tag = as;
return (
{children}
);
}
/* ------------------------------------------------------------------ */
/* SVG icons — outline, minimal */
/* ------------------------------------------------------------------ */
const Icon = {
arrow: (p) => ,
arrowUp:(p) => ,
check: (p) => ,
spark: (p) => ,
globe: (p) => ,
grid: (p) => ,
bell: (p) => ,
calendar:(p) => ,
users: (p) => ,
wallet: (p) => ,
unplug: (p) => ,
doc: (p) => ,
chat: (p) => ,
shield: (p) => ,
cloud: (p) => ,
book: (p) => ,
monitor:(p) => ,
layers: (p) => ,
mosque: (p) => ,
tool: (p) => ,
compass:(p) => ,
heart: (p) => ,
whatsapp:(p) => ,
mail: (p) => ,
pin: (p) => ,
phone: (p) => ,
menu: (p) => ,
close: (p) => ,
};
/* ------------------------------------------------------------------ */
/* Islamic geometric pattern — subtle bg, low opacity */
/* ------------------------------------------------------------------ */
function setPatternVar() {
// 8-point star tile in muted dark green
const svg = ``;
const url = `url("data:image/svg+xml;utf8,${svg.replace(/\n/g,'').replace(/\s+/g,' ')}")`;
document.documentElement.style.setProperty('--pattern-svg', url);
}
setPatternVar();
/* ------------------------------------------------------------------ */
/* CTA Button */
/* ------------------------------------------------------------------ */
function Btn({ kind = 'primary', children, href, onClick, icon = true, ...rest }) {
const cls = `btn ${kind === 'ghost' ? 'btn-ghost' : kind === 'dark' ? 'btn-dark' : ''}`;
const inner = <>{children}{icon && };
if (href) return {inner};
return ;
}
/* ------------------------------------------------------------------ */
/* Nav */
/* ------------------------------------------------------------------ */
function Nav() {
const [scrolled, setScrolled] = useState(false);
const [menuOpen, setMenuOpen] = useState(false);
const { t } = useLang();
useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 12);
onScroll();
window.addEventListener('scroll', onScroll, { passive: true });
return () => window.removeEventListener('scroll', onScroll);
}, []);
useEffect(() => {
if (!menuOpen) return;
const onHash = () => setMenuOpen(false);
window.addEventListener('hashchange', onHash);
return () => window.removeEventListener('hashchange', onHash);
}, [menuOpen]);
return (
<>
{menuOpen && setMenuOpen(false)} />}
);
}
Object.assign(window, { useReveal, Reveal, Stagger, Icon, Btn, Nav });