// Nav.jsx — sticky top nav with logo + CTA

function Nav({ tweaks, onBook }) {
  const [scrolled, setScrolled] = React.useState(false);
  const w = useWindowWidth();
  const isMobile = w < 640;

  React.useEffect(() => {
    if (!tweaks.stickyNav) return;
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, [tweaks.stickyNav]);

  const aesthetic = tweaks.aesthetic;
  // Nav background + logo treatment adapts to aesthetic
  const darkNav = aesthetic === 'systems';

  const styles = {
    wrap: {
      position: tweaks.stickyNav ? 'sticky' : 'absolute',
      top: 0, left: 0, right: 0, zIndex: 50,
      transition: 'all .28s cubic-bezier(.2,.7,.2,1)',
      background: scrolled
        ? (darkNav ? 'rgba(16,23,45,.82)' : 'rgba(255,255,255,.82)')
        : 'transparent',
      backdropFilter: scrolled ? 'blur(14px) saturate(160%)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(14px) saturate(160%)' : 'none',
      borderBottom: scrolled
        ? `1px solid ${darkNav ? 'rgba(255,255,255,.08)' : 'rgba(27,38,79,.08)'}`
        : '1px solid transparent',
    },
    inner: {
      maxWidth: 1240,
      margin: '0 auto',
      padding: scrolled
        ? (isMobile ? '10px 16px' : '12px 32px')
        : (isMobile ? '16px 16px' : '20px 32px'),
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'space-between',
      transition: 'padding .28s cubic-bezier(.2,.7,.2,1)',
    },
    logo: {
      height: scrolled ? (isMobile ? 26 : 32) : (isMobile ? 32 : 40),
      transition: 'height .28s cubic-bezier(.2,.7,.2,1)',
      filter: darkNav && !scrolled ? 'brightness(0) invert(1)' : 'none',
    },
  };

  return (
    <nav style={styles.wrap}>
      <div style={styles.inner}>
        <img src="assets/studiobe-logo.png" alt="StudioBE" style={styles.logo} />
        <PrimaryButton size="sm" onClick={onBook}>
          Book a Clarity Session
        </PrimaryButton>
      </div>
    </nav>
  );
}

window.Nav = Nav;