// NavBar — sticky glass nav with Schedule Demo CTA + mobile drawer
function NavBar({ onCTA }) {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  useEffect(() => {
    const h = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', h);
    h();
    return () => window.removeEventListener('scroll', h);
  }, []);

  // Close drawer on Esc + lock body scroll when open
  useEffect(() => {
    if (!menuOpen) return;
    const onKey = (e) => { if (e.key === 'Escape') setMenuOpen(false); };
    window.addEventListener('keydown', onKey);
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => {
      window.removeEventListener('keydown', onKey);
      document.body.style.overflow = prev;
    };
  }, [menuOpen]);

  const links = [
    { label: 'Home',          href: '/' },
    { label: 'Eric\u2019s Story', href: '/eric-story' },
    { label: 'Case Studies',  href: '/case-studies' },
    { label: 'Free Training', href: '/#free-training' },
    { label: 'Core Values',   href: '/core-values' },
    { label: 'Blog',          href: 'https://master-filmmaker.kit.com/posts', external: true },
  ];

  return (
    <>
      <nav data-mf="nav" style={{
        position: 'sticky', top: 0, zIndex: 50,
        padding: '14px 44px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        background: scrolled ? 'rgba(10,6,8,0.78)' : 'rgba(10,6,8,0.35)',
        backdropFilter: 'blur(16px)', WebkitBackdropFilter: 'blur(16px)',
        borderBottom: scrolled ? '1px solid rgba(255,255,255,0.08)' : '1px solid transparent',
        transition: 'all 220ms cubic-bezier(0.22, 1, 0.36, 1)',
      }}>
        <Wordmark/>
        <div data-mf="nav-links" style={{ display: 'flex', alignItems: 'center', gap: 34 }}>
          {links.map(l => (
            <a key={l.label} href={l.href}
              target={l.external ? '_blank' : undefined}
              rel={l.external ? 'noopener noreferrer' : undefined}
              style={{
              fontFamily: 'Poppins', fontWeight: 500, fontSize: 14,
              color: 'rgba(255,255,255,0.78)', textDecoration: 'none',
              transition: 'color 180ms ease',
            }}
            onMouseEnter={e => e.currentTarget.style.color = '#fff'}
            onMouseLeave={e => e.currentTarget.style.color = 'rgba(255,255,255,0.78)'}
            >{l.label}</a>
          ))}
          <Button size="sm" onClick={onCTA}>Schedule Demo</Button>
        </div>

        {/* Hamburger (hidden >900px via CSS) */}
        <button data-mf="nav-hamburger" onClick={() => setMenuOpen(true)} aria-label="Open menu"
          style={{
            display: 'none', alignItems: 'center', justifyContent: 'center',
            width: 44, height: 44, borderRadius: 12,
            background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.14)',
            cursor: 'pointer', padding: 0,
          }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
            <span style={{ width: 20, height: 2, background: '#fff', borderRadius: 2 }}/>
            <span style={{ width: 20, height: 2, background: '#fff', borderRadius: 2 }}/>
            <span style={{ width: 20, height: 2, background: '#fff', borderRadius: 2 }}/>
          </div>
        </button>
      </nav>

      {/* Mobile drawer */}
      <div data-mf="nav-drawer-backdrop" className={menuOpen ? 'open' : ''} onClick={() => setMenuOpen(false)}/>
      <div data-mf="nav-drawer" className={menuOpen ? 'open' : ''}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>
          <div style={{
            fontFamily: 'Poppins', fontWeight: 800, fontSize: 12,
            letterSpacing: '0.16em', color: '#E8123C',
          }}>MENU</div>
          <button onClick={() => setMenuOpen(false)} aria-label="Close menu" style={{
            width: 34, height: 34, borderRadius: '50%',
            background: 'rgba(255,255,255,0.08)', border: '1px solid rgba(255,255,255,0.14)',
            color: '#fff', fontSize: 18, cursor: 'pointer', lineHeight: 1,
          }}>×</button>
        </div>
        {links.map(l => (
          <a key={l.label} href={l.href}
            target={l.external ? '_blank' : undefined}
            rel={l.external ? 'noopener noreferrer' : undefined}
            onClick={() => setMenuOpen(false)} style={{
            display: 'block', padding: '14px 4px',
            fontFamily: 'Poppins', fontWeight: 600, fontSize: 18,
            color: '#fff', textDecoration: 'none',
            borderBottom: '1px solid rgba(255,255,255,0.06)',
          }}>{l.label}</a>
        ))}
        <div style={{ marginTop: 24 }}>
          <Button size="lg" onClick={() => { setMenuOpen(false); onCTA(); }}>Schedule Demo</Button>
        </div>
      </div>
    </>
  );
}
window.NavBar = NavBar;