const { Wordmark } = window.CammusDesignSystem_2ef585;

function Nav() {
  const links = [
    { label: 'Problem', href: '#problem' },
    { label: 'Model', href: '#model' },
    { label: 'Solution', href: '#solution' },
    { label: 'Market', href: '#market' },
  ];
  return (
    <nav data-screen-label="Nav" style={{
      position: 'sticky', top: 0, zIndex: 50,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: 'var(--space-4) var(--page-gutter)',
      background: 'rgba(10,10,10,0.72)',
      backdropFilter: 'saturate(140%) blur(10px)',
      borderBottom: '1px solid var(--cam-border-subtle)',
    }}>
      <a href="#top" style={{ display: 'inline-flex', borderBottom: 'none' }} aria-label="Cammus">
        <Wordmark tone="white" height={22} />
      </a>
      <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-6)' }}>
        <ul className="lp-desk" style={{ display: 'flex', gap: 'var(--space-6)', listStyle: 'none', margin: 0, padding: 0 }}>
          {links.map((l) => (
            <li key={l.label}>
              <a href={l.href} style={{
                color: 'var(--cam-text-auxiliary)', fontSize: 'var(--fs-small)',
                fontWeight: 'var(--fw-medium)', borderBottom: 'none',
              }} onMouseEnter={(e) => (e.target.style.color = 'var(--cam-text-primary)')}
                 onMouseLeave={(e) => (e.target.style.color = 'var(--cam-text-auxiliary)')}>{l.label}</a>
            </li>
          ))}
        </ul>
      </div>
    </nav>
  );
}
window.Nav = Nav;