const BrandLogo = () => {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
      <svg width='42' height='42' viewBox='0 0 64 64' fill='none' aria-hidden='true'>
        <rect x='4' y='4' width='56' height='56' rx='16' fill='#0B1522' stroke='#223248' strokeWidth='2' />
        <rect x='13' y='13' width='28' height='28' rx='8' fill='#4ADE8020' stroke='#4ADE80' strokeWidth='3' />
        <path d='M27 17V37' stroke='#4ADE80' strokeWidth='4' strokeLinecap='round' />
        <path d='M17 27H37' stroke='#4ADE80' strokeWidth='4' strokeLinecap='round' />
        <path d='M46 22H52C54.7614 22 57 24.2386 57 27V31C57 33.7614 54.7614 36 52 36H46' stroke='#60A5FA' strokeWidth='4' strokeLinecap='round' />
        <path d='M47 40C47 45.5228 42.5228 50 37 50H17' stroke='#60A5FA' strokeWidth='4' strokeLinecap='round' />
        <path d='M20 46L16 50L20 54' stroke='#60A5FA' strokeWidth='4' strokeLinecap='round' strokeLinejoin='round' />
      </svg>
      <div className="nav-brand-text">
        <div style={{ fontSize: 9, letterSpacing: 2, color: '#4ade80', fontFamily: "'Space Mono', monospace" }}>OR FLOW</div>
        <div style={{ fontSize: 20, fontWeight: 900, color: '#fff', lineHeight: 1, fontFamily: "'Syne', sans-serif" }}>OR Flow</div>
      </div>
    </div>
  );
};

window.BrandLogo = BrandLogo;