function Header() {
  const linkStyle = { color: 'var(--lmc-black)', textDecoration: 'none', fontWeight: 600, fontSize: 14, letterSpacing: '0.02em' };
  return (
    <header style={{ position: 'sticky', top: 0, zIndex: 50, background: 'var(--lmc-white)', borderBottom: '2px solid var(--lmc-black)' }}>
      <div className="caution thin" />
      <div className="container" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 32px' }}>
        <a href="#" style={{ display: 'flex', alignItems: 'center', gap: 12, textDecoration: 'none' }}>
          <img src="../../assets/logo-color.png" alt="LaunchMyCannabiz" style={{ height: 38 }} />
        </a>
        <nav style={{ display: 'flex', gap: 28, alignItems: 'center' }}>
          <a href="#services" style={linkStyle}>Services</a>
          <a href="#process" style={linkStyle}>How it works</a>
          <a href="#stories" style={linkStyle}>Stories</a>
          <a href="#about" style={linkStyle}>About</a>
          <a href="#signup" className="btn-pop" style={{ padding: '10px 18px', boxShadow: '4px 4px 0 var(--lmc-black)', whiteSpace: 'nowrap' }}>Sign Up</a>
        </nav>
      </div>
    </header>
  );
}
window.Header = Header;