// Nav.jsx — sticky top nav with subtle blur

const navStyles = {
  outer: {
    position: 'sticky',
    top: 0,
    zIndex: 50,
    width: '100%',
    background: 'rgba(250, 248, 244, 0.82)',
    backdropFilter: 'blur(12px) saturate(1.2)',
    WebkitBackdropFilter: 'blur(12px) saturate(1.2)',
    borderBottom: '1px solid var(--border)',
  },
  inner: {
    maxWidth: 'var(--container-max)',
    margin: '0 auto',
    padding: '12px var(--container-pad)',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
    gap: 24,
  },
  links: {
    display: 'flex',
    alignItems: 'center',
    gap: 28,
    fontFamily: 'var(--font-sans)',
    fontSize: 14,
    color: 'var(--fg)',
  },
  link: {
    color: 'inherit',
    textDecoration: 'none',
    textUnderlineOffset: 4,
    transition: 'color 120ms var(--ease-out)',
  },
  cta: {
    fontFamily: 'var(--font-sans)',
    fontWeight: 500,
    fontSize: 13,
    padding: '9px 14px',
    borderRadius: 'var(--r-md)',
    background: 'var(--ink-1000)',
    color: 'var(--ink-0)',
    border: 'none',
    cursor: 'pointer',
    display: 'inline-flex',
    alignItems: 'center',
    gap: 6,
    transition: 'background 120ms var(--ease-out)',
  },
  status: {
    fontFamily: 'var(--font-mono)',
    fontSize: 11,
    letterSpacing: '0.12em',
    textTransform: 'uppercase',
    color: 'var(--fg-muted)',
    display: 'inline-flex',
    alignItems: 'center',
    gap: 6,
  },
  dot: {
    width: 7, height: 7, borderRadius: '50%', background: 'var(--vault-500)',
    boxShadow: '0 0 0 3px rgba(31,110,74,0.18)',
  },
};

function Nav({ onBook }) {
  return (
    <header style={navStyles.outer}>
      <div style={navStyles.inner}>
        <a href="#top" style={{textDecoration:'none', color:'var(--ink-1000)', display: 'inline-flex'}}>
          <Wordmark size={22} />
        </a>
        <nav style={navStyles.links} data-nav-links>
          <a href="#thesis"     style={navStyles.link}>Thesis</a>
          <a href="#audience"   style={navStyles.link}>Who it's for</a>
          <a href="#floor"      style={navStyles.link}>The floor</a>
          <a href="#work"       style={navStyles.link}>Work</a>
          <a href="#process"    style={navStyles.link}>Process</a>
          <a href="#tearsheet"  style={navStyles.link}>Tear sheet</a>
          <a href="#pricing"    style={navStyles.link}>Engagement</a>
          <a href="#faq"        style={navStyles.link}>FAQ</a>
        </nav>
        <div style={{display:'flex', alignItems:'center', gap:18}} data-nav-cta-row>
          <span style={navStyles.status} data-nav-status>
            <span style={navStyles.dot}/> 2 slots / Q3
          </span>
          <button style={navStyles.cta} onClick={onBook}>
            <Mark size={11} color="var(--powder-500)"/> Book a call
          </button>
        </div>
      </div>
    </header>
  );
}

Object.assign(window, { Nav });