function DownloadIcon(){
return (<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3v12"></path><path d="M7 10l5 5 5-5"></path><path d="M4 21h16"></path></svg>);
}
function MenuIcon({open}){
return (<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d={open?"M6 6l12 12M18 6L6 18":"M4 7h16M4 12h16M4 17h16"}></path></svg>);
}
function ChevronIcon({open}){
return (<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{transform:open?'rotate(180deg)':'none',transition:'transform .15s ease-out'}}><path d="M6 9l6 6 6-6"></path></svg>);
}
function Nav({page,setPage}){
const isMobile=window.useIsMobile();
const items=[['home','Home'],['about','About'],['products','Products'],['manufacturing','Manufacturing'],['contact','Contact']];
const resources=[['Brochure','assets/polychem-brochure.pdf'],['Others','']];
const [open,setOpen]=React.useState(false);
const [menuOpen,setMenuOpen]=React.useState(false);
const [resOpen,setResOpen]=React.useState(false);
const go=(k)=>{setPage(k);setMenuOpen(false);};
return (
<div>
<div style={{position:'sticky',top:0,zIndex:10,background:'#fff',borderBottom:'1px solid var(--border-subtle)'}}>
<div style={{maxWidth:'var(--container-max)',margin:'0 auto',padding:isMobile?'12px 20px':'18px 32px',display:'flex',alignItems:'center',justifyContent:'space-between'}}>
<div onClick={()=>go('home')} style={{cursor:'pointer',display:'flex',alignItems:'center',gap:8,flexShrink:0}}><img src="assets/logo.png" alt="Polychem" style={{height:isMobile?56:72,width:isMobile?56:72}} /><span style={{fontFamily:'var(--font-display)',fontWeight:800,fontSize:isMobile?18:20,color:'var(--text-primary)',lineHeight:1.15,whiteSpace:'nowrap'}}>Polychem &amp;<br/>Allied products</span></div>
{!isMobile&&(<div style={{display:'flex',gap:20,fontFamily:'var(--font-body)',fontWeight:500,fontSize:14,flex:1,justifyContent:'center'}}>
{items.map(([k,label])=>(
<div key={k} onClick={()=>setPage(k)} style={{cursor:'pointer',color:page===k?'var(--accent-primary)':'var(--text-primary)',paddingBottom:4,borderBottom:page===k?'2px solid var(--accent-primary)':'2px solid transparent',transition:'color .15s ease-out'}}>{label}</div>
))}
</div>)}
{!isMobile&&(<div style={{position:'relative',flexShrink:0}} onMouseEnter={()=>setOpen(true)} onMouseLeave={()=>setOpen(false)}>
<div onClick={()=>setOpen(o=>!o)} style={{cursor:'pointer',display:'flex',alignItems:'center',gap:6,fontFamily:'var(--font-body)',fontWeight:600,fontSize:14,color:'#fff',background:'var(--accent-primary)',borderRadius:'var(--radius-pill)',padding:'9px 20px'}}>
Resources
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{transform:open?'rotate(180deg)':'none',transition:'transform .15s ease-out'}}><path d="M6 9l6 6 6-6"></path></svg>
</div>
{open&&(<div style={{position:'absolute',top:'100%',right:0,background:'#fff',border:'1px solid var(--border-subtle)',borderRadius:'var(--radius-lg)',boxShadow:'var(--shadow-md)',minWidth:280,padding:8,zIndex:20}}>
{resources.map(([label,href])=>(
<div key={label} style={{display:'flex',alignItems:'center',justifyContent:'space-between',gap:16,padding:'10px 12px',borderRadius:'var(--radius-md)'}}>
<span style={{fontFamily:'var(--font-body)',fontSize:14,color:href?'var(--text-primary)':'var(--text-tertiary)'}}>{label}</span>
{href&&<a href={href} download style={{display:'flex',alignItems:'center',gap:6,color:'var(--accent-primary)',fontFamily:'var(--font-body)',fontWeight:600,fontSize:13,textDecoration:'none',border:'1px solid var(--border-subtle)',borderRadius:'var(--radius-pill)',padding:'5px 12px'}}><DownloadIcon/>Download</a>}
</div>
))}
</div>)}
</div>)}
{isMobile&&(<div onClick={()=>setMenuOpen(o=>!o)} style={{cursor:'pointer',color:'var(--text-primary)',padding:8}}><MenuIcon open={menuOpen}/></div>)}
</div>
{isMobile&&menuOpen&&(<div style={{borderTop:'1px solid var(--border-subtle)',padding:'12px 20px 20px',display:'flex',flexDirection:'column',gap:4}}>
{items.map(([k,label])=>(
<div key={k} onClick={()=>go(k)} style={{cursor:'pointer',padding:'12px 4px',fontFamily:'var(--font-body)',fontWeight:600,fontSize:16,color:page===k?'var(--accent-primary)':'var(--text-primary)',borderBottom:'1px solid var(--border-subtle)'}}>{label}</div>
))}
<div style={{marginTop:12,display:'flex',alignItems:'center',justifyContent:'space-between',cursor:'pointer',padding:'4px 0'}} onClick={()=>setResOpen(o=>!o)}>
<span style={{fontFamily:'var(--font-body)',fontWeight:700,fontSize:13,color:'var(--text-tertiary)',textTransform:'uppercase',letterSpacing:'.05em'}}>Resources</span>
<ChevronIcon open={resOpen}/>
</div>
{resOpen&&resources.map(([label,href])=>(
<div key={label} style={{display:'flex',alignItems:'center',justifyContent:'space-between',gap:16,padding:'10px 4px'}}>
<span style={{fontFamily:'var(--font-body)',fontSize:14,color:href?'var(--text-primary)':'var(--text-tertiary)'}}>{label}</span>
{href&&<a href={href} download style={{display:'flex',alignItems:'center',gap:6,color:'var(--accent-primary)',fontFamily:'var(--font-body)',fontWeight:600,fontSize:13,textDecoration:'none',border:'1px solid var(--border-subtle)',borderRadius:'var(--radius-pill)',padding:'5px 12px'}}><DownloadIcon/>Download</a>}
</div>
))}
</div>)}
</div>
</div>
);
}
window.Nav=Nav;