const { Button, Icon, IconButton, Wordmark } = window.HaileyAlexanderRealtorDesignSystem_1e3b8f;
function Nav({route,go}){
  const [open,setOpen]=React.useState(false);
  const items=[['listings','Listings',['listing']],['communities','Communities',['community']],['buyers','Buyers'],['sellers','Sellers'],['about','About',['testimonials']]];
  const active=(k,alts=[])=>route===k||alts.includes(route);
  const nav=(k)=>{setOpen(false);go(k)};
  React.useEffect(()=>{document.body.style.overflow=open?'hidden':'';return()=>{document.body.style.overflow=''}},[open]);
  return <>
    <header style={{position:'sticky',top:0,zIndex:50,background:'rgba(250,247,242,.85)',backdropFilter:'var(--blur-glass)',WebkitBackdropFilter:'var(--blur-glass)',borderBottom:'1px solid var(--border-subtle)'}}>
    <div className="wrap" style={{height:72,display:'flex',alignItems:'center',justifyContent:'space-between',gap:24}}>
      <a href="#/home" onClick={e=>{e.preventDefault();nav('home')}} className="navwm" style={{display:'flex',alignItems:'center',textDecoration:'none',color:'var(--text-primary)'}}><Wordmark size="sm"/></a>
      <nav className="desk" style={{display:'flex',gap:28}}>{items.map(([k,l,a])=><a key={k} href={'#/'+k} onClick={e=>{e.preventDefault();nav(k)}} style={{fontSize:15,fontWeight:600,color:active(k,a)?'var(--rasp-600)':'var(--text-primary)',textDecoration:'none',paddingBottom:2,borderBottom:'2px solid '+(active(k,a)?'var(--rasp-500)':'transparent')}}>{l}</a>)}</nav>
      <div className="desk" style={{display:'flex',gap:12,alignItems:'center'}}><a href="tel:9034569021" style={{fontSize:14,fontWeight:600,color:'var(--text-primary)',display:'inline-flex',alignItems:'center',gap:6}}><Icon name="phone" size={16}/>(903) 456-9021</a><Button size="sm" onClick={()=>nav('contact')}>Let's talk</Button></div>
      <div className="mob" style={{gap:8,alignItems:'center'}}><IconButton label="Call" variant="ghost" onClick={()=>location.href='tel:9034569021'}><Icon name="phone" size={20}/></IconButton><IconButton label={open?'Close menu':'Menu'} variant="ghost" onClick={()=>setOpen(o=>!o)}><Icon name={open?'x':'menu'} size={22}/></IconButton></div>
    </div>
    </header>
    {open&&<div style={{position:'fixed',inset:'72px 0 0 0',background:'var(--paper)',zIndex:49,padding:'24px 24px 40px',display:'flex',flexDirection:'column',gap:4,overflowY:'auto'}}>
      {[['home','Home'],...items.map(([k,l])=>[k,l]),['testimonials','Kind words'],['contact','Contact']].map(([k,l])=><a key={k} href={'#/'+k} onClick={e=>{e.preventDefault();nav(k)}} className="display" style={{fontSize:36,padding:'12px 0',borderBottom:'1px solid var(--border-subtle)',color:active(k)?'var(--rasp-600)':'var(--text-primary)',textDecoration:'none'}}>{l}</a>)}
      <div style={{marginTop:'auto',paddingTop:32,display:'grid',gap:12}}><Button size="lg" fullWidth onClick={()=>nav('contact')}>Let's talk</Button><a href="tel:9034569021" style={{textAlign:'center',fontWeight:600,color:'var(--text-primary)'}}>(903) 456-9021</a></div>
    </div>}
  </>;
}
window.Nav=Nav;