// Nav — minimal top bar. Transparent over hero; faint surface + hairline on scroll.
// The CTA is hidden while the hero is on screen (no double Book-a-call), and
// fades + slides in once the hero scrolls out of view.
function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  const [heroVisible, setHeroVisible] = React.useState(true);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onScroll, { passive: true });
    const hero = document.getElementById('top');
    let io;
    if (hero && 'IntersectionObserver' in window) {
      io = new IntersectionObserver(
        ([entry]) => setHeroVisible(entry.isIntersecting),
        { rootMargin: '-72px 0px 0px 0px', threshold: 0 }
      );
      io.observe(hero);
    }
    return () => { window.removeEventListener('scroll', onScroll); if (io) io.disconnect(); };
  }, []);

  const showCta = !heroVisible;

  return (
    <header style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
      transition: 'background .3s ease, border-color .3s ease, backdrop-filter .3s ease',
      background: scrolled ? 'rgba(0,0,0,0.45)' : 'transparent',
      backdropFilter: scrolled ? 'blur(10px)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(10px)' : 'none',
      borderBottom: '1px solid ' + (scrolled ? 'var(--color-border)' : 'transparent'),
    }}>
      <div style={{ width: '100%', padding: '0 clamp(22px, 7vw, 40px)', boxSizing: 'border-box', height: 78, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <a href="#top" style={{
          fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 21,
          letterSpacing: '0', color: 'var(--color-ink)', textDecoration: 'none', whiteSpace: 'nowrap',
        }}>Matthew Grote</a>
        <nav style={{ display: 'flex', alignItems: 'center', gap: 28 }}>
          <a className="btn-primary" href="https://cal.com/matthew-grote-riqgua/30min" style={{
            fontSize: 16, padding: '.7rem 1.5rem',
            opacity: showCta ? 1 : 0,
            transform: showCta ? 'translateY(0)' : 'translateY(-10px)',
            pointerEvents: showCta ? 'auto' : 'none',
            transition: 'opacity .35s var(--ease-soft), transform .35s var(--ease-soft)',
          }}>Book a call</a>
        </nav>
      </div>
    </header>
  );
}
window.Nav = Nav;