Status Banner Navbar

import { NavbarStatusBanner } from '@/components/blocks/navbar-status-banner'

'use client'

import { useState } from 'react'
import { NavbarStatusBanner } from '@/components/blocks/navbar-status-banner'

export default function NavbarStatusBannerDemo() {
  const [variant, setVariant] = useState<'info' | 'incident'>('info')
  const [laneKey, setLaneKey] = useState(0)

  const status =
    variant === 'info'
      ? {
          message:
            'Scheduled maintenance window: payments API, Sunday 02:00–04:00 UTC.',
          link: { label: 'View status', href: '#status' },
          variant: 'info' as const,
        }
      : {
          message:
            'Elevated latency on EU settlement rails, retry queues are healthy.',
          link: { label: 'Incident notes', href: '#incident' },
          variant: 'incident' as const,
        }

  return (
    <div className="min-h-[200vh]">
      <NavbarStatusBanner
        key={laneKey}
        brand={
          <span className="inline-flex items-baseline gap-1.5">
            Harbor
            <span className="font-mono text-[10px] uppercase tracking-[0.2em] text-muted-foreground">
              pay
            </span>
          </span>
        }
        links={[
          { label: 'Product', href: '#product' },
          { label: 'Pricing', href: '#pricing' },
          { label: 'Developers', href: '#developers' },
          { label: 'Status', href: '#status' },
        ]}
        cta={{ label: 'Open console', href: '#console' }}
        status={status}
        onDismiss={() => {
          /* parent would persist; demo just lets the lane collapse */
        }}
      />

      <div className="mx-auto max-w-6xl px-4 pt-10 sm:px-6">
        <p className="font-mono text-[11px] uppercase tracking-[0.2em] text-muted-foreground">
          Site chrome
        </p>
        <h1 className="mt-3 max-w-2xl text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
          One header, one status lane, dismiss and the seam closes cleanly.
        </h1>
        <p className="mt-4 max-w-lg text-sm leading-relaxed text-muted-foreground sm:text-base">
          Harbor Pay fuses announcements into the sticky bar so you never stack two competing
          sticky regions. Scroll to condense the glass; dismiss to collapse the lane.
        </p>

        <div className="mt-8 flex flex-wrap gap-2">
          <button
            type="button"
            onClick={() => {
              setVariant('info')
              setLaneKey((k) => k + 1)
            }}
            className="inline-flex h-10 items-center rounded-lg border border-border/60 bg-card px-3 text-sm font-medium text-foreground transition-colors hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:outline-hidden"
          >
            Show info lane
          </button>
          <button
            type="button"
            onClick={() => {
              setVariant('incident')
              setLaneKey((k) => k + 1)
            }}
            className="inline-flex h-10 items-center rounded-lg border border-border/60 bg-card px-3 text-sm font-medium text-foreground transition-colors hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:outline-hidden"
          >
            Show incident lane
          </button>
        </div>

        <div className="mt-16 grid gap-4 sm:grid-cols-3">
          {[
            { label: 'Volume today', value: '$12.4M' },
            { label: 'Success rate', value: '99.97%' },
            { label: 'P95 settle', value: '1.8s' },
          ].map((stat) => (
            <div
              key={stat.label}
              className="rounded-2xl border border-border/60 bg-card px-5 py-5"
            >
              <p className="font-mono text-[11px] uppercase tracking-[0.2em] text-muted-foreground">
                {stat.label}
              </p>
              <p className="mt-2 text-2xl font-semibold tracking-tight text-foreground">
                {stat.value}
              </p>
            </div>
          ))}
        </div>

        <div className="mt-8 space-y-4">
          {Array.from({ length: 8 }, (_, i) => (
            <div key={i} className="h-20 rounded-2xl border border-border/60 bg-card" />
          ))}
        </div>
      </div>
    </div>
  )
}