{children}

); } // ── PageHero ───────────────────────────────────────────────── function PageHero({ label, title, sub, bg = '#000', fg = '#fff', eyebrow, cta, ctaLink = 'contact' }) { return (

{label && {label}}

{title}

{sub && (

{sub}

)} {cta && ( {cta} )}

); } // ── Nav ────────────────────────────────────────────────────── function OnyxNav() { const [scrolled, setScrolled] = useState(false); const [servicesOpen, setServicesOpen] = useState(false); const [methodOpen, setMethodOpen] = useState(false); const [aboutOpen, setAboutOpen] = useState(false); const [mobileOpen, setMobileOpen] = useState(false); const closeTimer = useRef(null); const methodCloseTimer = useRef(null); const aboutCloseTimer = useRef(null); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 60); window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, []); useEffect(() => { document.body.classList.toggle('nav-locked', mobileOpen); return () => document.body.classList.remove('nav-locked'); }, [mobileOpen]); const openServices = () => { clearTimeout(closeTimer.current); setServicesOpen(true); }; const scheduleCloseServices = () => { clearTimeout(closeTimer.current); closeTimer.current = setTimeout(() => setServicesOpen(false), 220); }; const openMethod = () => { clearTimeout(methodCloseTimer.current); setMethodOpen(true); }; const scheduleCloseMethod = () => { clearTimeout(methodCloseTimer.current); methodCloseTimer.current = setTimeout(() => setMethodOpen(false), 220); }; const openAbout = () => { clearTimeout(aboutCloseTimer.current); setAboutOpen(true); }; const scheduleCloseAbout = () => { clearTimeout(aboutCloseTimer.current); aboutCloseTimer.current = setTimeout(() => setAboutOpen(false), 220); }; const linkStyle = { fontFamily: 'var(--font)', fontSize: 11, fontWeight: 500, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#888', background: 'none', border: 'none', cursor: 'pointer', transition: 'color 200ms', padding: '4px 0', position: 'relative', }; const serviceLinks = [ { label: 'Athlete Training', href: 'athlete-training' }, { label: 'Youth Performance', href: 'youth-performance' }, { label: 'Private Training', href: 'private-training' }, { label: 'Performance Testing', href: 'performance-testing' }, { label: 'Memberships', href: 'memberships' }, { label: 'Onyx Vault', href: 'vault' }, ]; const methodLinks = [ { label: 'Our Methodology', href: 'methodology' }, { label: 'Onyx Performance OS', href: 'performance-os' }, ]; const aboutLinks = [ { label: 'About Onyx', href: 'about' }, { label: 'Gallery', href: 'gallery' }, { label: 'Blog', href: 'blog' }, ]; const topLinks = [ { label: 'Schedule', href: 'schedule' }, ]; return ( <> {/* Mobile drawer — sibling of nav so backdrop-filter doesn't clip it */}

setMobileOpen(false)}>Services {serviceLinks.map(sl => ( setMobileOpen(false)}>{sl.label} ))} setMobileOpen(false)}>Methodology setMobileOpen(false)}>Onyx Performance OS setMobileOpen(false)}>Schedule setMobileOpen(false)}>About {aboutLinks.slice(1).map(al => ( setMobileOpen(false)}>{al.label} ))} setMobileOpen(false)}>Book Assessment

{/* Sticky mobile bottom CTA — hidden on desktop via CSS */}

Book Intro Consult Call

); } // ── Footer ─────────────────────────────────────────────────── function FooterNewsletter() { const [email, setEmail] = useState(''); const [status, setStatus] = useState('idle'); // idle | submitting | done | error const [focused, setFocused] = useState(false); const handleSubmit = async (e) => { e.preventDefault(); if (status === 'submitting' || status === 'done') return; setStatus('submitting'); try { const res = await fetch('/api/subscribe', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email }), }); const data = await res.json(); setStatus(res.ok && data.success ? 'done' : 'error'); } catch { setStatus('error'); } }; return (

From the Lab

Training science and performance insights.

{status === 'done' ? (

You're in. We'll be in touch when there's something worth reading.

) : (

setEmail(e.target.value)} onFocus={() => setFocused(true)} onBlur={() => setFocused(false)} style={{ fontFamily: 'var(--font)', fontSize: 13, fontWeight: 300, background: 'transparent', border: 'none', borderBottom: `1px solid ${focused ? '#fff' : '#2A2A2A'}`, color: '#fff', padding: '10px 0', width: 220, outline: 'none', letterSpacing: '0.04em', marginRight: 20, transition: 'border-color 200ms', }} />

)}

); } function OnyxFooter() { const cols = [ { head: 'Services', links: [ { label: 'Athlete Training', href: 'athlete-training' }, { label: 'Youth Performance', href: 'youth-performance' }, { label: 'Private Training', href: 'private-training' }, { label: 'Onyx Vault', href: 'vault' }, { label: 'All Services', href: 'services' }, ]}, { head: 'Performance', links: [ { label: 'Testing & Evaluation', href: 'performance-testing' }, { label: 'Our Methodology', href: 'methodology' }, { label: 'Onyx Performance OS', href: 'performance-os' }, { label: 'Memberships', href: 'memberships' }, { label: 'Schedule', href: 'schedule' }, ]}, { head: 'Company', links: [ { label: 'About Onyx', href: 'about' }, { label: 'Contact', href: 'contact' }, { label: 'Book Assessment', href: 'contact' }, ]}, ]; return ( ); } // ── Email Capture ───────────────────────────────────────────── const WEB3FORMS_EMAIL_KEY = '90de3a41-4bb8-491c-aeab-fd4ff166bd2d'; function EmailCapture() { const [visible, setVisible] = useState(false); const [submitted, setSubmitted] = useState(false); const [email, setEmail] = useState(''); const [submitting, setSubmitting] = useState(false); const [focused, setFocused] = useState(false); useEffect(() => { if (localStorage.getItem('onyx-email-capture')) return; const onScroll = () => { const pct = window.scrollY / (document.body.scrollHeight - window.innerHeight); if (pct > 0.55) { setVisible(true); window.removeEventListener('scroll', onScroll); } }; window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, []); const dismiss = () => { setVisible(false); localStorage.setItem('onyx-email-capture', 'dismissed'); }; const handleSubmit = async (e) => { e.preventDefault(); if (submitting) return; setSubmitting(true); try { const res = await fetch('/api/subscribe', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email }), }); const data = await res.json(); if (res.ok && data.success) { setSubmitted(true); localStorage.setItem('onyx-email-capture', 'submitted'); } } finally { setSubmitting(false); } }; if (!visible) return null; return (

{submitted ? (

You're in.

We'll be in touch when there's something worth reading.

) : ( <>

From the Lab

Performance insights worth reading.

Training science, testing methodology, and athlete development. No noise. Published when it's ready.

)}

); } // ── Export to window ───────────────────────────────────────── Object.assign(window, { OnyxNav, OnyxFooter, useInView, AnimatedNumber, SectionLabel, PageHero, EmailCapture, });