function Header() {
  const linkStyle = {
    color: 'var(--fg-3)',
    fontFamily: 'var(--font-sans)',
    fontSize: 11,
    fontWeight: 500,
    textTransform: 'uppercase',
    letterSpacing: '0.2em',
    textDecoration: 'none',
    transition: 'color 200ms',
  };
  return (
    <header style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
      background: 'rgba(10,15,13,0.8)',
      backdropFilter: 'blur(12px)',
      WebkitBackdropFilter: 'blur(12px)',
      borderBottom: '1px solid rgba(26,38,32,0.5)',
    }}>
      <nav style={{
        maxWidth: 1280, margin: '0 auto',
        padding: '18px 32px',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      }}>
        <Wordmark size="md" />
        <div style={{ display: 'flex', gap: 40, alignItems: 'center' }}>
          <a href="#inicio" style={linkStyle}>Início</a>
          <a href="#precos" style={linkStyle}>Planos</a>
          <a href="https://wa.me/5511996149633?text=Olá, vim pelo site Bitsz, queria fala com um especialista."
            target="_blank" 
            style={{
            ...linkStyle,
            color: 'var(--green-400)',
            fontWeight: 700,
          }}>Fale Conosco</a>
        </div>
      </nav>
    </header>
  );
}
window.Header = Header;