// Nav.jsx — Esther Chan Portfolio

const navStyles = {
  nav: {
    position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    padding: '0 48px', height: '56px',
    background: 'rgba(8,8,8,0.92)',
    borderBottom: '1px solid rgba(255,255,255,0.05)',
    backdropFilter: 'blur(10px)',
    WebkitBackdropFilter: 'blur(10px)',
    transition: 'background 0.3s ease',
  },
  links: { display: 'flex', gap: '36px', alignItems: 'center' },
  link: {
    fontSize: '13px', fontWeight: 500, letterSpacing: '0.2em',
    textTransform: 'uppercase', cursor: 'pointer',
    transition: 'color 0.2s ease',
    textDecoration: 'none',
    position: 'relative',
    paddingBottom: '2px',
  },
};

function Nav({ current, navigate }) {
  const items = [
    { id: 'home',     label: 'Home',    action: () => { navigate('home'); window.scrollTo({ top: 0, behavior: 'smooth' }); } },
    { id: 'projects', label: 'Work',    action: () => navigate('projects') },
    { id: 'contact',  label: 'Contact', action: () => navigate('contact') },
  ];

  function isActive(id) {
    return current === id;
  }

  return (
    <nav style={navStyles.nav}>
      <div style={navStyles.links}>
        {items.map(item => {
          const active = isActive(item.id);
          return (
            <span
              key={item.id}
              style={{
                ...navStyles.link,
                color: active ? '#ff8a4c' : 'rgba(255,255,255,0.35)',
                borderBottom: active ? '1px solid rgba(255,138,76,0.6)' : '1px solid transparent',
              }}
              onClick={item.action}
              onMouseEnter={e => { if (!active) e.currentTarget.style.color = 'rgba(255,255,255,0.80)'; }}
              onMouseLeave={e => { if (!active) e.currentTarget.style.color = 'rgba(255,255,255,0.35)'; }}
            >
              {item.label}
            </span>
          );
        })}
      </div>
    </nav>
  );
}

Object.assign(window, { Nav });