// Main site nav. Logo on left, page links in the middle, CTA on right.
// `active` highlights the current page; pass null on Terms / external pages.
function PSNav({ scrolled, absolute, active, onDark }) {
  // When the page sits on a dark hero (e.g. Examples), use cream artwork until scrolled.
  const dark = !!onDark && !scrolled;
  const fg = dark ? 'var(--cream)' : 'var(--cocoa)';
  const links = [
    { id: 'landing',      label: 'Overview',      href: 'Product Studio.html' },
    { id: 'examples',     label: 'Examples',      href: 'Examples.html' },
    { id: 'capabilities', label: 'Capabilities',  href: 'Capabilities.html' },
    { id: 'members',      label: 'Vault Members', href: 'Vault Members.html' },
    { id: 'faq',          label: 'FAQ',           href: 'FAQ.html' }
  ];

  return (
    <nav
      className="ps-nav"
      data-mobile-pad="true"
      style={{
        position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
        display: 'grid',
        gridTemplateColumns: 'auto 1fr auto',
        alignItems: 'center',
        gap: 28,
        padding: '18px 40px',
        background: scrolled ? 'rgba(242,236,228,0.92)' : 'rgba(242,236,228,0.0)',
        backdropFilter: scrolled ? 'blur(14px)' : 'none',
        WebkitBackdropFilter: scrolled ? 'blur(14px)' : 'none',
        borderBottom: scrolled ? '1px solid var(--border-1)' : '1px solid transparent',
        transition: 'all 280ms cubic-bezier(.22,.61,.36,1)'
      }}>
      {/* Logo */}
      <a
        href="https://www.thevaultstock.com"
        aria-label="The Vault Stock — home"
        style={{ display: 'flex', alignItems: 'center', gap: 12, borderBottom: 0, textDecoration: 'none' }}>
        <img
          src={dark ? 'assets/logo-cream.png' : 'assets/logo-drip-brown.png'}
          alt="The Vault Stock"
          style={{ height: 32, width: 'auto', display: 'block', transition: 'opacity 200ms var(--pe)' }}
        />
        <span className="ps-nav-wordmark celestial" style={{
          fontSize: 22,
          color: fg,
          letterSpacing: '0.01em',
          lineHeight: 1,
          paddingTop: 2
        }}>
          Product Studio
        </span>
      </a>

      {/* Centered link group */}
      <ul className="ps-nav-links" style={{
        listStyle: 'none', margin: 0, padding: 0,
        display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 36
      }}>
        {links.map((l) => {
          const isActive = l.id === active;
          return (
            <li key={l.id}>
              <a
                href={l.href}
                aria-current={isActive ? 'page' : undefined}
                style={{
                  position: 'relative',
                  display: 'inline-block',
                  fontFamily: '"La Villa", sans-serif',
                  fontSize: 15,
                  fontWeight: 500,
                  letterSpacing: '-0.005em',
                  color: fg,
                  opacity: isActive ? 1 : 0.7,
                  textDecoration: 'none',
                  paddingBottom: 4,
                  transition: 'opacity 200ms var(--pe)'
                }}
                onMouseEnter={(e) => { if (!isActive) e.currentTarget.style.opacity = 1; }}
                onMouseLeave={(e) => { if (!isActive) e.currentTarget.style.opacity = 0.7; }}>
                {l.label}
                {isActive && (
                  <span
                    aria-hidden="true"
                    style={{
                      position: 'absolute', left: 0, right: 0, bottom: -2,
                      height: 1, background: fg
                    }}
                  />
                )}
              </a>
            </li>
          );
        })}
      </ul>

      {/* CTA on the right */}
      <a
        className="ps-nav-cta"
        href={window.PORTAL_URL || 'https://productstudio.thevaultstock.com/'}
        target="_blank"
        rel="noopener noreferrer"
        style={{
          justifySelf: 'end',
          fontFamily: '"La Villa", sans-serif', fontSize: 13, fontWeight: 500,
          color: dark ? 'var(--cocoa)' : 'var(--cream)',
          background: dark ? 'var(--cream)' : 'var(--cocoa)',
          padding: '11px 22px', borderRadius: 999, textDecoration: 'none',
          letterSpacing: '0.005em',
          display: 'inline-flex', alignItems: 'center', gap: 8,
          transition: 'transform 200ms var(--pe), background 200ms'
        }}
        onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-1px)'; }}
        onMouseLeave={(e) => { e.currentTarget.style.transform = 'none'; }}>
        Open Product Studio
        <span aria-hidden="true" style={{ fontFamily: '"La Villa", sans-serif', fontSize: 13, letterSpacing: 0 }}>→</span>
      </a>
    </nav>
  );
}

Object.assign(window, { PSNav });