/** CRAiD UI kit — Navigation */
const { useState } = React;

function Nav({ active = 'home', onNav }) {
  const items = ['Home', 'Work', 'About', 'Office'];
  return (
    <nav style={navStyles.bar}>
      <a href="#" style={navStyles.brand} onClick={(e) => { e.preventDefault(); onNav?.('home'); }}>
        <img src="../../assets/logo-craid-wordmark.png" alt="CRAiD" style={{ height: 24, display: 'block' }} />
      </a>
      <div style={navStyles.links}>
        {items.map((l) => {
          const key = l.toLowerCase();
          const isActive = active === key;
          return (
            <a key={l} href="#" onClick={(e) => { e.preventDefault(); onNav?.(key); }}
               style={{ ...navStyles.link, color: isActive ? 'var(--primary)' : 'var(--fg)' }}>
              {l}
              {isActive && <span style={navStyles.dot} />}
            </a>
          );
        })}
      </div>
      <button style={navStyles.cta} onClick={() => onNav?.('office')}>
        Enter Office
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{ marginLeft: 6 }}>
          <path d="M5 12h14M13 5l7 7-7 7" />
        </svg>
      </button>
    </nav>
  );
}

const navStyles = {
  bar: {
    position: 'sticky', top: 0, zIndex: 50,
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    padding: '18px 48px',
    background: 'rgba(246, 250, 251, 0.72)',
    backdropFilter: 'blur(16px)',
    WebkitBackdropFilter: 'blur(16px)',
    borderBottom: '1px solid var(--border)',
  },
  brand: { display: 'flex', alignItems: 'center', textDecoration: 'none' },
  links: { display: 'flex', gap: 40 },
  link: {
    position: 'relative', fontSize: 14, fontWeight: 500,
    textDecoration: 'none', letterSpacing: '0.01em',
    transition: 'color 150ms var(--ease-out)',
  },
  dot: {
    position: 'absolute', bottom: -8, left: '50%', transform: 'translateX(-50%)',
    width: 4, height: 4, borderRadius: '50%', background: 'var(--primary)',
  },
  cta: {
    display: 'inline-flex', alignItems: 'center',
    background: 'var(--primary)', color: '#fff', border: 0,
    padding: '10px 22px', borderRadius: 9999,
    fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 14,
    cursor: 'pointer',
    transition: 'transform 150ms var(--ease-out), opacity 150ms var(--ease-out)',
  },
};

window.Nav = Nav;