"use client";

import Link from "next/link";
import { BeadsLogo } from "@/components/BeadsLogo";

/**
 * Custom 404 page for Heartbeads.
 * Minimal, elegant — matches the clean graph-visualization design language.
 * The flatline ECG + heartbeat logo gives it character without being noisy.
 */
export default function NotFound() {
  return (
    <div className="h-full flex flex-col items-center justify-center bg-white text-zinc-800 px-6 select-none">
      {/* Flatline ECG trace — the bead has no pulse here */}
      <div className="relative w-full max-w-md mb-8">
        <svg
          viewBox="0 0 400 40"
          fill="none"
          className="w-full text-zinc-200"
          aria-hidden="true"
        >
          <line
            x1="0"
            y1="20"
            x2="400"
            y2="20"
            stroke="currentColor"
            strokeWidth="1.5"
            strokeLinecap="round"
            strokeDasharray="4 6"
            opacity="0.6"
          />
        </svg>

        {/* The heartbeat logo pulses in the center — life in the void */}
        <div className="absolute inset-0 flex items-center justify-center">
          <div className="bg-white px-4">
            <BeadsLogo className="w-10 h-10 text-emerald-500" />
          </div>
        </div>
      </div>

      {/* 404 number */}
      <h1 className="text-7xl font-extralight tracking-tight text-zinc-300 mb-3 animate-fade-in">
        404
      </h1>

      {/* Tagline */}
      <p className="text-lg text-zinc-500 font-light mb-2 animate-fade-in" style={{ animationDelay: "0.05s" }}>
        This bead has no pulse.
      </p>

      {/* Subtext */}
      <p className="text-sm text-zinc-400 mb-8 text-center max-w-xs animate-fade-in" style={{ animationDelay: "0.1s" }}>
        We searched the entire dependency graph, but this node doesn&apos;t exist.
        Maybe it was closed, maybe it never was.
      </p>

      {/* Back to graph button */}
      <Link
        href="/"
        className="inline-flex items-center gap-2 px-5 py-2.5 rounded-full bg-emerald-500 text-white text-sm font-medium shadow-sm hover:bg-emerald-600 hover:shadow-md transition-all duration-200 ease-out animate-fade-in"
        style={{ animationDelay: "0.15s" }}
      >
        <svg
          viewBox="0 0 16 16"
          fill="none"
          className="w-4 h-4"
          aria-hidden="true"
        >
          <path
            d="M10 12L6 8l4-4"
            stroke="currentColor"
            strokeWidth="1.5"
            strokeLinecap="round"
            strokeLinejoin="round"
          />
        </svg>
        Back to the heartbeat
      </Link>

      {/* Tiny footer quip */}
      <p
        className="mt-12 text-[11px] text-zinc-300 animate-fade-in"
        style={{ animationDelay: "0.2s" }}
      >
        error code: BEAD_NOT_FOUND &middot; flatline detected
      </p>
    </div>
  );
}