function navcls(id,active){return 'nav-link'+(active===id?' active':'');}
function SiteNav({active}){
const [open,setOpen]=React.useState(false);
React.useEffect(()=>{window.lucide&&window.lucide.createIcons();});
return (<React.Fragment>
<header style={{background:'#fff',borderBottom:'1px solid var(--hairline)',position:'sticky',top:0,zIndex:50}}>
<div style={{maxWidth:'var(--max-content-width)',margin:'0 auto',display:'flex',alignItems:'center',justifyContent:'space-between',padding:'12px 24px'}}>
<a href="index.html" style={{display:'flex',alignItems:'center',gap:10,textDecoration:'none'}}>
<img src="assets/logo-mark.png" alt="Ally Institute of Education logo" style={{height:38}}/>
<span style={{fontFamily:'var(--font-display)',fontWeight:800,color:'var(--navy-900)',fontSize:13,lineHeight:1.2}}>ALLY INSTITUTE<br/>OF EDUCATION</span>
</a>
<nav className="desktop-nav" style={{display:'flex',gap:26,alignItems:'center'}}>
<a href="index.html" className={navcls('home',active)}>Home</a>
<a href="about.html" className={navcls('about',active)}>About</a>
<a href="services.html" className={navcls('services',active)}>Services</a>
<a href="contact.html" className={navcls('contact',active)}>Contact</a>
</nav>
<div style={{display:'flex',alignItems:'center',gap:14}}>
<a href="tel:9814161376" className="desktop-nav" style={{display:'flex',alignItems:'center',gap:8,fontWeight:700,color:'var(--navy-900)',textDecoration:'none',fontSize:14}}><i data-lucide="phone" style={{width:16,height:16}}></i>98141-61376</a>
<button className="mobile-menu-btn" onClick={()=>setOpen(true)}><i data-lucide="menu" style={{width:24,height:24,color:'var(--navy-900)'}}></i></button>
</div>
</div>
</header>
{open&&<div className="mobile-panel" style={{position:'fixed',inset:0,background:'#fff',zIndex:100,overflowY:'auto'}}>
<div style={{display:'flex',justifyContent:'space-between',alignItems:'center',padding:'14px 20px',borderBottom:'1px solid var(--hairline)'}}>
<span style={{fontFamily:'var(--font-display)',fontWeight:800,color:'var(--navy-900)'}}>Menu</span>
<button onClick={()=>setOpen(false)} style={{background:'none',border:'none',cursor:'pointer'}}><i data-lucide="x" style={{width:24,height:24}}></i></button>
</div>
<a href="index.html">Home</a><a href="about.html">About</a><a href="services.html">Services</a><a href="contact.html">Contact</a>
<a href="tel:9814161376" style={{color:'var(--navy-900)'}}>Call 98141-61376</a>
</div>}
</React.Fragment>);
}
window.SiteNav=SiteNav;