// Nav. X-only mark by default; expands to full wordmark on hover and pushes
// adjacent menu items with it. Menu links smooth-scroll to same-page sections
// and track the active section based on scroll position.
const Nav = ({ active, onJump, onContact }) => {
  const [hover, setHover] = React.useState(false);

  const MARK_W = 22;
  const WORD_W = 110;
  const BUFFER = 14;
  const GAP_AFTER_LOGO = 14; // matches menu gap so spacing feels symmetric

  const link = (key, label) => {
    const isActive = active === key;
    return (
      <a
        key={key}
        onClick={() => onJump(key)}
        className={'orx-nav-link' + (isActive ? ' is-active' : '')}
      >
        {label}
        <span className="orx-nav-link__u" aria-hidden/>
      </a>
    );
  };

  return (
    <nav style={{
      position: 'sticky', top: 0, zIndex: 100,
      display: 'flex',
      alignItems: 'center',
      padding: '18px 48px',
      background: 'rgba(10, 7, 5, 0.55)',
      backdropFilter: 'blur(24px)',
      WebkitBackdropFilter: 'blur(24px)',
      borderBottom: '1px solid rgba(245,238,228,0.08)',
    }}>
      <div
        onClick={() => onJump('home')}
        // Only a real mouse pointer triggers the wordmark expansion.
        // On touch devices a tap would otherwise leave the logo
        // permanently expanded, blocking menu items and Contact.
        onPointerEnter={(e) => { if (e.pointerType !== 'mouse') return; setHover(true); }}
        onPointerLeave={(e) => { if (e.pointerType !== 'mouse') return; setHover(false); }}
        style={{
          position: 'relative',
          height: 32,
          width: (hover ? WORD_W : MARK_W) + BUFFER,
          display: 'flex',
          alignItems: 'center',
          cursor: 'pointer',
          userSelect: 'none',
          transition: 'width 320ms cubic-bezier(0.22,1,0.36,1)',
          marginRight: GAP_AFTER_LOGO,
        }}
      >
        <img
          src="./assets/logo-mark-x-white.png"
          draggable={false}
          style={{
            position: 'absolute', left: 0, top: '50%',
            height: 22, width: 22, display: 'block',
            transform: `translateY(-50%) ${hover ? 'translateX(-4px)' : 'translateX(0)'}`,
            opacity: hover ? 0 : 1,
            transition: 'opacity 220ms ease, transform 280ms cubic-bezier(0.22,1,0.36,1)',
            pointerEvents: 'none',
          }}
        />
        <img
          src="./assets/logo-wordmark-white.png"
          draggable={false}
          style={{
            position: 'absolute', left: 0, top: '50%',
            height: 18, width: 'auto', display: 'block',
            transform: `translateY(-50%) ${hover ? 'translateX(0)' : 'translateX(6px)'}`,
            opacity: hover ? 1 : 0,
            transition: 'opacity 260ms ease 40ms, transform 320ms cubic-bezier(0.22,1,0.36,1)',
            pointerEvents: 'none',
          }}
        />
      </div>

      <div className="orx-nav-links" style={{display:'flex', gap: 28, alignItems: 'center'}}>
        {link('philosophy', 'Philosophy')}
        {link('services', 'Services')}
        {link('engagement', 'Engagement')}
        {link('work', 'Work')}
      </div>

      <div style={{marginLeft: 'auto'}}>
        <button
          onClick={onContact}
          className="orx-btn orx-btn--primary orx-btn-aura orx-btn-aura--primary"
          style={{
            background: 'linear-gradient(180deg, #FFFFFF 0%, #F5EEE4 100%)',
            color: '#0A0705',
            border: 'none',
            padding: '9px 18px',
            borderRadius: 10,
            fontFamily: "'Inter Tight', sans-serif",
            fontSize: 13,
            fontWeight: 500,
            letterSpacing: '-0.005em',
            cursor: 'pointer',
            whiteSpace: 'nowrap',
            /* Same inset-border alpha as the hero button so the "edge" reads
               at the same strength. Drop-shadow scaled down to suit the
               smaller pill. */
            boxShadow: 'inset 0 0 0 1px rgba(255,250,245,0.22), 0 8px 24px rgba(0,0,0,0.45)',
          }}
        ><span className="orx-btn-label">Contact</span></button>
      </div>

      <style>{`
        .orx-nav-link {
          position: relative;
          color: #BFB3A2;
          font-size: 13px;
          font-family: 'Inter Tight', sans-serif;
          font-weight: 500;
          letter-spacing: -0.005em;
          cursor: pointer;
          text-decoration: none;
          padding: 8px 4px;
          user-select: none;
          transition: color 240ms cubic-bezier(0.22,1,0.36,1);
        }
        .orx-nav-link:hover { color: #FFFAF5; }
        .orx-nav-link.is-active { color: #FFFAF5; }

        .orx-nav-link__u {
          position: absolute;
          left: 4px; right: 4px; bottom: 2px; height: 1px;
          background: #FFA566;
          transform: scaleX(0);
          transform-origin: left center;
          transition: transform 320ms cubic-bezier(0.22,1,0.36,1);
        }
        .orx-nav-link.is-active .orx-nav-link__u { transform: scaleX(1); }
      `}</style>
    </nav>
  );
};

window.Nav = Nav;