// Primust — Homepage Nav (responsive)
function SiteHref(href) {
  if (!href || href === '#' || href.startsWith('#') || /^(https?:|mailto:)/.test(href)) return href || '#';
  if (href === '/') return '/';
  const localStatic = typeof window !== 'undefined'
    && (window.location.protocol === 'file:'
      || ['localhost', '127.0.0.1', '0.0.0.0'].includes(window.location.hostname));
  if (!localStatic) return href;
  const [path, hash] = href.split('#');
  if (/\.[a-z0-9]+$/i.test(path)) return href;
  return `${path}.html${hash ? `#${hash}` : ''}`;
}

function Nav() {
  const { C, F } = window.PT;
  const [scrolled, setScrolled] = useState(false);
  const [w, setW] = useState(typeof window !== 'undefined' ? window.innerWidth : 1440);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 30);
    const onResize = () => setW(window.innerWidth);
    window.addEventListener('scroll', onScroll);
    window.addEventListener('resize', onResize);
    return () => {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onResize);
    };
  }, []);

  const compact = w < 1180;          // drop "Sign in" + tighten gaps
  const mini    = w < 980;           // hide secondary links
  const mobile  = w < 760;           // hide nav links entirely

  const allLinks = [
    ['Coding Agents',  '/coding-agents',            'primary'],
    ['AI Agents',      '/agents',                   'primary'],
    ['Chain Verifier', '/chain-verifier',           'primary'],
    ['Integrations',   '/integrations',             'primary'],
    ['Evidence Packs', '/evidence-packs',           'primary'],
    ['Trust',          '/trust',                    'primary'],
    ['Pricing',        '/pricing',                  'primary'],
    ['Docs',           'https://docs.primust.com/', 'secondary'],
  ];
  const shown = mobile
    ? []
    : mini
      ? allLinks.filter(x => x[2] === 'primary')
      : allLinks;

  return (
    <nav style={{
      position: 'sticky', top: 0, zIndex: 50,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: `18px ${compact ? 28 : 48}px`,
      background: scrolled ? C.bg : 'transparent',
      backdropFilter: scrolled ? 'blur(12px) saturate(140%)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(12px) saturate(140%)' : 'none',
      borderBottom: scrolled ? `1px solid ${C.line}` : '1px solid transparent',
      transition: 'all 200ms ease',
      fontFamily: F.sans, fontSize: 14, gap: 16,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: compact ? 22 : 32, minWidth: 0, flex: 1 }}>
        <Logo size={24} />
        {shown.length > 0 && (
          <div style={{ display: 'flex', gap: compact ? 16 : 22, color: C.dim, whiteSpace: 'nowrap', overflow: 'hidden' }}>
            {shown.map(([l, h]) => {
              const ext = /^https?:/.test(h);
              return (
                <a key={l} href={SiteHref(h)}
                  {...(ext ? { target: '_blank', rel: 'noopener' } : {})}
                  style={{ color: C.dim, textDecoration: 'none', transition: 'color 120ms', whiteSpace: 'nowrap' }}
                  onMouseOver={e => e.currentTarget.style.color = C.ink}
                  onMouseOut={e => e.currentTarget.style.color = C.dim}>{l}</a>
              );
            })}
          </div>
        )}
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 14, flexShrink: 0, whiteSpace: 'nowrap' }}>
        {!mobile && <a href="https://app.primust.com/" style={{ color: C.dim, fontSize: 13, cursor: 'pointer', textDecoration: 'none' }}>Sign in</a>}
        <Btn variant="primary" style={{ padding: '9px 16px', fontSize: 13, borderRadius: 6 }}
             onClick={() => window.location.href = 'mailto:hello@primust.com?subject=14-day%20Agent%20Control%20Coverage%20Assessment'}>
          {mobile ? 'Assessment' : 'Run a 14-day assessment'}
        </Btn>
      </div>
    </nav>
  );
}

window.Nav = Nav;