function Nav() {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const links = [
    { label: "About", href: "#about" },
    { label: "Consulting", href: "#services" },
    { label: "Community", href: "#community" },
    { label: "Events", href: "#events" },
    { label: "Shop", href: "#products" },
    { label: "Resources", href: "#resources" },
  ];

  return (
    <header style={{
      position:'sticky', top:0, zIndex:50,
      background: scrolled ? 'color-mix(in oklab, var(--paper) 90%, transparent)' : 'transparent',
      backdropFilter: scrolled ? 'blur(12px)' : 'none',
      borderBottom: scrolled ? '1px solid var(--rule)' : '1px solid transparent',
      transition:'all .25s ease',
    }}>
      <div className="wrap" style={{display:'flex', alignItems:'center', justifyContent:'space-between', padding:'20px 0'}}>
        <a href="#top" style={{display:'flex', alignItems:'center', gap:12, textDecoration:'none', color:'var(--charcoal)'}}>
          <DiamondMark size={38} />
          <img src="assets/casc-wordmark-only.png" alt="CASC Global" style={{height:22, width:'auto', display:'block'}} />
        </a>
        <nav className="hide-m" style={{display:'flex', gap:34, alignItems:'center'}}>
          {links.map(l => (
            <a key={l.href} href={l.href} style={{color:'var(--ink)', textDecoration:'none', fontSize:14, fontWeight:400}}>{l.label}</a>
          ))}
          <a href="#contact" className="btn btn-ghost" style={{padding:'10px 20px', fontSize:12}}>Book a call</a>
        </nav>
        <button className="hide-m" style={{display:'none'}} onClick={() => setOpen(!open)} aria-label="menu">☰</button>
      </div>
    </header>
  );
}
Object.assign(window, { Nav });