// Sticky top navigation — terminal chrome.

function Nav({ current }) {
  const [open, setOpen] = React.useState(false);
  const [scrolled, setScrolled] = React.useState(false);

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

  // On the homepage, "How it works" is a same-page anchor so scroll.js can
  // ease in place. From other pages it has to be a cross-page hash so the
  // on-load handler in scroll.js can pick it up after navigation.
  const howItWorksHref = current === 'home' ? '#mint' : 'index.html#mint';

  const links = [
    { label: 'How it works', href: howItWorksHref,      match: 'how', anchor: 'mint' },
    { label: 'Market',       href: 'https://coinmarketcap.com/currencies/xrp/', external: true },
    { label: 'About',        href: 'about.html',        match: 'about' },
    { label: 'XRMZ',         href: SP_LINKS.xrmzToken,  external: true },
  ];

  // Smooth-scroll handled globally by scroll.js — Nav links pass through.
  function onAnchorClick() { /* no-op */ }

  return (
    <nav style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: scrolled ? 'rgba(0,0,0,0.85)' : SP_COL.black,
      backdropFilter: scrolled ? 'saturate(140%) blur(6px)' : 'none',
      borderBottom: `1px solid ${scrolled ? SP_COL.grayDark : 'transparent'}`,
      transition: 'background 200ms ease, border-color 200ms ease',
    }} data-screen-label="00 Nav">
      <div style={{
        maxWidth: 1152, margin: '0 auto',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '14px 32px', gap: 16,
      }} className="sp-nav-row">
        {/* Brand mark */}
        <a href="index.html" style={{
          display: 'flex', alignItems: 'center', gap: 10,
          textDecoration: 'none', color: SP_COL.white,
          fontFamily: SP_MONO_W, fontSize: 13, fontWeight: 600,
          letterSpacing: '0.35em', textTransform: 'uppercase',
        }}>
          <img src="sciphr-logo.png" alt="" width="22" height="22"
               style={{ display: 'block', filter: 'grayscale(1) brightness(1.6)' }} />
          <span>SciPHR</span>
        </a>

        {/* Desktop links */}
        <div className="sp-nav-links" style={{
          display: 'flex', alignItems: 'center', gap: 26,
        }}>
          {links.map(l => (
            <NavLink key={l.label} {...l}
                     active={current === l.match}
                     onClick={e => onAnchorClick(e, l.anchor)} />
          ))}
        </div>

        {/* Desktop CTA */}
        <div className="sp-nav-cta">
          <CommandButton label="Join TestFlight" href={SP_LINKS.testflight} variant="solid" />
        </div>

        {/* Mobile toggle */}
        <button
          className="sp-nav-toggle"
          onClick={() => setOpen(v => !v)}
          aria-label="Toggle menu"
          style={{
            display: 'none',
            background: 'transparent', color: SP_COL.white,
            border: `1px solid ${SP_COL.grayDark}`, borderRadius: 4,
            fontFamily: SP_MONO_W, fontSize: 11, letterSpacing: '0.25em',
            textTransform: 'uppercase', padding: '8px 12px', cursor: 'pointer',
          }}>{open ? '[ x ]' : '[ menu ]'}</button>
      </div>

      {/* Mobile drawer */}
      {open ? (
        <div className="sp-nav-drawer" style={{
          display: 'none', borderTop: `1px solid ${SP_COL.grayDark}`,
          padding: '12px 32px 18px', flexDirection: 'column', gap: 10,
          background: SP_COL.black,
        }}>
          {links.map(l => (
            <a key={l.label} href={l.href}
               onClick={e => { onAnchorClick(e, l.anchor); setOpen(false); }}
               target={l.external ? '_blank' : undefined}
               rel={l.external ? 'noopener noreferrer' : undefined}
               style={{
                 fontFamily: SP_MONO_W, fontSize: 12, letterSpacing: '0.3em',
                 textTransform: 'uppercase', color: SP_COL.grayLight,
                 textDecoration: 'none', padding: '8px 0',
                 borderBottom: `1px dashed rgba(128,128,128,0.4)`,
               }}>&gt; {l.label}{l.external ? ' ↗' : ''}</a>
          ))}
          <div style={{ paddingTop: 6 }}>
            <CommandButton label="Join TestFlight" href={SP_LINKS.testflight} variant="solid" />
          </div>
        </div>
      ) : null}
    </nav>
  );
}

function NavLink({ label, href, external, active, onClick }) {
  const [hover, setHover] = React.useState(false);
  const color = active ? SP_COL.white : hover ? SP_COL.white : SP_COL.grayLight;
  return (
    <a href={href}
       target={external ? '_blank' : undefined}
       rel={external ? 'noopener noreferrer' : undefined}
       onClick={onClick}
       onMouseEnter={() => setHover(true)}
       onMouseLeave={() => setHover(false)}
       style={{
         fontFamily: SP_MONO_W, fontSize: 11, letterSpacing: '0.3em',
         textTransform: 'uppercase',
         color,
         textDecoration: 'none',
         transition: 'color 150ms ease',
         borderBottom: active ? `1px solid ${SP_COL.white}` : '1px solid transparent',
         paddingBottom: 4,
       }}>{label}{external ? ' ↗' : ''}</a>
  );
}

Object.assign(window, { Nav });