/* Nav.jsx — sticky translucent top navigation */
const { useState: navUseState, useEffect: navUseEffect, createElement: nh } = React;

function Nav({ current, go }) {
  const { Logo, Container, GradientButton, Icon } = window;
  const [scrolled, setScrolled] = navUseState(false);
  navUseEffect(() => {
    const sc = () => setScrolled(window.scrollY > 12);
    sc(); window.addEventListener('scroll', sc, { passive: true });
    return () => window.removeEventListener('scroll', sc);
  }, []);

  const links = [
    { id: 'about', label: 'About' },
    { id: 'why', label: 'Why Yottasecure' },
    { id: 'rsac', label: 'RSAC 2026' },
    { id: 'contact', label: 'Contact' },
  ];

  return nh('header', {
    style: {
      position: 'sticky', top: 0, zIndex: 50,
      background: scrolled ? 'rgba(9,13,20,.72)' : 'transparent',
      backdropFilter: scrolled ? 'blur(14px) saturate(140%)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(14px) saturate(140%)' : 'none',
      borderBottom: scrolled ? '1px solid var(--border-1)' : '1px solid transparent',
      transition: 'background var(--dur), border-color var(--dur), backdrop-filter var(--dur)'
    }
  },
    nh(Container, null,
      nh('div', { style: { height: 76, display: 'flex', alignItems: 'center', justifyContent: 'space-between' } },
        nh(Logo, { height: 30, onClick: () => go('home') }),
        nh('nav', { style: { display: 'flex', alignItems: 'center', gap: 4 } },
          links.map(l => nh('button', {
            key: l.id, onClick: () => go(l.id), className: 'ys-navlink',
            style: {
              background: 'none', border: 'none', cursor: 'pointer', padding: '8px 14px',
              fontFamily: 'var(--font-display)', fontSize: 14.5, fontWeight: 500, letterSpacing: '-.01em',
              color: current === l.id ? 'var(--fg-1)' : 'var(--fg-2)', transition: 'color var(--dur)', position: 'relative', whiteSpace: 'nowrap'
            }
          },
            l.label,
            current === l.id && nh('span', { style: { position: 'absolute', left: 14, right: 14, bottom: 2, height: 1.5, background: 'var(--brand-gradient)', borderRadius: 2 } })
          ))
        ),
        nh('div', { style: { display: 'flex', alignItems: 'center', gap: 18 } },
          nh(GradientButton, { onClick: () => go('contact'), icon: 'arrow-right' }, 'Book a demo')
        )
      )
    )
  );
}
Object.assign(window, { Nav });