/* Shared primitives for ZenTag landing */
const { useEffect, useRef, useState, useMemo, useCallback } = React;
// ----- Reveal-on-scroll hook -----
function useReveal(opts = {}) {
const ref = useRef(null);
useEffect(() => {
const el = ref.current;
if (!el) return;
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => {
if (e.isIntersecting) {
el.classList.add('in');
io.unobserve(el);
}
});
}, { threshold: opts.threshold ?? 0.12, rootMargin: opts.rootMargin ?? '0px 0px -8% 0px' });
io.observe(el);
return () => io.disconnect();
}, []);
return ref;
}
// ----- Reveal wrapper -----
function Reveal({ as = 'div', delay = 0, className = '', children, ...rest }) {
const ref = useReveal();
const Tag = as;
const delayClass = delay ? `reveal-delay-${delay}` : '';
return (
{children}
);
}
// ----- Section header -----
function Eyebrow({ children, className = '' }) {
return (
{children}
);
}
function SectionTitle({ eyebrow, title, sub, align = 'left', children }) {
const alignCls = align === 'center' ? 'text-center items-center mx-auto' : 'text-left items-start';
return (
{eyebrow &&
{eyebrow}}
{title}
{sub && (
{sub}
)}
{children}