// Sticky nav with section anchors + persistent Apply CTA
const Nav = () => {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const links = [
    ['Curriculum', '#curriculum'],
    ['Who fits', '#who-fits'],
    ['Why a cohort', '#lab-vs-cohort'],
    ['Pricing', '#enrolment'],
    ['FAQ', '#faq'],
  ];

  return (
    <nav style={{
      position:'sticky', top:0, zIndex:50,
      background: scrolled ? 'rgba(255,255,255,0.92)' : '#FFFFFF',
      backdropFilter: scrolled ? 'saturate(140%) blur(10px)' : 'none',
      borderBottom: scrolled ? '1px solid #DCE4EC' : '1px solid transparent',
      transition: 'all 200ms cubic-bezier(0.2,0.8,0.2,1)',
    }}>
      <div className="container nav-row" style={{
        display:'flex', alignItems:'center', justifyContent:'space-between',
        height:72, gap:16,
      }}>
        <a href="#top" style={{display:'flex', alignItems:'center', gap:12, minWidth:0}}>
          <img src="assets/ai-literacy-lab-logo.png"
               style={{height:36, width:36, borderRadius:8, objectFit:'cover', flexShrink:0}}/>
          <div className="nav-brand" style={{display:'flex', flexDirection:'column', lineHeight:1.05, minWidth:0}}>
            <span className="nav-brand-title" style={{fontFamily:'"Space Grotesk"', fontSize:15, fontWeight:700, color:'#0E1B2E', whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis'}}>
              The Practitioner Cohort
            </span>
            <span className="nav-brand-sub" style={{fontFamily:'Rubik', fontSize:10, fontWeight:600, color:'#2E5C8A',
                          textTransform:'uppercase', letterSpacing:1, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis'}}>
              Gnosis Academy · AI Literacy for Educators
            </span>
          </div>
        </a>

        <div style={{display:'flex', alignItems:'center', gap:24}}>
          <div style={{display:'flex', gap:24}} className="nav-links">
            {links.map(([l, h]) => (
              <a key={l} href={h}
                 style={{color:'#3F5670', fontSize:14, fontWeight:500,
                         transition:'color 160ms'}}
                 onMouseEnter={e => e.currentTarget.style.color='#0E1B2E'}
                 onMouseLeave={e => e.currentTarget.style.color='#3F5670'}>
                {l}
              </a>
            ))}
          </div>
          <a className="nav-apply" href="https://form.jotform.com/261244735080049" target="_blank" rel="noopener noreferrer" style={{
            background:'#2E5C8A', color:'#FFFFFF',
            fontSize:13, fontWeight:700, textTransform:'uppercase', letterSpacing:0.6,
            padding:'12px 18px', borderRadius:13,
            display:'inline-flex', alignItems:'center', gap:8,
            transition:'transform 160ms, background 160ms', whiteSpace:'nowrap',
          }}
          onMouseEnter={e => { e.currentTarget.style.background='#234A70'; }}
          onMouseLeave={e => { e.currentTarget.style.background='#2E5C8A'; }}>
            Apply <i data-lucide="arrow-right" style={{width:14, height:14}}></i>
          </a>
        </div>
      </div>

      <style>{`
        @media (max-width: 880px) {
          .nav-links { display: none !important; }
        }
        @media (max-width: 520px) {
          .nav-brand-sub { display: none !important; }
        }
        @media (max-width: 380px) {
          .nav-brand { display: none !important; }
        }
      `}</style>
    </nav>
  );
};
window.Nav = Nav;