function Nav(){
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(()=>{
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener('scroll', onScroll, {passive:true});
    return ()=>window.removeEventListener('scroll', onScroll);
  },[]);
  const links = [
    ['About', '#about'],
    ['Opportunities', '#objectives'],
    ['Agenda', '#agenda'],
    ['Sponsorship', '#sponsorship'],
    ['Venue', '#venue'],
  ];
  return (
    <nav style={{
      position:'fixed', top:0, left:0, right:0, zIndex:50,
      background: scrolled ? 'rgba(248,244,236,.86)' : 'transparent',
      backdropFilter: scrolled ? 'blur(20px) saturate(140%)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(20px) saturate(140%)' : 'none',
      borderBottom: scrolled ? '1px solid var(--rule)' : '1px solid transparent',
      transition:'all .25s ease',
    }}>
      <div className="shell" style={{
        display:'flex', alignItems:'center', justifyContent:'space-between',
        height:72,
      }}>
        <a href="#top" style={{display:'flex',alignItems:'center',gap:12}}>
          <div style={{
            width:42, height:42, borderRadius:'50%',
            background:'var(--ink)', display:'flex', alignItems:'center', justifyContent:'center',
            padding:4, overflow:'hidden',
          }}>
            <img src="assets/auras-logo.png" alt="AURAS" style={{width:'180%', maxWidth:'none', objectFit:'contain'}}/>
          </div>
          <div style={{display:'flex',flexDirection:'column',lineHeight:1}}>
            <span style={{fontFamily:'var(--serif)',fontSize:20,fontWeight:500,letterSpacing:'-.01em'}}>AURAS</span>
            <span className="kicker" style={{marginTop:3,fontSize:9}}>SUMMIT · 2027</span>
          </div>
        </a>
        <div style={{display:'flex',gap:28,alignItems:'center'}} className="nav-links">
          {links.map(([l,h])=>(
            <a key={h} href={h} style={{fontSize:13.5,color:'var(--ink-2)',position:'relative'}}
               onMouseEnter={e=>e.currentTarget.style.color='var(--ember)'}
               onMouseLeave={e=>e.currentTarget.style.color='var(--ink-2)'}>
              {l}
            </a>
          ))}
        </div>
        <a href="#register" className="btn" style={{height:40,padding:'0 18px',fontSize:13}}>
          Register <span className="arrow">→</span>
        </a>
      </div>
      <style>{`
        @media (max-width:900px){
          .nav-links{display:none}
        }
      `}</style>
    </nav>
  );
}

function Mark(){
  // Original geometric mark — stacked angled lines forming an "A" delta.
  // Not a recreation of any existing AURAS branding.
  return (
    <svg width="34" height="34" viewBox="0 0 34 34" aria-label="AURAS mark">
      <rect x="0.5" y="0.5" width="33" height="33" fill="none" stroke="var(--ink)" strokeWidth="1"/>
      <path d="M6 26 L17 8 L28 26" fill="none" stroke="var(--ink)" strokeWidth="1.5"/>
      <path d="M11 22 L17 13 L23 22" fill="none" stroke="var(--ember)" strokeWidth="1.5"/>
      <circle cx="17" cy="26" r="1.6" fill="var(--ember)"/>
    </svg>
  );
}

window.Nav = Nav;
window.Mark = Mark;
