// Nav.jsx — ZhuZhu Website Navigation Component

const Nav = ({ activeSection, onNav }) => {
  const links = ['About', 'Experience', 'Projects', 'Contact'];

  return (
    <nav style={navStyles.nav}>
      <div style={navStyles.name} onClick={() => onNav && onNav('hero')}>
        ZhuZhu
      </div>
      <div style={navStyles.links}>
        {links.map(link => (
          <a
            key={link}
            style={{
              ...navStyles.link,
              ...(activeSection === link.toLowerCase() ? navStyles.linkActive : {})
            }}
            onClick={() => onNav && onNav(link.toLowerCase())}
          >
            {link}
          </a>
        ))}
      </div>
      <button
        style={navStyles.cta}
        onMouseEnter={e => { e.currentTarget.style.background = '#E8503A'; e.currentTarget.style.borderColor = '#E8503A'; }}
        onMouseLeave={e => { e.currentTarget.style.background = '#000'; e.currentTarget.style.borderColor = '#000'; }}
        onClick={() => onNav && onNav('contact')}
      >
        Get in touch
      </button>
    </nav>
  );
};

const navStyles = {
  nav: {
    position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    padding: '0 48px', height: '64px',
    borderBottom: '2px solid #000', background: '#F5F5F0',
  },
  name: {
    fontFamily: "'Space Grotesk', sans-serif", fontWeight: 800, fontSize: '22px',
    letterSpacing: '-0.02em', color: '#000', cursor: 'pointer', userSelect: 'none',
  },
  links: { display: 'flex', gap: '36px' },
  link: {
    fontFamily: "'Space Grotesk', sans-serif", fontSize: '13px', fontWeight: 600,
    letterSpacing: '0.06em', textTransform: 'uppercase', color: '#000',
    textDecoration: 'none', cursor: 'pointer', paddingBottom: '2px',
    borderBottom: '2px solid transparent', transition: 'color 150ms, border-color 150ms',
  },
  linkActive: { color: '#E8503A', borderBottom: '2px solid #E8503A' },
  cta: {
    fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700, fontSize: '13px',
    background: '#000', color: '#fff', border: '2px solid #000', borderRadius: '6px',
    padding: '9px 22px', cursor: 'pointer', letterSpacing: '0.02em',
    transition: 'background 150ms, border-color 150ms',
  },
};

Object.assign(window, { Nav });