const { Wordmark: NavWordmark, Button: NavButton } = window.OctanexDesignSystem_0e3b75;

const NAV_LINKS = [
  { id: 'services', label: 'сервисы' },
  { id: 'market', label: 'маркет' },
  { id: 'how', label: 'как работает' },
  { id: 'pricing', label: 'цены' },
];

function Nav({ onStart }) {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 60, height: 64,
      display: 'flex', alignItems: 'center', gap: 20, padding: '0 32px',
      borderBottom: `1px solid ${scrolled ? 'var(--border-hairline)' : 'transparent'}`,
      background: scrolled ? 'rgba(4, 7, 5, 0.78)' : 'transparent',
      backdropFilter: scrolled ? 'blur(var(--blur-bar))' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(var(--blur-bar))' : 'none',
      transition: 'background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out)',
    }}>
      <button type="button" onClick={() => window.scrollTo({ top: 0, behavior: window.SITE_REDUCED ? 'auto' : 'smooth' })}
        style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0, display: 'flex' }} aria-label="наверх">
        <NavWordmark size={17} mark />
      </button>
      <nav style={{ display: 'flex', gap: 4, marginLeft: 16 }}>
        {NAV_LINKS.map((l) => (
          <button key={l.id} type="button" onClick={() => scrollToId(l.id)} style={{
            appearance: 'none', background: 'none', border: 'none', cursor: 'pointer',
            fontFamily: 'var(--font-mono)', fontSize: 12.5, color: 'var(--text-secondary)',
            padding: '8px 12px', borderRadius: 6, transition: 'color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out)',
          }}
            onMouseEnter={(e) => { e.currentTarget.style.color = 'var(--text-primary)'; e.currentTarget.style.background = 'var(--surface-hover)'; }}
            onMouseLeave={(e) => { e.currentTarget.style.color = 'var(--text-secondary)'; e.currentTarget.style.background = 'none'; }}>
            {l.label}
          </button>
        ))}
      </nav>
      <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 10 }}>
        <NavButton variant="ghost" size="sm" onClick={onStart}>войти</NavButton>
        <NavButton size="sm" onClick={onStart}>начать</NavButton>
      </div>
    </header>
  );
}

Object.assign(window, { Nav });