// Nav.jsx — masthead: name left, four sides with pastel chips right
function NavLink({ label, chip, active, onClick, outline }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div
      onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: 'flex',
        alignItems: 'center',
        gap: 8,
        cursor: 'pointer',
        padding: '6px 2px',
        borderBottom: `2px solid ${active ? 'var(--c-smoke)' : 'transparent'}`,
        transition: 'border-color 160ms',
      }}>
      <span style={{
        width: 10, height: 10,
        background: outline ? 'transparent' : chip,
        border: outline ? '1.5px solid var(--c-muted)' : 'none',
        opacity: active || hover ? 1 : 0.55,
        transform: hover && !active ? 'scale(1.25)' : 'scale(1)',
        transition: 'opacity 160ms, transform 200ms var(--ease-spring)',
        flexShrink: 0,
      }}></span>
      <span style={{
        fontFamily: 'var(--font-body)',
        fontSize: 14,
        fontWeight: active ? 700 : 500,
        color: active || hover ? 'var(--c-smoke)' : 'var(--c-whisper)',
        transition: 'color 160ms',
        whiteSpace: 'nowrap',
      }}>{label}</span>
    </div>
  );
}

function Nav({ active, onSelect, sections, onHome }) {
  return (
    <nav style={{
      position: 'sticky',
      top: 0,
      zIndex: 100,
      background: 'rgba(245,247,249,0.92)',
      backdropFilter: 'blur(10px)',
      WebkitBackdropFilter: 'blur(10px)',
      borderBottom: '1px solid var(--c-border)',
    }}>
      <div className="nav-inner" style={{
        maxWidth: 1320,
        margin: '0 auto',
        padding: '0 40px',
        height: 60,
        display: 'flex',
        alignItems: 'center',
        gap: 32,
      }}>
        <div
          onClick={onHome}
          style={{
            fontFamily: 'var(--font-display)',
            fontSize: 17,
            fontWeight: 700,
            letterSpacing: '-0.02em',
            color: 'var(--c-smoke)',
            cursor: 'pointer',
            display: 'inline-flex',
            alignItems: 'baseline',
            gap: 12,
            whiteSpace: 'nowrap',
          }}>
          <span>Merijn Verhaak</span>
          <span className="desktop-only" style={{
            fontFamily: 'var(--font-body)',
            fontSize: 11,
            letterSpacing: '0.14em',
            color: 'var(--c-muted)',
            textTransform: 'uppercase',
            fontWeight: 500,
          }}>FBP Portfolio</span>
        </div>
        <div style={{ flex: 1 }}></div>
        <div className="nav-links" style={{ display: 'flex', gap: 22, alignItems: 'center' }}>
          <NavLink label="Index" outline active={active === 'home'} onClick={onHome} />
          {sections.map((s) => (
            <NavLink
              key={s.id}
              label={s.title}
              chip={s.accent}
              active={active === s.id}
              onClick={() => onSelect(s.id)}
            />
          ))}
          <NavLink label="References" outline active={active === 'references'} onClick={() => onSelect('references')} />
        </div>
      </div>
    </nav>
  );
}

window.Nav = Nav;