function Nav(){
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(()=>{
    const on = () => setScrolled(window.scrollY > 8);
    on();
    window.addEventListener('scroll', on, {passive:true});
    return () => window.removeEventListener('scroll', on);
  },[]);

  const navStyle = {
    position:'fixed', top:0, left:0, right:0, zIndex:50,
    display:'flex', alignItems:'center', justifyContent:'space-between',
    padding:'18px 32px',
    background: scrolled ? 'rgba(12,11,10,0.78)' : 'transparent',
    backdropFilter: scrolled ? 'saturate(140%) blur(14px)' : 'none',
    WebkitBackdropFilter: scrolled ? 'saturate(140%) blur(14px)' : 'none',
    borderBottom: scrolled ? '1px solid var(--line-soft)' : '1px solid transparent',
    transition: 'background .25s ease, border-color .25s ease',
  };
  const linkStyle = { fontSize:13, color:'var(--ink-2)', fontWeight:400 };
  return (
    <header style={navStyle}>
      <div style={{display:'flex',alignItems:'baseline',gap:10}}>
        <span className="serif" style={{fontSize:22, fontWeight:400, letterSpacing:'-0.02em'}}>myrooms</span>
        <span className="mono" style={{color:'var(--accent)',fontSize:10}}>.design</span>
      </div>
      <nav style={{display:'flex',gap:36}}>
        <a href="Explore.html" style={linkStyle}>Explore</a>
        <a href="How It Works.html" style={linkStyle}>How it works</a>
        <a href="#clipper" style={linkStyle}>Clipper</a>
        <a href="#pricing" style={linkStyle}>Pricing</a>
      </nav>
      <div style={{display:'flex',alignItems:'center',gap:20}}>
        <a href="Hub.html" style={{...linkStyle}}>Sign in</a>
        <a href="Editor.html" style={{
          display:'inline-flex',alignItems:'center',gap:8,
          padding:'10px 16px',border:'1px solid var(--ink)',
          color:'var(--ink)', fontSize:13, fontWeight:500,
          borderRadius:999,
        }}>
          Build your first room
          <Icon.Arrow size={12}/>
        </a>
      </div>
    </header>
  );
}
window.Nav = Nav;