// dthas — shared site navigation. Page-aware: links across the dedicated
// pages, highlighting the current one. Used by every page (home, services,
// about, contact) so the nav stays identical everywhere.
//
// Pass `current` as one of: 'home' | 'services' | 'work' | 'about' | 'contact'.
function SiteNav({ current }) {
  const links = [
    ['Services', 'services.html', 'services'],
    ['Work', 'work.html', 'work'],
    ['About', 'about.html', 'about'],
    ['Contact', 'contact.html', 'contact'],
  ];
  return (
    <nav style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: 'var(--c-white)', color: 'var(--c-black)',
      borderBottom: '1px solid var(--border-hairline)',
    }}>
      <div style={{
        maxWidth: 'var(--container-max)', margin: '0 auto',
        padding: '18px var(--container-pad)',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <a href="index.html" style={{
          fontFamily: 'var(--font-sans)', fontWeight: 400, fontSize: '28px',
          letterSpacing: '-0.04em', color: 'var(--c-black)',
        }}>dthas</a>
        <div style={{ display: 'flex', alignItems: 'center', gap: '32px' }}>
          <ul style={{ display: 'flex', gap: '28px', listStyle: 'none', margin: 0, padding: 0 }} className="dthas-navlinks">
            {links.map(([label, href, key]) => {
              const active = key === current;
              return (
                <li key={key}>
                  <a href={href} className="ds-ulink"
                    style={{
                      fontSize: '14px', letterSpacing: '-0.01em',
                      color: active ? 'var(--c-black)' : 'var(--c-ink-700)',
                      transition: 'color var(--dur-base) var(--ease-out)',
                    }}
                    onMouseEnter={(e)=>e.target.style.color='var(--c-black)'}
                    onMouseLeave={(e)=>e.target.style.color = active ? 'var(--c-black)' : 'var(--c-ink-700)'}
                  >{label}</a>
                </li>
              );
            })}
          </ul>
        </div>
      </div>
    </nav>
  );
}

Object.assign(window, { SiteNav });