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

  const navStyle = {
    position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
    padding: scrolled ? '14px 40px' : '24px 40px',
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    gap: 24,
    background: scrolled ? 'rgba(250,250,247,0.88)' : 'transparent',
    backdropFilter: scrolled ? 'blur(20px) saturate(140%)' : 'none',
    WebkitBackdropFilter: scrolled ? 'blur(20px) saturate(140%)' : 'none',
    borderBottom: scrolled ? '1px solid var(--line)' : '1px solid transparent',
    transition: 'all .4s cubic-bezier(.2,.7,.2,1)',
  };

  return (
    <nav style={navStyle} data-screen-label="Nav">
      <a href="#top" style={{ display: 'flex', alignItems: 'center' }}>
        <img src="assets/assos-logo.png" alt="Assos" style={{ height: 36, width: 'auto', display: 'block' }} />
      </a>

      <div style={{ flex: 1 }}></div>

      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <a href="tel:+31332078060" className="btn btn-ghost btn-sm nav-phone">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
          (033) 207 8060
        </a>
        <a href="#offerte" className="btn btn-primary btn-sm">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
          Plan een adviesgesprek
        </a>
      </div>

      <style>{`
        .nav-link {
          font-size: 14px; font-weight: 500; color: var(--fg);
          transition: color .3s ease;
        }
        .nav-link:hover { color: var(--accent); }
        @media (max-width: 1100px) { .nav-mid { display: none !important; } }
        @media (max-width: 720px) { .nav-phone { display: none !important; } }
      `}</style>
    </nav>
  );
}

window.Nav = Nav;