/* Glassmorphism nav — items: Serviços / Casos / Contato */
function Nav(){
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(()=>{
    const onScroll = ()=> setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onScroll, {passive:true});
    onScroll();
    return ()=> window.removeEventListener('scroll', onScroll);
  },[]);

  const items = [
    {label:'Serviços', href:'#servicos'},
    {label:'Casos', href:'#casos'},
    {label:'Contato', href:'#contato'},
  ];

  return (
    <nav
      style={{
        position:'fixed', top:16, left:16, right:16, zIndex:40,
        padding:'14px 22px',
        borderRadius:18,
        background: scrolled ? 'rgba(14,41,96,.55)' : 'rgba(14,41,96,.25)',
        backdropFilter:'blur(20px) saturate(140%)',
        WebkitBackdropFilter:'blur(20px) saturate(140%)',
        border:'1px solid rgba(245,235,211,.12)',
        display:'flex', alignItems:'center', justifyContent:'space-between',
        boxShadow: scrolled ? '0 20px 60px rgba(0,0,0,.25)' : 'none',
        transition:'background .4s, box-shadow .4s'
      }}
    >
      <div key="brand-wrap" style={{display:'flex', alignItems:'center', gap:10, cursor:'pointer'}}>
        <div
          style={{
            width:28,height:28,border:'1.5px solid #C7FF50',borderRadius:'50%',
            position:'relative',
            display:'flex',alignItems:'center',justifyContent:'center',
            animation:'navspin 18s linear infinite'
          }}
        >
          <div style={{width:6,height:6,background:'#C7FF50',borderRadius:'50%'}}></div>
          <div style={{position:'absolute',inset:-4,border:'1px dashed rgba(199,255,80,.4)',borderRadius:'50%'}}></div>
        </div>
        <div key="brand" className="bebas" style={{fontSize:22, letterSpacing:'.05em', color:'#F5EBD3'}}>
          DIGITAL <span style={{color:'#C7FF50'}}>YK·FB</span>
        </div>
      </div>

      <div style={{display:'flex', alignItems:'center', gap:6}}>
        {items.map((it,i)=>(
          <a
            key={it.label}
            href={it.href}
            className="mono"
            style={{
              padding:'8px 14px', fontSize:12, letterSpacing:'.18em',
              textTransform:'uppercase', color:'#F5EBD3',
              textDecoration:'none', borderRadius:10,
              transition:'color .2s'
            }}
            onMouseEnter={(e)=>e.currentTarget.style.color='#C7FF50'}
            onMouseLeave={(e)=>e.currentTarget.style.color='#F5EBD3'}
          >
            {it.label}
          </a>
        ))}

        <a
          href="#contato"
          className="mono"
          style={{
            marginLeft:14, padding:'10px 18px',
            background:'#C7FF50', color:'#0A1A3D',
            fontSize:12, fontWeight:500,
            letterSpacing:'.12em', textTransform:'uppercase',
            borderRadius:12, textDecoration:'none',
            display:'inline-flex', alignItems:'center', gap:8,
            transition:'box-shadow .3s, transform .2s'
          }}
          onMouseEnter={(e)=>{e.currentTarget.style.boxShadow='0 0 40px rgba(199,255,80,.5)'; e.currentTarget.style.transform='scale(1.04)';}}
          onMouseLeave={(e)=>{e.currentTarget.style.boxShadow='none'; e.currentTarget.style.transform='scale(1)';}}
        >
          Abrir caso <span>→</span>
        </a>
      </div>
    </nav>
  );
}