// Nav.jsx — Fixed navigation with logo, social icons, menu Object.assign(window, { Nav }); function Nav({ currentPage = 'home' }) { const [menuOpen, setMenuOpen] = React.useState(false); return ( <> {menuOpen && (
{[['index.html#approach','Approach'],['Work.html','Work'],['index.html#services','Services'],['index.html#thought-leadership','Thought Leadership'],['index.html#contact',"Let's Connect"]].map(([href, label]) => ( setMenuOpen(false)} onMouseEnter={e => e.target.style.color='#111'} onMouseLeave={e => e.target.style.color='rgba(17,17,17,0.42)'}> {label} ))}
)} ); } function SocialIcon({ href, label, children }) { const [hov, setHov] = React.useState(false); return ( setHov(true)} onMouseLeave={() => setHov(false)}> {children} ); } const navStyles = { nav: { position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100, height: 52, padding: '0 2rem', display: 'flex', alignItems: 'center', justifyContent: 'space-between', background: '#fffafa', borderBottom: '1px solid rgba(17,17,17,0.13)', }, logo: { display: 'flex', alignItems: 'center', gap: 8, fontFamily: "'Space Mono', monospace", fontSize: 11, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: '#111', textDecoration: 'none', }, socials: { display: 'flex', gap: 8, alignItems: 'center' }, socialIcon: { display: 'flex', alignItems: 'center', justifyContent: 'center', width: 20, height: 20, background: '#000', borderRadius: '50%', textDecoration: 'none', transition: 'opacity 0.15s', }, menu: { position: 'fixed', top: 52, left: 0, right: 0, zIndex: 99, background: '#fffafa', borderBottom: '1px solid rgba(17,17,17,0.13)', display: 'flex', flexDirection: 'column', }, menuLink: { padding: '1rem 2rem', fontFamily: "'Space Mono', monospace", fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(17,17,17,0.42)', textDecoration: 'none', borderBottom: '1px solid rgba(17,17,17,0.13)', transition: 'color 0.15s', }, };