// Nav.jsx — Fin Fanfa · transparent, centered logo layout // Premium microinteractions: hover glow halo, dynamic-lit underline, // subtle vertical displacement. function Nav({ activeSection, onNavigate }) { const [open, setOpen] = React.useState(false); const [visible, setVisible] = React.useState(false); const { lang } = React.useContext(window.LangContext); const t = window.ffT[lang].nav; React.useEffect(() => { const timer = setTimeout(() => setVisible(true), 900); return () => clearTimeout(timer); }, []); const leftLinks = [ { id: 'about', label: t.about }, { id: 'experience', label: t.experience }, ]; const rightLinks = [ { id: 'projects', label: t.projects }, { id: 'stack', label: t.stack }, ]; const goHome = () => { if (window.ffScrollTo) window.ffScrollTo(0); else window.scrollTo({ top: 0, behavior: 'smooth' }); }; const NavLink = ({ id, label }) => { const active = activeSection === id; const [hov, setHov] = React.useState(false); const lit = active || hov; return ( ); }; return ( <>
{/* Mobile drawer — premium glassmorphism */} {open && (
{/* Nav links */}
{[...leftLinks, ...rightLinks].map((l, i) => ( ))}
{/* Bottom row — socials + lang toggle + CTA */}
{[ { href: 'https://github.com/felipefinfanfa', label: 'GitHub', icon: }, { href: 'https://linkedin.com/in/felipefinfanfa', label: 'LinkedIn', icon: }, ].map(({ href, label, icon }) => ( e.currentTarget.style.color = '#CED4F2'} onMouseLeave={e => e.currentTarget.style.color = 'rgba(206,212,242,0.38)'} >{icon} ))}
)} ); } function NavLogo({ onClick }) { const [hov, setHov] = React.useState(false); return ( ); } function LangToggle({ className }) { const { lang, setLang } = React.useContext(window.LangContext); const [hov, setHov] = React.useState(false); return ( ); } function ContactBtn({ onNavigate }) { const { lang } = React.useContext(window.LangContext); const t = window.ffT[lang].nav; const [hov, setHov] = React.useState(false); const handleClick = () => { if (window.matchMedia('(pointer: coarse)').matches) { const el = document.getElementById('contact-form'); if (el) { const rect = el.getBoundingClientRect(); const centered = rect.top + window.scrollY - Math.max(0, (window.innerHeight - rect.height) / 2); window.scrollTo({ top: centered, left: window.scrollX, behavior: 'smooth' }); } } else { onNavigate('contact'); } }; return ( ); } Object.assign(window, { Nav });