// components/Nav.jsx — top navigation

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

  return (
    <header style={{
      position: 'sticky',
      top: 0,
      zIndex: 50,
      background: scrolled ? 'rgba(244, 239, 232, 0.92)' : 'transparent',
      backdropFilter: scrolled ? 'saturate(140%) blur(8px)' : 'none',
      WebkitBackdropFilter: scrolled ? 'saturate(140%) blur(8px)' : 'none',
      borderBottom: scrolled ? '1px solid var(--sb-stone)' : '1px solid transparent',
      transition: 'background .2s ease, border-color .2s ease',
    }}>
      <div className="sb-container" style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        paddingBlock: 22,
      }}>
        <Logo size={26} color="var(--sb-ink)" accent="var(--sb-amber)" />
        <nav style={{ display: 'flex', alignItems: 'center', gap: 32 }}>
          <NavLink to="/" current={current}>Home</NavLink>
          <NavLink to="/services" current={current}>Services</NavLink>
          <NavLink to="/about" current={current}>About</NavLink>
          <NavLink to="/contact" current={current}>Contact</NavLink>
          <a href={window.BOOKINGS_URL}
             target="_blank"
             rel="noopener noreferrer"
             className="sb-btn sb-btn--primary"
             style={{ padding: '10px 18px', fontSize: 14 }}>
            Book a consultation
          </a>
        </nav>
      </div>
    </header>
  );
}

window.Nav = Nav;