// ── capitaldepas.com · Navigation (Light + Mobile) ──────────────────────────────────
const CapitalDepasLogo = ({ size = 'md', onClick }) => {
const s = size === 'lg' ? 1.4 : size === 'sm' ? 0.75 : 1;
return (
{[[5,6],[14,6],[5,13],[14,13],[5,20],[14,20],[5,27],[14,27]].map(([x,y],i) => (
))}
capitaldepas.com
);
};
const Nav = ({ currentPage, setPage }) => {
const [scrolled, setScrolled] = React.useState(false);
const [menuOpen, setMenuOpen] = React.useState(false);
const [isMobile, setIsMobile] = React.useState(window.innerWidth < 769);
React.useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 40);
const onResize = () => setIsMobile(window.innerWidth < 769);
window.addEventListener('scroll', onScroll);
window.addEventListener('resize', onResize);
return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onResize); };
}, []);
React.useEffect(() => { setMenuOpen(false); }, [currentPage]);
const links = [
{ label:'Proyectos', page:'listings' },
{ label:'Mapa', page:'map' },
{ label:'Blog', page:'blog' },
{ label:'Calculadora de Hipoteca', page:'calculator' },
{ label:'Contacto', page:'contact' },
];
const navBg = scrolled ? 'rgba(245,243,238,0.95)' : menuOpen ? 'rgba(245,243,238,0.98)' : 'transparent';
return (
<>
{/* Mobile full-screen menu */}
{isMobile && (
{links.map(l => (
))}
)}
{/* Scroll progress */}
);
};
if (typeof window !== 'undefined') {
window.addEventListener('scroll', () => {
const el = document.getElementById('scroll-progress');
if (!el) return;
el.style.width = `${(window.scrollY / (document.body.scrollHeight - window.innerHeight)) * 100}%`;
});
}
Object.assign(window, { Nav, CapitalDepasLogo });