import type { Metadata } from "next";
import type { ReactElement } from "react";
import Link from "next/link";

export const metadata: Metadata = {
  title: "404 — Page Not Found | Mosaic Stack",
};

export default function NotFound(): ReactElement {
  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        minHeight: "100vh",
        background: "var(--bg)",
        padding: "24px",
        textAlign: "center",
        gap: "32px",
      }}
    >
      {/* Mosaic logo mark — inline spans replicating the 5-element logo */}
      <div
        style={{
          width: 48,
          height: 48,
          position: "relative",
          flexShrink: 0,
        }}
        role="img"
        aria-label="Mosaic logo"
      >
        {/* Top-left: blue */}
        <span
          style={{
            position: "absolute",
            top: 0,
            left: 0,
            width: 19,
            height: 19,
            borderRadius: 4,
            background: "var(--ms-blue-500)",
          }}
        />
        {/* Top-right: purple */}
        <span
          style={{
            position: "absolute",
            top: 0,
            right: 0,
            width: 19,
            height: 19,
            borderRadius: 4,
            background: "var(--ms-purple-500)",
          }}
        />
        {/* Bottom-right: teal */}
        <span
          style={{
            position: "absolute",
            bottom: 0,
            right: 0,
            width: 19,
            height: 19,
            borderRadius: 4,
            background: "var(--ms-teal-500)",
          }}
        />
        {/* Bottom-left: amber */}
        <span
          style={{
            position: "absolute",
            bottom: 0,
            left: 0,
            width: 19,
            height: 19,
            borderRadius: 4,
            background: "var(--ms-amber-500)",
          }}
        />
        {/* Center: pink circle */}
        <span
          style={{
            position: "absolute",
            top: "50%",
            left: "50%",
            transform: "translate(-50%, -50%)",
            width: 15,
            height: 15,
            borderRadius: "50%",
            background: "var(--ms-pink-500)",
          }}
        />
      </div>

      {/* 404 gradient text */}
      <h1
        style={{
          fontFamily: "var(--mono)",
          fontSize: "6rem",
          fontWeight: 700,
          lineHeight: 1,
          margin: 0,
          background: "linear-gradient(135deg, var(--ms-blue-400), var(--ms-purple-500))",
          WebkitBackgroundClip: "text",
          WebkitTextFillColor: "transparent",
          backgroundClip: "text",
        }}
      >
        404
      </h1>

      {/* Heading + description */}
      <div style={{ display: "flex", flexDirection: "column", gap: "12px" }}>
        <h2
          style={{
            fontSize: "1.5rem",
            fontWeight: 600,
            color: "var(--text)",
            margin: 0,
            letterSpacing: "-0.025em",
          }}
        >
          Page not found
        </h2>
        <p
          style={{
            fontSize: "0.9375rem",
            color: "var(--muted)",
            margin: 0,
            maxWidth: "400px",
            lineHeight: 1.6,
          }}
        >
          The page you&apos;re looking for doesn&apos;t exist or has been moved.
        </p>
      </div>

      {/* Dashboard link styled as button */}
      <Link
        href="/"
        style={{
          display: "inline-flex",
          alignItems: "center",
          justifyContent: "center",
          padding: "10px 24px",
          background: "var(--ms-blue-500)",
          color: "#ffffff",
          borderRadius: "var(--r)",
          fontSize: "0.875rem",
          fontWeight: 500,
          textDecoration: "none",
          transition: "opacity 0.15s ease",
        }}
      >
        Go to Dashboard
      </Link>

      {/* Subtle status footer */}
      <p
        style={{
          fontFamily: "var(--mono)",
          fontSize: "0.75rem",
          color: "var(--muted)",
          margin: 0,
          opacity: 0.6,
        }}
      >
        HTTP 404 — Not Found
      </p>
    </div>
  );
}