// 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.
//
// On narrow screens the desktop links collapse into a top-right hamburger
// that opens a full-width menu panel. All of the nav's responsive CSS is
// injected from here (NavStyle) so it lives in one place, not in every page.
//
// Pass `current` as one of: 'home' | 'services' | 'work' | 'about' | 'contact'.

// Injected once: the hamburger toggle, the mobile menu panel, and the
// breakpoint that swaps the desktop links for the toggle. The desktop links
// carry an inline `display:flex`, so the collapse rules need `!important`.
const NAV_CSS = `
  .dthas-navtoggle {
    display: none;
    align-items: center; justify-content: center;
    width: 44px; height: 44px; margin: -10px -8px -10px 0;
    padding: 0; border: 0; background: none; cursor: pointer;
    color: var(--c-black);
  }
  .dthas-navtoggle svg { display: block; }
  .dthas-mobile-menu { display: none; }
  .dthas-mobile-menu a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 0;
    font-family: var(--font-sans); font-size: 1.25rem; letter-spacing: -0.02em;
    color: var(--c-ink-700);
    border-top: 1px solid var(--border-hairline);
  }
  .dthas-mobile-menu a[aria-current="page"] { color: var(--c-black); }
  .dthas-mobile-menu a:last-child { border-bottom: 1px solid var(--border-hairline); }
  .dthas-mobile-menu .dthas-mm-mark {
    font-family: var(--font-mono); font-size: var(--fs-caption);
    letter-spacing: var(--ls-mono); color: var(--text-faint);
  }

  @media (max-width: 640px) {
    .dthas-navlinks { display: none !important; }
    .dthas-navtoggle { display: inline-flex; }
    .dthas-mobile-menu.is-open {
      display: block;
      padding: 8px var(--container-pad) 24px;
      border-top: 1px solid var(--border-hairline);
      background: var(--c-white);
      animation: dthas-mm-in .28s var(--ease-out) both;
    }
  }
  @keyframes dthas-mm-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) { .dthas-mobile-menu.is-open { animation: none; } }
`;

function SiteNav({ current }) {
  const [open, setOpen] = React.useState(false);

  const links = [
    ['Home', 'index.html', 'home'],
    ['Services', 'services.html', 'services'],
    ['Work', 'work.html', 'work'],
    ['About', 'about.html', 'about'],
    ['Contact', 'contact.html', 'contact'],
  ];
  // Home lives on the wordmark for desktop; the mobile menu lists it explicitly.
  const desktopLinks = links.filter(([, , key]) => key !== 'home');

  // Close the menu on Escape.
  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [open]);

  return (
    <nav aria-label="Primary" style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: 'var(--c-white)', color: 'var(--c-black)',
      borderBottom: '1px solid var(--border-hairline)',
    }}>
      <style>{NAV_CSS}</style>
      <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">
            {desktopLinks.map(([label, href, key]) => {
              const active = key === current;
              return (
                <li key={key}>
                  <a href={href} className="ds-ulink"
                    aria-current={active ? 'page' : undefined}
                    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>

          {/* mobile hamburger — shown ≤640px */}
          <button
            type="button"
            className="dthas-navtoggle"
            aria-label={open ? 'Close menu' : 'Open menu'}
            aria-expanded={open}
            aria-controls="dthas-mobile-menu"
            onClick={() => setOpen((o) => !o)}
          >
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
              strokeWidth="1.6" strokeLinecap="square" aria-hidden="true">
              {open ? (
                <React.Fragment>
                  <line x1="5" y1="5" x2="19" y2="19" />
                  <line x1="19" y1="5" x2="5" y2="19" />
                </React.Fragment>
              ) : (
                <React.Fragment>
                  <line x1="3" y1="7" x2="21" y2="7" />
                  <line x1="3" y1="12" x2="21" y2="12" />
                  <line x1="3" y1="17" x2="21" y2="17" />
                </React.Fragment>
              )}
            </svg>
          </button>
        </div>
      </div>

      {/* mobile menu panel */}
      <div id="dthas-mobile-menu" className={'dthas-mobile-menu' + (open ? ' is-open' : '')}>
        {links.map(([label, href, key]) => {
          const active = key === current;
          return (
            <a key={key} href={href} aria-current={active ? 'page' : undefined}>
              {label}
              {active && <span className="dthas-mm-mark" aria-hidden="true">Current</span>}
            </a>
          );
        })}
      </div>
    </nav>
  );
}

Object.assign(window, { SiteNav });