/* @jsx React.createElement */
const { useState } = React;

window.Nav = function Nav({ current, go }) {
  const items = [
    { id: 'home', label: 'home', href: '/' },
    { id: 'services', label: 'services', href: '/services' },
    { id: 'work', label: 'work', href: '/work' },
    { id: 'contact', label: 'contact', href: '/contact' },
  ];
  // Click handler that lets the browser handle modifier-clicks (cmd/ctrl,
  // middle-click, shift) so opening in a new tab still works, and only
  // does in-app navigation for ordinary left clicks.
  const onLink = (id) => (e) => {
    if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button !== 0) return;
    e.preventDefault();
    go(id);
  };
  return (
    <nav style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: 'rgba(247,248,250,0.78)',
      backdropFilter: 'blur(12px)',
      WebkitBackdropFilter: 'blur(12px)',
      borderBottom: '1px solid var(--rule)',
    }}>
      <div style={{
        maxWidth: 1200, margin: '0 auto',
        padding: '14px 32px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <a href="/" onClick={onLink('home')}
          style={{ display: 'flex', alignItems: 'center', gap: 10, textDecoration: 'none' }}>
          <img src="/logo.svg" alt="" aria-hidden="true" style={{ width: 26, height: 26 }} />
          <span style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 16, color: 'var(--ink)' }}>
            Zero <em className="em-shimmer" style={{ fontStyle: 'italic', fontWeight: 300 }}>Labs</em>
          </span>
        </a>
        <div style={{ display: 'flex', gap: 28, alignItems: 'center' }}>
          {items.map((it) => (
            <a key={it.id} href={it.href} onClick={onLink(it.id)}
              style={{
                fontFamily: 'var(--font-body)', fontSize: 14, fontWeight: 400,
                color: current === it.id ? 'var(--accent)' : 'var(--ink-mid)',
                textDecoration: 'none',
                borderBottom: current === it.id ? '1px solid var(--accent)' : '1px solid transparent',
                paddingBottom: 2,
                transition: 'color 200ms ease',
              }}>
              {it.label}
            </a>
          ))}
          <span style={{
            fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-low)',
            letterSpacing: '0.04em', textTransform: 'uppercase',
          }}>000labs.com</span>
        </div>
      </div>
    </nav>
  );
};