function TopBar() {
  return (
    <div style={{ borderBottom: '1px solid var(--border-default)', background: 'rgba(255,255,255,0.92)', backdropFilter: 'blur(10px)', position: 'sticky', top: 0, zIndex: 50 }}>
      <div className="container" style={{ display: 'flex', alignItems: 'center', gap: 20, padding: '14px 32px', fontFamily: 'var(--font-sans)', fontSize: 14 }}>
        <a href="#" style={{ display: 'flex', alignItems: 'center', gap: 10, textDecoration: 'none', color: 'var(--fg-1)', whiteSpace: 'nowrap' }}>
          <img src="assets/philipp.png" style={{ width: 28, height: 28, borderRadius: 999, objectFit: 'cover', objectPosition: 'center 22%' }} alt="" />
          <span style={{ fontWeight: 700, letterSpacing: '-0.01em' }}>Der Autopreneur</span>
        </a>
        <div style={{ flex: 1 }}></div>
        {/* Quiet language link-outs to EN / CN editions */}
        <nav style={{ display: 'flex', alignItems: 'center', gap: 14, fontSize: 12, fontWeight: 500, letterSpacing: '0.06em' }}>
          <span style={{ color: 'var(--fg-1)', borderBottom: '1px solid var(--fg-1)', paddingBottom: 2 }}>DE</span>
          <a href="https://t.ly/collabs" target="_blank" rel="noopener noreferrer" style={{ color: 'var(--fg-3)', textDecoration: 'none' }}>EN</a>
          <a href="https://t.ly/partnerships-cn" target="_blank" rel="noopener noreferrer" style={{ color: 'var(--fg-3)', textDecoration: 'none' }}>中文</a>
        </nav>
        <a href="#kontakt" className="btn btn-primary" style={{ padding: '10px 18px', fontSize: 14, whiteSpace: 'nowrap' }}>Fit-Check anfragen</a>
      </div>
    </div>
  );
}
window.TopBar = TopBar;