RJBULK-APP/app/not-found.tsx

import Link from "next/link";
import { Button } from "@/components/ui/button";
import { BackButton } from "@/components/back-button";
import { getAuth } from "@/lib/auth";
import { Fuel, Home, FileText, Users, Truck } from "lucide-react";

/**
 * Branded 404 — sits outside the (auth)/(authenticated) route groups so it works
 * whether or not the user is signed in. Renders inside the global root layout
 * (Outfit font, app background, theme variables).
 */
export default async function NotFound() {
  // Best-effort auth probe — if signed in, the quick links go to the dashboard
  // and the in-app pages; if not, they go to /login.
  const { user } = await getAuth();
  const homeHref = user ? "/dashboard" : "/login";
  const links = user
    ? [
        { href: "/dashboard", label: "Dashboard", icon: Home },
        { href: "/delivery-notes", label: "Delivery notes", icon: FileText },
        { href: "/customers", label: "Customers", icon: Users },
        { href: "/suppliers", label: "Suppliers", icon: Truck },
      ]
    : [
        { href: "/login", label: "Sign in", icon: Home },
      ];

  return (
    <div className="relative min-h-screen overflow-hidden bg-muted/40">
      {/* Subtle background — brand orange radial glow, no flashy gradient */}
      <div
        aria-hidden
        className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-primary/10 via-transparent to-transparent"
      />

      <div className="relative mx-auto flex min-h-screen max-w-2xl flex-col items-center justify-center px-6 py-16 text-center">
        {/* Brand mark — same as the PDF header and sidebar logo */}
        <div className="mb-8 flex items-center gap-3">
          <div className="flex h-12 w-12 items-center justify-center rounded-md bg-primary text-primary-foreground">
            <Fuel className="h-6 w-6" />
          </div>
          <div className="text-left">
            <div className="text-sm font-semibold tracking-tight">RJ Bulk Supplies</div>
            <div className="text-xs text-muted-foreground">Fuel delivery specialists</div>
          </div>
        </div>

        {/* Big 404 — the number is the hero, but the rest of the page balances it */}
        <div className="relative">
          <div
            aria-hidden
            className="select-none text-[10rem] font-bold leading-none tracking-tighter text-primary/15 sm:text-[14rem]"
          >
            404
          </div>
          <div className="absolute inset-0 flex flex-col items-center justify-center">
            <h1 className="text-2xl font-semibold tracking-tight sm:text-3xl">
              We can&apos;t find that page
            </h1>
            <p className="mt-2 max-w-md text-sm text-muted-foreground sm:text-base">
              The link may be broken, or the page may have been moved. If you got here
              from inside the app, please report it — something probably needs fixing.
            </p>
          </div>
        </div>

        {/* Primary actions */}
        <div className="mt-10 flex flex-wrap items-center justify-center gap-3">
          <Button asChild size="lg">
            <Link href={homeHref}>
              <Home className="h-4 w-4" />
              {user ? "Back to dashboard" : "Go to sign in"}
            </Link>
          </Button>
          <BackButton />
        </div>

        {/* Quick links — useful when the user mistyped a deep URL */}
        <div className="mt-12 w-full max-w-md">
          <div className="mb-3 text-xs font-medium uppercase tracking-[0.14em] text-muted-foreground">
            Or jump to
          </div>
          <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
            {links.map((l) => {
              const Icon = l.icon;
              return (
                <Link
                  key={l.href}
                  href={l.href}
                  className="group flex flex-col items-center gap-1.5 rounded-md border bg-background px-3 py-3 text-xs transition-colors hover:border-primary/40 hover:bg-primary/5"
                >
                  <Icon className="h-4 w-4 text-muted-foreground group-hover:text-primary" />
                  <span className="font-medium">{l.label}</span>
                </Link>
              );
            })}
          </div>
        </div>

        <div className="mt-12 text-xs text-muted-foreground">
          Need help? Reach out at{" "}
          <a className="text-primary underline-offset-4 hover:underline" href="mailto:accounts@rjbulk.co.za">
            accounts@rjbulk.co.za
          </a>
        </div>
      </div>
    </div>
  );
}