// Nav.jsx — sticky top nav. Shared across home, download, changelog, docs.

const GITHUB_REPO = 'PaulMarchiset/ffkit';

const navStyles = {
  outer: {
    position: 'sticky', top: 0, zIndex: 20,
    background: 'rgba(250,250,250,0.85)',
    backdropFilter: 'saturate(180%) blur(12px)',
    WebkitBackdropFilter: 'saturate(180%) blur(12px)',
    borderBottom: '1px solid var(--border-subtle)',
  },
  inner: (narrow) => ({
    maxWidth: 1120, margin: '0 auto',
    height: narrow ? 56 : 64,
    padding: narrow ? '0 16px' : '0 32px',
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    gap: narrow ? 12 : 32,
  }),
  brand: {
    display: 'flex', alignItems: 'center', gap: 0,
    textDecoration: 'none', color: 'var(--fg)',
  },
  brandLogo: (narrow) => ({
    height: narrow ? 60 : 80,
    width: 'auto',
    display: 'block',
    filter: 'invert(1)',
  }),
  links: {
    display: 'flex', alignItems: 'center', gap: 28,
  },
  link: (active) => ({
    font: 'var(--type-body-sm)',
    color: active ? 'var(--accent-press)' : 'var(--fg-muted)',
    textDecoration: 'none',
    fontWeight: active ? 600 : 400,
  }),
  actions: {
    display: 'flex', alignItems: 'center', gap: 8,
  },
};

const NAV_LINKS = [
  { id: 'features',  label: 'Features',  href: './index.html#features' },
  { id: 'docs',      label: 'Docs',      href: './docs.html' },
  { id: 'changelog', label: 'Changelog', href: './changelog.html' },
];

function Nav({ currentPage }) {
  const { isNarrow, isMobile } = useViewport();
  return (
    <nav style={navStyles.outer}>
      <div style={navStyles.inner(isNarrow)}>
        <a href="./index.html" style={navStyles.brand}>
          <img src="./assets/ffkit-wordmark.svg" alt="FFkit" style={navStyles.brandLogo(isNarrow)} />
        </a>
        {!isNarrow && (
          <div style={navStyles.links}>
            {NAV_LINKS.map((l) => (
              <a key={l.id} href={l.href} style={navStyles.link(currentPage === l.id)}>{l.label}</a>
            ))}
          </div>
        )}
        <div style={navStyles.actions}>
          {!isMobile && (
            <Button variant="ghost" icon="github" size="sm" onClick={() => window.open(`https://github.com/${GITHUB_REPO}`, '_blank')}>GitHub</Button>
          )}
          <Button
            variant="primary"
            size="sm"
            icon="download"
            onClick={() => { window.location.href = './download.html'; }}
          >
            Download
          </Button>
        </div>
      </div>
    </nav>
  );
}

Object.assign(window, { Nav });