function Header({ active = 'home', onNavigate }) {
  const links = [{k:'home',l:'Início'},{k:'community',l:'Comunidade'},{k:'blog',l:'Blog'},{k:'book',l:'Livros'},{k:'projects',l:'Projetos'},{k:'trainings',l:'Treinamentos'},{k:'mentoring',l:'Mentorias'},{k:'about',l:'Sobre'}];
  return (
    <header style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '20px var(--space-7)', borderBottom: '1px solid var(--border-subtle)', background: 'var(--surface-page)' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <img alt="" src="assets/logo-mark.svg" style={{ width: 30, height: 30 }} />
        <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 18, color: 'var(--text-primary)' }}>MarceloCastelo<span style={{ color: 'var(--accent)' }}>.IO</span></span>
      </div>
      <nav style={{ display: 'flex', gap: 'var(--space-6)', fontFamily: 'var(--font-body)', fontSize: 14, fontWeight: 600 }}>
        {links.map(n => <span key={n.k} onClick={() => onNavigate && onNavigate(n.k)} style={{ color: active === n.k ? 'var(--text-primary)' : 'var(--text-muted)', cursor: 'pointer' }}>{n.l}</span>)}
      </nav>
    </header>
  );
}
function Footer() {
  const { BrandIcon } = window.MarceloCasteloIODesignSystem_5e00d7;
  return (
    <footer style={{ padding: 'var(--space-7)', borderTop: '1px solid var(--border-subtle)', display: 'flex', justifyContent: 'space-between', fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--text-muted)' }}>
      <span>© 2026 Marcelo Castelo Branco</span>
      <span style={{ display: 'flex', gap: 20, alignItems: 'center' }}>
        <a href="mailto:contato@marcelocastelo.io" style={{ color: 'var(--text-muted)', textDecoration: 'none' }}>contato@marcelocastelo.io</a>
        <a href="https://linkedin.com/in/marcelocastelobranco" style={{ color: 'var(--text-muted)', display: 'flex' }}><BrandIcon name="linkedin" size={16} /></a>
        <a href="https://github.com/marcelocastelo" style={{ color: 'var(--text-muted)', display: 'flex' }}><BrandIcon name="github" size={16} /></a>
        <a href="https://youtube.com/@marcelocastelo.io" style={{ color: 'var(--text-muted)', display: 'flex' }}><BrandIcon name="youtube" size={16} /></a>
      </span>
    </footer>
  );
}
Object.assign(window, { Header, Footer });