function Header() {
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 10,
      background: 'rgba(234,231,225,0.85)', backdropFilter: 'blur(12px)',
      borderBottom: '1px solid var(--line)',
    }}>
      <div style={{
        maxWidth: 1200, margin: '0 auto', padding: '20px 32px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <a href="#" style={{ display: 'flex', alignItems: 'center', textDecoration: 'none' }}>
          <span style={{
            fontFamily: 'var(--font-serif)', fontSize: 32, color: 'var(--fg)',
            letterSpacing: '-0.02em', lineHeight: 1,
          }}>genz</span>
        </a>
        <nav style={{ display: 'flex', gap: 32, alignItems: 'center' }}>
          {[
            { label: 'product', href: '#product' },
            { label: 'use cases', href: '#use-cases' },
            { label: 'pricing', href: '#pricing' },
            { label: 'company', href: '#company' },
          ].map(item => (
            <a key={item.label} href={item.href} style={{
              fontFamily: 'var(--font-sans)', fontSize: 15, color: 'var(--fg)',
              textDecoration: 'none', fontWeight: 400,
            }}>{item.label}</a>
          ))}
          <a href="#contact" style={{
            fontFamily: 'var(--font-sans)', fontSize: 15, color: 'var(--fg)',
            textDecoration: 'none', fontWeight: 400,
          }}>contact us</a>
          <a href="#contact" style={{
            fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: 500,
            background: 'var(--brand)', color: 'var(--fg-on-dark)',
            border: 'none', padding: '10px 18px', borderRadius: 999,
            cursor: 'pointer', textDecoration: 'none', display: 'inline-block',
          }}>Get started</a>
        </nav>
      </div>
    </header>
  );
}
window.Header = Header;