import { Link } from '@tanstack/react-router'
import { Nav } from '@/components/layout/Nav'
import { Icon } from '@/components/ui/Icon'
import { usePageTitle } from '@/lib/usePageTitle'

/** The router's catch-all for unknown paths. */
export function NotFound() {
  usePageTitle('Not found')
  return (
    <div className="min-h-full">
      <Nav />
      <div className="mx-auto flex min-h-[60vh] w-full max-w-sm flex-col items-center justify-center gap-3 text-center">
        <Icon name="sprout" size={40} className="text-accent-2-500" />
        <h3>Nothing growing here</h3>
        <p className="text-[13px] text-ink-soft">That page doesn't exist — the link may be wrong or the page moved.</p>
        <Link to="/gardens" className="btn btn-primary mt-2 no-underline">
          Back to the gardens
        </Link>
      </div>
    </div>
  )
}