// Shared building blocks: logo, nav (responsive), footer, buttons, badges. const { useState: useState_P, useEffect: useEffect_P } = React; // ── Brand mark + wordmark ────────────────────────────────────────── function Logo({ size = 44, color = '#FDB022' }) { return ( ); } function Lockup({ size = 36, fontSize = 22 }) { return ( Scholarly Affairs ); } // ── Pill badge ───────────────────────────────────────────────────── function Badge({ children, variant = 'lavender', size = 'md', className = '' }) { const sizeCls = size === 'lg' ? 'px-7 py-2.5 text-base' : 'px-6 py-2 text-sm'; const variantCls = variant === 'cream' ? 'bg-sa-cream text-sa-purple' : variant === 'white' ? 'bg-white text-sa-purple' : 'bg-sa-lavender-50 text-sa-purple'; return ( {children} ); } // ── Material Symbol shorthand ────────────────────────────────────── function Icon({ name, size = 24, color, className = '', style = {} }) { return ( ); } // ── Buttons ─────────────────────────────────────────────────────── function Btn({ children, variant = 'primary', icon, onClick, href, type, className = '', style = {}, fullWidth, size = 'md' }) { const sizeCls = size === 'lg' ? 'px-7 h-12 text-base' : size === 'sm' ? 'px-4 h-9 text-sm' : 'px-6 h-11 text-[15px]'; const base = `inline-flex items-center justify-center gap-2 font-bold rounded-sa-pill no-underline cursor-pointer border-0 btn-press ${sizeCls}`; const variants = { primary: 'bg-sa-yellow-mid hover:bg-sa-yellow-dark text-sa-black', purple: 'bg-sa-purple hover:bg-sa-purple-dark text-white', ghost: 'bg-transparent border border-sa-purple text-sa-purple hover:bg-sa-lavender-50', white: 'bg-white text-sa-purple hover:bg-sa-lavender-50', }; const cls = `${base} ${variants[variant] || variants.primary} ${fullWidth ? 'w-full' : ''} ${className}`; const inner = <>{children}{icon ? : null}; if (href) { const isExternal = /^https?:\/\//.test(href); return ( {inner} ); } return ; } // ── Section header (badge + h2 + sub) ─────────────────────────────── function SectionHead({ badge, badgeVariant = 'lavender', title, sub, align = 'center', titleStyle, className = '' }) { return (
{badge ? {badge} : null}

{title}

 {sub ?

{sub}

 : null}
); } // ── Top navigation (responsive with mobile drawer) ───────────────── function Navigation({ active }) { const [open, setOpen] = useState_P(false); useEffect_P(() => { const close = () => setOpen(false); window.addEventListener('popstate', close); window.addEventListener('app:navigation', close); return () => { window.removeEventListener('popstate', close); window.removeEventListener('app:navigation', close); }; }, []); useEffect_P(() => { document.body.style.overflow = open ? 'hidden' : ''; }, [open]); const items = [ { id: 'home', label: 'Home', href: '/' }, { id: 'about', label: 'About', href: '/about' }, { id: 'services', label: 'Services', href: '/services' }, ]; return (
{/* Desktop nav */}
Get In Touch
{/* Mobile menu trigger */}
{/* Mobile drawer */}
setOpen(false)}>
); } // ── Social glyphs ────────────────────────────────────────────────── function FacebookGlyph() { return ; } function InstagramGlyph() { return ; } function LinkedInGlyph() { return ; } function TwitterGlyph() { return ; } function Footer() { const socials = [ { label: 'Twitter', glyph: }, { label: 'Facebook', glyph: }, { label: 'Instagram', glyph: }, { label: 'LinkedIn', glyph: }, ]; const [email, setEmail] = useState_P(''); const [subscribed, setSub] = useState_P(false); const [newsletterSubmitting, setNewsletterSubmitting] = useState_P(false); const [newsletterStatus, setNewsletterStatus] = useState_P(null); const onNewsletterSubmit = async (event) => { event.preventDefault(); if (newsletterSubmitting) return; const cleanEmail = email.trim(); if (!cleanEmail || !/^\S+@\S+\.\S+$/.test(cleanEmail)) { setNewsletterStatus({ type: 'error', message: 'Enter a valid email address.' }); return; } setNewsletterSubmitting(true); setNewsletterStatus(null); setSub(false); try { const response = await fetch('/api/newsletter', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email: cleanEmail, sourcePage: window.location.pathname || '/', }), }); const data = await response.json().catch(() => ({})); if (!response.ok || !data.ok) { setNewsletterStatus({ type: 'error', message: data.message || 'We could not subscribe you right now. Please try again.', }); return; } setSub(true); setEmail(''); setNewsletterStatus({ type: 'success', message: data.message || 'Thanks, you are subscribed.', }); setTimeout(() => { setSub(false); setNewsletterStatus(null); }, 3000); } catch (error) { setNewsletterStatus({ type: 'error', message: 'We could not subscribe you right now. Please try again.', }); } finally { setNewsletterSubmitting(false); } }; return ( ); } Object.assign(window, { Logo, Lockup, Badge, Icon, Btn, SectionHead, Navigation, Footer, FacebookGlyph, InstagramGlyph, LinkedInGlyph, TwitterGlyph, });