/* global React */
const { useState, useEffect } = React;
const BP = { mobile: 720, tablet: 1024 };
function useBreakpoint() {
const get = () => {
const w = typeof window !== 'undefined' ? window.innerWidth : 1280;
return { width: w, isMobile: w < BP.mobile, isTablet: w >= BP.mobile && w < BP.tablet, isDesktop: w >= BP.tablet };
};
const [bp, setBp] = useState(get);
useEffect(() => {
const onResize = () => setBp(get());
window.addEventListener('resize', onResize);
return () => window.removeEventListener('resize', onResize);
}, []);
return bp;
}
function Eyebrow({ children }) {
return {children}
;
}
function PlaqueTag({ children, tone = 'slate' }) {
const bg = tone === 'forest' ? 'var(--mvg-forest)' : 'var(--mvg-slate-blue)';
return {children};
}
function Button({ children, variant = 'primary', size = 'md', onClick, as = 'button', href, icon }) {
const sizes = {
sm: { padding: '8px 14px', fontSize: 13 },
md: { padding: '12px 20px', fontSize: 14 },
lg: { padding: '15px 26px', fontSize: 15 },
};
const variants = {
primary: { background: 'var(--action-primary-bg)', color: '#fff', border: 'none' },
secondary: { background: 'var(--mvg-forest)', color: 'var(--mvg-offwhite)', border: 'none' },
ghost: { background: 'transparent', color: 'var(--mvg-slate-700)', border: '1px solid var(--border-default)' },
link: { background: 'transparent', color: 'var(--mvg-slate-700)', border: 'none', padding: '8px 4px' },
};
const style = {
display: 'inline-flex', alignItems: 'center', gap: 8,
fontFamily: 'var(--font-sans)', fontWeight: 600,
borderRadius: 6, cursor: 'pointer',
transition: 'background var(--dur-base) var(--ease-standard), transform var(--dur-fast) var(--ease-standard)',
...sizes[size], ...variants[variant],
};
const Tag = as === 'a' ? 'a' : 'button';
return e.currentTarget.style.transform='translateY(1px)'} onMouseUp={e=>e.currentTarget.style.transform='translateY(0)'} onMouseLeave={e=>e.currentTarget.style.transform='translateY(0)'}>{icon}{children};
}
const Icon = {
TrendingUp: (p) => ,
Compass: (p) => ,
BarChart: (p) => ,
Briefcase: (p) => ,
Mountain: (p) => ,
ArrowRight: (p) => ,
Check: (p) => ,
Menu: (p) => ,
X: (p) => ,
User: (p) => ,
BookOpen: (p) => ,
ShieldCheck: (p) => ,
Layers: (p) => ,
Settings: (p) => ,
Wallet: (p) => ,
Flag: (p) => ,
Map: (p) => ,
FileCheck: (p) => ,
Telescope: (p) => ,
Users: (p) => ,
Sparkles: (p) => ,
MessageCircle: (p) => ,
Mail: (p) => ,
Linkedin: (p) => ,
};
Object.assign(window, { Eyebrow, PlaqueTag, Button, Icon, useBreakpoint, BP });