// Top navigation
const Nav = ({ page, setPage }) => {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener('scroll', onScroll);
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const NAV = [
    { id:'work', label:'Work' },
    { id:'services', label:'Services' },
    { id:'process', label:'Process' },
    { id:'team', label:'Team' },
    { id:'tools', label:'Tools' },
    { id:'blog', label:'Journal' },
    { id:'plan', label:'Roadmap' },
  ];

  const go = (id) => {
    if (['plan','case','services','process','work','blog','tools','pricing'].includes(id)) {
      setPage(id); window.scrollTo({top:0}); return;
    }
    setPage('home');
    setTimeout(() => {
      const el = document.getElementById(id);
      if (el) el.scrollIntoView({behavior:'smooth', block:'start'});
    }, 60);
  };

  return (
    <nav style={{
      position:'sticky', top:0, zIndex:50,
      background: scrolled ? 'rgba(10,10,10,0.72)' : 'transparent',
      backdropFilter: scrolled ? 'blur(18px) saturate(160%)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(18px) saturate(160%)' : 'none',
      borderBottom: scrolled ? '1px solid var(--line)' : '1px solid transparent',
      transition:'all .3s ease'
    }}>
      <div className="container" style={{display:'flex',alignItems:'center',justifyContent:'space-between',height:68}}>
        <button onClick={()=>{setPage('home');window.scrollTo({top:0,behavior:'smooth'})}} style={{display:'flex',alignItems:'center',gap:10}}>
          <span style={{display:'inline-flex',alignItems:'center',justifyContent:'center',width:28,height:28,border:'1px solid var(--line-2)',borderRadius:8,color:'var(--accent)'}}>
            {Icon.atom()}
          </span>
          <span style={{fontWeight:600,letterSpacing:'-0.01em',fontSize:15}}>SolidAtoms</span>
          <span className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.06em',padding:'2px 6px',border:'1px solid var(--line)',borderRadius:4,marginLeft:6}}>STUDIO</span>
        </button>

        <div style={{display:'flex',alignItems:'center',gap:4}}>
          {NAV.map(n => {
            const active = (page === 'home' && n.id !== 'plan' && n.id !== 'case') ? false : page === n.id;
            return (
              <button key={n.id} onClick={()=>go(n.id)} style={{
                padding:'8px 12px', borderRadius:8, fontSize:13,
                color: active ? 'var(--ink)' : 'var(--ink-2)',
                background: active ? 'rgba(255,255,255,0.04)' : 'transparent',
                transition:'all .15s ease', letterSpacing:'-0.005em'
              }}
              onMouseEnter={(e)=>e.currentTarget.style.color='var(--ink)'}
              onMouseLeave={(e)=>e.currentTarget.style.color = active ? 'var(--ink)' : 'var(--ink-2)'}>
                {n.label}
              </button>
            );
          })}
        </div>

        <div style={{display:'flex',alignItems:'center',gap:10}}>
          <span className="mono" style={{fontSize:11,color:'var(--ink-3)',display:'flex',alignItems:'center',gap:6}}>
            <span style={{width:6,height:6,borderRadius:'50%',background:'var(--ok)',boxShadow:'0 0 0 3px rgba(126,231,135,0.18)'}}/>
            Taking work · Jun
          </span>
          <button onClick={()=>go('contact')} className="btn btn-primary" style={{padding:'9px 14px',fontSize:13}}>
            Start a project {Icon.arrow()}
          </button>
        </div>
      </div>
    </nav>
  );
};

window.Nav = Nav;