Progress Spine Navbar

import { NavbarProgressSpine } from '@/components/blocks/navbar-progress-spine'

import { NavbarProgressSpine } from '@/components/blocks/navbar-progress-spine'

const SECTIONS = [
  { id: 'abstract', label: 'Abstract' },
  { id: 'architecture', label: 'Architecture' },
  { id: 'latency', label: 'Latency budget' },
  { id: 'rollout', label: 'Rollout' },
  { id: 'appendix', label: 'Appendix' },
] as const

export default function NavbarProgressSpineDemo() {
  return (
    <div className="min-h-[320vh]">
      <NavbarProgressSpine
        brand={
          <span className="inline-flex items-baseline gap-1.5">
            Ledger
            <span className="font-mono text-[10px] uppercase tracking-[0.2em] text-muted-foreground">
              RFC
            </span>
          </span>
        }
        sections={[...SECTIONS]}
        cta={{ label: 'Share draft', href: '#share' }}
      />

      <article className="mx-auto max-w-2xl px-4 pt-28 sm:px-6 sm:pt-32">
        <p className="font-mono text-[11px] uppercase tracking-[0.2em] text-muted-foreground sm:text-xs">
          Engineering · RFC-1842
        </p>
        <h1 className="mt-4 text-balance text-3xl font-semibold tracking-tight sm:text-4xl">
          Streaming config sync for multi-region control planes
        </h1>
        <p className="mt-4 text-base leading-relaxed text-muted-foreground">
          Scroll the page, the spine under the bar tracks progress, section labels light as you pass
          them, and the bar tucks away on scroll-down so it does not fight the prose.
        </p>

        {SECTIONS.map((section, i) => (
          <section key={section.id} id={section.id} className="scroll-mt-20 pt-16 sm:pt-20">
            <p className="font-mono text-[11px] uppercase tracking-[0.2em] text-muted-foreground sm:text-xs">
              {String(i + 1).padStart(2, '0')}
            </p>
            <h2 className="mt-2 text-2xl font-semibold tracking-tight">{section.label}</h2>
            <div className="mt-6 space-y-4 text-sm leading-relaxed text-muted-foreground sm:text-base">
              {i === 0 && (
                <>
                  <p>
                    Control planes currently poll region agents every 30 seconds. Under load, that
                    cadence produces stale routes and a 2–4 minute recovery window after a partial
                    outage. This RFC proposes a bidirectional stream with ordered snapshots.
                  </p>
                  <p>
                    Goals: sub-second propagation of config deltas, resumable sessions after reconnect,
                    and a hard cap of 12 KB/s average bandwidth per agent.
                  </p>
                </>
              )}
              {i === 1 && (
                <>
                  <p>
                    Each region runs a thin edge proxy that holds an open gRPC stream to the coordinator.
                    Snapshots are versioned with a monotonic epoch; deltas carry a causal vector so
                    agents can reject out-of-order frames without a full resync.
                  </p>
                  <p>
                    The coordinator shards by tenant hash. Failover promotes a warm standby using the
                    last acknowledged epoch from a majority of agents in that shard.
                  </p>
                </>
              )}
              {i === 2 && (
                <>
                  <p>
                    End-to-end budget from commit to agent apply is 800 ms at p99 inside a region and
                    1.6 s across continents. Encoding stays protobuf; compression is zstd level 3 only
                    when a frame exceeds 4 KB.
                  </p>
                  <p>
                    Backpressure: if an agent lags more than 32 frames, the stream downgrades to
                    snapshot-only mode until the catch-up window closes.
                  </p>
                </>
              )}
              {i === 3 && (
                <>
                  <p>
                    Phase 1 ships behind a tenant flag for internal services. Phase 2 dual-writes poll
                    and stream for two weeks, then cuts poll for tenants under 500 agents. Phase 3
                    retires the poll path.
                  </p>
                  <p>
                    Rollback is a single coordinator flag that re-enables poll and drains streams over
                    60 seconds.
                  </p>
                </>
              )}
              {i === 4 && (
                <>
                  <p>
                    Open questions: whether fan-out should use a dedicated pub/sub plane for tenants
                    above 2,000 agents, and how we surface epoch lag in the existing ops dashboard.
                  </p>
                  <p>
                    References: internal design notes on vector clocks (DN-441), the edge-proxy
                    reliability report from Q1, and the bandwidth study from the Tokyo PoP trial.
                  </p>
                </>
              )}
            </div>
            {/* Structural filler so sections are long enough to track */}
            <div className="mt-10 space-y-3" aria-hidden="true">
              {Array.from({ length: 3 }, (_, j) => (
                <div key={j} className="h-16 rounded-2xl border border-border/40 bg-muted/40" />
              ))}
            </div>
          </section>
        ))}
      </article>
    </div>
  )
}