404 3

import Image from "next/image";
import Link from "next/link";

import { Button } from "@/components/ui/button";

import type { NotFoundContent } from "../_types/not-found";
import { defaultNotFound3Content } from "./data";

/** A full-bleed photo 404 with two actions and a row of places to go next. */
export default function NotFound3({
  content = defaultNotFound3Content,
}: {
  content?: NotFoundContent;
}) {
  const [primaryAction, secondaryAction] = content.actions;

  return (
    <section className="relative isolate flex min-h-[80vh] flex-col justify-end pt-28 pb-20 sm:pb-28">
      <div className="absolute inset-0 -z-10 overflow-hidden">
        <Image
          alt={content.image.alt}
          className="object-cover object-center"
          fill
          priority
          sizes="100vw"
          src={content.image.src}
        />
        <div className="absolute inset-0 bg-linear-to-t from-primary/90 via-primary/50 to-primary/30" />
        <div className="absolute inset-0 bg-linear-to-r from-primary/70 via-primary/20 to-transparent" />
      </div>

      <div className="mx-auto w-full max-w-7xl px-5 sm:px-8 lg:px-12">
        <p className="inline-flex items-center gap-2 font-medium text-[0.6875rem] text-white/50 uppercase tracking-[0.22em]">
          <span className="size-1 bg-secondary" />
          {content.eyebrow}
        </p>

        <h1 className="mt-5 max-w-3xl font-display text-5xl text-white leading-[1.04] sm:text-6xl">
          {content.title}
        </h1>

        <p className="mt-6 max-w-lg text-white/70 leading-relaxed">
          {content.description}
        </p>

        <div className="mt-10 flex flex-wrap items-center gap-3">
          {primaryAction && (
            <Button
              className="border-none bg-white px-7 text-primary shadow-none hover:bg-white/90"
              render={<Link href={primaryAction.href} />}
              size="xl"
            >
              {primaryAction.label}
            </Button>
          )}
          {secondaryAction && (
            <Button
              className="border-white/40 bg-transparent px-7 text-white shadow-none before:shadow-none hover:bg-white/10 dark:bg-transparent"
              render={<Link href={secondaryAction.href} />}
              size="xl"
              variant="outline"
            >
              {secondaryAction.label}
            </Button>
          )}
        </div>

        {content.links.length > 0 && (
          <ul className="mt-12 grid gap-px overflow-hidden rounded-lg border-white/15 border-t bg-white/15 sm:grid-cols-2 lg:grid-cols-4">
            {content.links.map((item) => (
              <li key={item.href}>
                <Link
                  className="block h-full bg-primary/50 p-6 text-sm text-white/80 backdrop-blur-sm transition-colors hover:bg-primary/70 hover:text-white"
                  href={item.href}
                >
                  {item.label}
                </Link>
              </li>
            ))}
          </ul>
        )}
      </div>
    </section>
  );
}