// shared.jsx — APABA shared components & primitives const { useState, useEffect, useRef, useMemo } = React; // ───────────────────────────────────────────────────────────── // Photo placeholder — documentary-style with monospace shot notes function Photo({ ratio = "16/9", tone = "warm", label, shot, height, children, noNote = false, style = {}, }) { const aspectStyle = height ? { height } : { aspectRatio: ratio.replace('/', ' / ') }; return (
{!noNote && (label || shot) && (
{label && {label}} {shot}
)} {children}
); } // ───────────────────────────────────────────────────────────── // Top utility bar — entity toggle, login, donate function UtilityBar({ entity, setEntity, currentPage, navigate }) { return (
{ e.preventDefault(); navigate('clinic'); }}>Free Legal Clinic Member Login { e.preventDefault(); navigate('foundation'); }} style={{ color: 'var(--gold)' }}>Donate
); } // ───────────────────────────────────────────────────────────── // Main header / nav function Header({ navigate, currentPage }) { const [scrolled, setScrolled] = useState(false); const [mobileOpen, setMobileOpen] = useState(false); useEffect(() => { const handler = () => setScrolled(window.scrollY > 8); window.addEventListener('scroll', handler, { passive: true }); return () => window.removeEventListener('scroll', handler); }, []); const links = [ { id: 'about', label: 'About' }, { id: 'membership', label: 'Membership' }, { id: 'events', label: 'Events' }, { id: 'clinic', label: 'Free Legal Clinic' }, { id: 'statements', label: 'Public Statements' }, ]; return (
{ e.preventDefault(); navigate('home'); }} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
); } // ───────────────────────────────────────────────────────────── // Wordmark — bespoke type lockup, no logo file needed function Wordmark() { return (
APABA Colorado
); } // ───────────────────────────────────────────────────────────── // Footer function Footer({ navigate }) { return ( ); } function FooterCol({ title, links, navigate }) { return (
{title}
); } // ───────────────────────────────────────────────────────────── // Generic page header (interior pages) function PageHero({ eyebrow, title, italicWord, kicker }) { return (
{eyebrow}

{title} {italicWord && <> {italicWord}}

{kicker && (

{kicker}

)}
); } // ───────────────────────────────────────────────────────────── // Section break ornament — printer's flourish function Ornament({ color = 'var(--rule)' }) { return (
§
); } // Export to window so other babel scripts can use them Object.assign(window, { Photo, UtilityBar, Header, Footer, FooterCol, PageHero, Ornament, Wordmark, });