// Nav.jsx — top navigation
function Nav({ active = 'home', onNav }) {
  const items = [
    { id: 'approach', label: 'Approach' },
    { id: 'work',     label: 'Work' },
    { id: 'offers',   label: 'Engagements' },
  ];
  return (
    <nav style={navStyles.bar}>
      <div style={navStyles.inner}>
        <a onClick={() => onNav?.('home')} style={navStyles.brand}>
          <span style={navStyles.brandSerif}>Watershed</span>
          <span style={navStyles.brandLabel}>Automations</span>
        </a>
        <div style={navStyles.links}>
          {items.map(it => (
            <a key={it.id}
               onClick={() => onNav?.(it.id)}
               style={{ ...navStyles.link, ...(active === it.id ? navStyles.linkActive : {}) }}>
              {it.label}
            </a>
          ))}
          <a onClick={() => onNav?.('contact')} style={navStyles.cta}>Begin →</a>
        </div>
      </div>
    </nav>
  );
}

const navStyles = {
  bar: {
    position: 'sticky', top: 0, zIndex: 50,
    background: 'rgba(242, 237, 228, 0.92)',
    backdropFilter: 'blur(8px)',
    WebkitBackdropFilter: 'blur(8px)',
    borderBottom: '1px solid var(--rule)',
  },
  inner: {
    maxWidth: 1200, margin: '0 auto',
    padding: '18px 32px',
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
  },
  brand: { display: 'flex', alignItems: 'baseline', gap: 12, cursor: 'pointer', textDecoration: 'none' },
  brandSerif: { fontFamily: 'var(--serif-display)', fontWeight: 400, fontSize: 22, letterSpacing: '-0.01em', color: 'var(--ink)' },
  brandLabel: { fontFamily: 'var(--sans-ui)', fontWeight: 300, fontSize: 10, letterSpacing: '0.32em', textTransform: 'uppercase', color: 'var(--accent)' },
  links: { display: 'flex', alignItems: 'center', gap: 32 },
  link: { fontFamily: 'var(--sans-ui)', fontWeight: 300, fontSize: 13, color: 'var(--ink)', cursor: 'pointer', textDecoration: 'none', transition: 'color 180ms var(--ease-out)' },
  linkActive: { color: 'var(--accent)' },
  cta: { fontFamily: 'var(--sans-ui)', fontWeight: 300, fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--accent)', cursor: 'pointer', textDecoration: 'none' },
};

window.Nav = Nav;