// Shared atomic components for the USANRetirement landing page const { useState, useEffect, useRef } = React; // ---------- Waveform (Clara) ---------- function Waveform({ bars = 28, height = 80, gap = 4, barWidth = 5 }) { const heights = React.useMemo(() => { return Array.from({ length: bars }, (_, i) => { // smooth wave-y baseline const t = i / bars; const base = 25 + Math.sin(t * Math.PI * 2.2) * 25 + Math.cos(t * Math.PI * 4) * 18; return Math.max(15, Math.min(95, base + Math.random() * 18)); }); }, [bars]); return (
{heights.map((h, i) => (
))}
); } // ---------- Soft tinted photo placeholder ---------- function Photo({ label, ratio = '4/3', tint = 'warm', src, style = {}, className = '' }) { const tintMap = { warm: 'linear-gradient(135deg, var(--accent-soft) 0%, var(--cream-300) 100%)', cool: 'linear-gradient(135deg, var(--sage-soft) 0%, var(--cream-200) 100%)', sun: 'linear-gradient(135deg, oklch(0.93 0.05 80) 0%, var(--cream-300) 100%)', dusk: 'linear-gradient(135deg, oklch(0.88 0.06 50) 0%, oklch(0.92 0.03 30) 100%)', }; if (src) { const { backgroundPosition, ...restStyle } = style; return (
); } return (
{label}
); } // ---------- Section header ---------- function SectionHeader({ eyebrow, title, intro, align = 'left', maxWidth = 720 }) { return (
{eyebrow &&
{eyebrow}
}

{title}

{intro &&

{intro}

}
); } // ---------- Reveal-on-scroll wrapper ---------- function Reveal({ children, delay = 0, as = 'div', ...props }) { const ref = useRef(null); const [visible, setVisible] = useState(false); useEffect(() => { const el = ref.current; if (!el) return; const obs = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting) { setTimeout(() => setVisible(true), delay); obs.disconnect(); } }); }, { threshold: 0.12, rootMargin: '0px 0px -60px 0px' }); obs.observe(el); return () => obs.disconnect(); }, [delay]); const Tag = as; return ( {children} ); } // ---------- Icon set (minimal stroke icons) ---------- const Icon = { Phone: (p) => ( ), Sun: (p) => ( ), Pill: (p) => ( ), Chat: (p) => ( ), Heart: (p) => ( ), Search: (p) => ( ), Bell: (p) => ( ), Check: (p) => ( ), X: (p) => ( ), ArrowRight: (p) => ( ), Plus: (p) => ( ), Minus: (p) => ( ), Lock: (p) => ( ), }; Object.assign(window, { Waveform, Photo, SectionHeader, Reveal, Icon });