Flow Steps Navbar

import { NavbarFlowSteps } from '@/components/blocks/navbar-flow-steps'

'use client'

import { useMemo, useState } from 'react'
import { NavbarFlowSteps } from '@/components/blocks/navbar-flow-steps'

const STEPS = [
  { label: 'Details', href: '#details' },
  { label: 'Shipping', href: '#shipping' },
  { label: 'Payment', href: '#payment' },
  { label: 'Review', href: '#review' },
]

const BODIES = [
  {
    title: 'Contact details',
    body: 'We’ll send the packing slip and tracking link to this address. Business orders can add a PO number on the next step.',
    fields: ['Elena Voss', 'elena@northline.co', '+1 (415) 555-0142'],
  },
  {
    title: 'Shipping destination',
    body: 'Standard ground arrives in 3–5 business days. Freight to commercial docks needs a dock appointment code.',
    fields: ['Northline Studio', '1847 Bryant St, Suite 200', 'San Francisco, CA 94110'],
  },
  {
    title: 'Payment method',
    body: 'Card is charged when the order ships. Net-30 invoices require an approved trade account.',
    fields: ['Visa ending 4242', 'Billing ZIP 94110', 'Receipt to elena@northline.co'],
  },
  {
    title: 'Review & place order',
    body: 'Two Black Walnut desk legs, matte brass hardware, white-glove delivery window Tue–Thu.',
    fields: ['Subtotal $1,280', 'White-glove $95', 'Tax $113.63 · Total $1,488.63'],
  },
]

export default function NavbarFlowStepsDemo() {
  const [current, setCurrent] = useState(0)
  const panel = BODIES[current] ?? BODIES[0]!

  const steps = useMemo(
    () =>
      STEPS.map((s, i) => ({
        ...s,
        // Completed steps keep revisit hrefs; current and upcoming stay non-linked
        href: i < current ? s.href : undefined,
      })),
    [current]
  )

  return (
    <div className="min-h-[560px] bg-background">
      <NavbarFlowSteps
        brand={
          <span className="inline-flex items-baseline gap-1.5">
            Northline
            <span className="font-mono text-[10px] uppercase tracking-[0.2em] text-muted-foreground">
              shop
            </span>
          </span>
        }
        steps={steps}
        current={current}
        onStepClick={(index) => {
          if (index < current) setCurrent(index)
        }}
        exit={{ label: 'Save & exit', href: '#exit' }}
      />

      <div className="mx-auto max-w-lg px-4 py-10 sm:px-6">
        <p className="font-mono text-[11px] uppercase tracking-[0.2em] text-muted-foreground sm:text-xs">
          Checkout · order NL-2841
        </p>
        <h1 className="mt-3 text-balance text-2xl font-semibold tracking-tight sm:text-3xl">
          {panel.title}
        </h1>
        <p className="mt-3 text-sm leading-relaxed text-muted-foreground sm:text-base">
          {panel.body}
        </p>

        <ul className="mt-8 space-y-2">
          {panel.fields.map((line) => (
            <li
              key={line}
              className="rounded-2xl border border-border/60 bg-card px-4 py-3 text-sm text-foreground"
            >
              {line}
            </li>
          ))}
        </ul>

        <div className="mt-10 flex flex-wrap items-center gap-3">
          <button
            type="button"
            onClick={() => setCurrent((c) => Math.max(0, c - 1))}
            disabled={current === 0}
            className="inline-flex h-11 min-w-[5.5rem] items-center justify-center rounded-lg border border-border/60 bg-card px-4 text-sm font-medium text-foreground transition-colors hover:bg-accent disabled:pointer-events-none disabled:opacity-40 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:outline-hidden"
          >
            Back
          </button>
          <button
            type="button"
            onClick={() => setCurrent((c) => Math.min(STEPS.length - 1, c + 1))}
            disabled={current >= STEPS.length - 1}
            className="inline-flex h-11 min-w-[5.5rem] items-center justify-center rounded-lg bg-primary px-4 text-sm font-medium text-primary-foreground transition-transform duration-150 hover:scale-[1.02] active:scale-[0.98] disabled:pointer-events-none disabled:opacity-40 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:outline-hidden"
          >
            {current >= STEPS.length - 1 ? 'Place order' : 'Continue'}
          </button>
        </div>
      </div>
    </div>
  )
}