export default function RootNotFound() {
  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        gap: "1rem",
        minHeight: "60vh",
        padding: "2rem",
        textAlign: "center",
        fontFamily: "system-ui, sans-serif",
      }}
    >
      <h1 style={{ fontSize: "1.5rem", fontWeight: 700 }}>Page not found</h1>
      <p style={{ color: "#666", maxWidth: "28rem" }}>
        The page you&apos;re looking for doesn&apos;t exist or may have been moved.
      </p>
      <a
        href="/"
        style={{
          padding: "0.5rem 1rem",
          borderRadius: "0.5rem",
          background: "#111",
          color: "#fff",
          textDecoration: "none",
          fontSize: "0.875rem",
        }}
      >
        Back home
      </a>
    </div>
  );
}