function Nav() {
  return (
    <nav style={{
      position: 'sticky', top: 0, zIndex: 50,
      backdropFilter: 'blur(20px)',
      background: 'oklch(0.985 0.005 80 / 0.7)',
      borderBottom: '1px solid var(--line-2)'
    }}>
      <div style={{
        maxWidth: 1440, margin: '0 auto',
        padding: '18px 48px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        gap: 32
      }}>
        <a href="#top" style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <Logo />
          <span style={{ fontSize: 18, fontWeight: 600, letterSpacing: '-0.01em' }}>Call Axis

          </span>
        </a>

        <div style={{ display: 'flex', gap: 36, fontSize: 14, color: 'var(--ink-2)' }}>
          <a href="#how" style={navLinkStyle}>How it works</a>
          <a href="#who" style={navLinkStyle}>Who it's for</a>
          <a href="#pricing" style={navLinkStyle}>Pricing</a>
          <a href="#dashboard" style={navLinkStyle}>Dashboard</a>
        </div>

        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <a href="#cta" style={{
            background: 'var(--ink)', color: 'var(--bg)',
            padding: '10px 18px', borderRadius: 999,
            fontSize: 14, fontWeight: 500,
            display: 'inline-flex', alignItems: 'center', gap: 8
          }}>
            Book Now
            <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
              <path d="M3 6h6m-2-2 2 2-2 2" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </a>
        </div>
      </div>
    </nav>);

}

const navLinkStyle = {
  fontSize: 14, color: 'var(--ink-2)',
  transition: 'color 0.2s'
};

function Logo() {
  return (
    <svg width="26" height="26" viewBox="0 0 26 26" fill="none">
      <circle cx="13" cy="13" r="12" stroke="var(--ink)" strokeWidth="1.5" />
      <circle cx="13" cy="13" r="4" fill="var(--accent)" />
      <path d="M13 1 L13 7 M13 19 L13 25 M1 13 L7 13 M19 13 L25 13" stroke="var(--ink)" strokeWidth="1.5" strokeLinecap="round" />
    </svg>);

}

window.Nav = Nav;
window.Logo = Logo;