/* Sticky nav with blurred background */

function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  const [buildLit, setBuildLit] = React.useState(false);
  const [mainnetHover, setMainnetHover] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', onScroll, {passive: true});
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  React.useEffect(() => {
    const el = document.getElementById('runtime');
    if (!el) return;
    const obs = new IntersectionObserver(
      ([entry]) => { if (entry.isIntersecting) { setBuildLit(true); obs.disconnect(); } },
      { threshold: 0.1 }
    );
    obs.observe(el);
    return () => obs.disconnect();
  }, []);

  return (
    <nav style={{
      position:'fixed', top:0, left:0, right:0, zIndex:50,
      height:80,
      background: scrolled ? 'rgba(0,0,0,0.72)' : 'transparent',
      backdropFilter: scrolled ? 'blur(14px) saturate(140%)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(14px) saturate(140%)' : 'none',
      borderBottom: scrolled ? '1px solid var(--line-1)' : '1px solid transparent',
      transition:'background 160ms var(--ease-out), border-color 160ms var(--ease-out)',
    }}>
      <div className="container" style={{
        height:'100%', display:'flex', alignItems:'center', justifyContent:'space-between',
      }}>
        <div style={{display:'flex', alignItems:'center', gap:16}}>
          <Mark size={55} negative={true}/>
          <span style={{
            fontFamily:'var(--font-mono)', fontSize:'22px', fontWeight:500, color:'var(--fg-0)',
            letterSpacing:'-0.01em',
          }}>usufruct v1</span>
          <a href="https://suiscan.xyz/testnet/object/0x61723e7205f9841ebb4e6f73096f34840a78bcfae73f631d44370e75f1acc0f5/tx-blocks" target="_blank" rel="noopener noreferrer" style={{
            fontFamily:'var(--font-mono)', fontSize:'14px', color:'var(--fg-2)',
            letterSpacing:'0.14em', textTransform:'uppercase',
            border:'1px solid var(--line-1)', padding:'10px 14px', marginLeft:8,
            display:'inline-flex', alignItems:'center', gap:9, whiteSpace:'nowrap', lineHeight:1,
            textDecoration:'none',
          }}>
            <span style={{
              display:'inline-block', width:10, height:10, borderRadius:'50%',
              background:'var(--good)', boxShadow:'0 0 10px var(--good)', flexShrink:0,
            }}/>
            <span>testnet</span>
          </a>
          <span style={{position:'relative'}}
            onMouseEnter={() => setMainnetHover(true)}
            onMouseLeave={() => setMainnetHover(false)}
          >
            <span style={{
              fontFamily:'var(--font-mono)', fontSize:'14px', color:'var(--fg-2)',
              letterSpacing:'0.14em', textTransform:'uppercase',
              border:'1px solid var(--line-1)', padding:'10px 14px',
              display:'inline-flex', alignItems:'center', gap:9, whiteSpace:'nowrap', lineHeight:1,
              cursor:'default',
            }}>
              <span style={{
                display:'inline-block', width:10, height:10, borderRadius:'50%',
                background:'var(--warn)', boxShadow:'0 0 10px var(--warn)', flexShrink:0,
              }}/>
              <span>mainnet</span>
            </span>
            {mainnetHover && (
              <span style={{
                position:'absolute', top:'calc(100% + 8px)', left:'50%',
                transform:'translateX(-50%)',
                background:'var(--bg-2)', border:'1px solid var(--line-1)',
                padding:'6px 10px', whiteSpace:'nowrap',
                fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'0.14em',
                color:'var(--fg-2)', textTransform:'uppercase', pointerEvents:'none',
              }}>
                mainnet deploy · soon
              </span>
            )}
          </span>
        </div>
        <div style={{display:'flex', alignItems:'center', gap:24}}>
          <a href="https://sdk.usufruct.io" target="_blank" rel="noopener noreferrer" style={{
            display:'inline-flex', alignItems:'center', gap:8,
            padding:'12px 20px', background:'var(--signal)', color:'var(--signal-fg)',
            textDecoration:'none', fontFamily:'var(--font-mono)', fontSize:14, fontWeight:600,
            letterSpacing:'0.08em', textTransform:'uppercase', whiteSpace:'nowrap', lineHeight:1,
            animation: buildLit ? 'navCtaBreath 1.6s ease-in-out infinite' : 'none',
            transition: buildLit ? 'none' : 'box-shadow 400ms var(--ease-out)',
          }}>
            <span>Build</span>
            <span style={{fontSize:16, lineHeight:1, fontWeight:400}}>↗</span>
          </a>
          <MonoLink href="https://discord.gg/aQpBtnE6v" target="_blank" rel="noopener noreferrer" style={{display:'inline-flex', alignItems:'center', gap:0, padding:'4px 4px'}}>
            <DiscordMark size={35}/>
          </MonoLink>
          <MonoLink href="https://github.com/0xkurious/usufruct-protocol-v1" target="_blank" rel="noopener noreferrer" style={{display:'inline-flex', alignItems:'center', gap:0, padding:'4px 4px'}}>
            <GitHubMark size={35}/>
          </MonoLink>
        </div>
      </div>
    </nav>
  );
}

window.Nav = Nav;