Bottom Tabs Navbar

import { NavbarBottomTabs } from '@/components/blocks/navbar-bottom-tabs'

'use client'

import { useEffect, useState } from 'react'
import { Home, Search, Bookmark, User, Plus } from 'lucide-react'
import { NavbarBottomTabs } from '@/components/blocks/navbar-bottom-tabs'

const LINKS = [
  { label: 'Home', href: '#home', icon: Home },
  { label: 'Browse', href: '#browse', icon: Search },
  { label: 'Saved', href: '#saved', icon: Bookmark },
  { label: 'Profile', href: '#profile', icon: User },
]

const PAGES: Record<string, { title: string; body: string; meta: string }> = {
  '#home': {
    meta: 'Field Notes · Today',
    title: 'Twelve routes near the waterfront',
    body: 'Quiet morning light on the Embarcadero loop. Three new pins from the cartography team, and a steep grade alert on the Twin Peaks connector.',
  },
  '#browse': {
    meta: 'Catalog · 248 routes',
    title: 'Filter by surface, grade, and shade',
    body: 'Packed dirt, boardwalk, and granite stairs. Sort by elevation gain or by how many riders finished under forty minutes last weekend.',
  },
  '#saved': {
    meta: 'Library · 19 collections',
    title: 'Weekend recovery loops',
    body: 'Six under 8 km, all with a coffee stop within 400 m of the trailhead. Shared with the East Bay group last Thursday.',
  },
  '#profile': {
    meta: 'Account · Miles Chen',
    title: '142 km this month',
    body: 'Personal best on the Marin Headlands ridge: 1h 18m. Strava sync is current; export last week’s GPX from Settings.',
  },
}

export default function NavbarBottomTabsDemo() {
  const [active, setActive] = useState('#home')
  const page = PAGES[active] ?? PAGES['#home']!

  // Demo-only: keep the active tab in sync without a real router
  useEffect(() => {
    const onClick = (e: MouseEvent) => {
      const anchor = (e.target as HTMLElement).closest('a')
      if (!anchor) return
      const href = anchor.getAttribute('href')
      if (!href || !href.startsWith('#')) return
      if (href === '#compose') return
      e.preventDefault()
      if (LINKS.some((l) => l.href === href)) setActive(href)
    }
    document.addEventListener('click', onClick)
    return () => document.removeEventListener('click', onClick)
  }, [])

  return (
    <div className="relative min-h-[640px] bg-background">
      <NavbarBottomTabs
        brand={
          <span className="inline-flex items-baseline gap-1.5">
            Trailmark
            <span className="font-mono text-[10px] uppercase tracking-[0.2em] text-muted-foreground">
              maps
            </span>
          </span>
        }
        links={LINKS}
        active={active}
        action={{ label: 'New route', href: '#compose', icon: Plus }}
      />

      {/* pb clears the fixed bottom deck + safe-area on mobile */}
      <div className="mx-auto max-w-2xl px-4 pb-28 pt-8 sm:px-6 md:pb-12 md:pt-10">
        <p className="font-mono text-[11px] uppercase tracking-[0.2em] text-muted-foreground sm:text-xs">
          {page.meta}
        </p>
        <h1 className="mt-3 text-balance text-2xl font-semibold tracking-tight sm:text-3xl">
          {page.title}
        </h1>
        <p className="mt-3 text-sm leading-relaxed text-muted-foreground sm:text-base">
          {page.body}
        </p>

        <div className="mt-10 space-y-3">
          {[
            { label: 'Embarcadero dawn loop', detail: '6.2 km · 48 m gain · packed dirt' },
            { label: 'Twin Peaks connector', detail: '3.8 km · 214 m gain · grade alert' },
            { label: 'Crissy Field out-and-back', detail: '4.1 km · flat · boardwalk' },
            { label: 'Marin ridge personal best', detail: '11.4 km · 1h 18m · granite' },
          ].map((row) => (
            <article
              key={row.label}
              className="rounded-2xl border border-border/60 bg-card px-5 py-4"
            >
              <h2 className="text-sm font-semibold tracking-tight text-foreground">
                {row.label}
              </h2>
              <p className="mt-1 font-mono text-[11px] text-muted-foreground sm:text-xs">
                {row.detail}
              </p>
            </article>
          ))}
        </div>
      </div>
    </div>
  )
}