import { Metadata } from "next";
import { FaTriangleExclamation } from "react-icons/fa6";

import ClientNavbar from "@/components/pages/client/common/client-navbar";

export const metadata: Metadata = {
  title: "Invalid access link | Client Portal",
  description:
    "This client portal access link is invalid or has expired. Please contact your project manager for a new one.",
  robots: { index: false, follow: false },
};

export default function InvalidMagicLinkPage() {
  return (
    <div className="flex flex-col min-h-screen bg-others-mistyGray dark:bg-jet">
      <ClientNavbar clientPortalMode />
      <div className="flex flex-1 items-center justify-center px-4 py-12 font-noto">
        <div className="w-full max-w-md text-center">
          <div className="mx-auto mb-6 flex size-14 items-center justify-center rounded-full bg-red-100 text-red-600 dark:bg-red-900/30 dark:text-red-300">
            <FaTriangleExclamation className="size-5" />
          </div>
          <h1 className="font-inter text-2xl font-black text-gray-900 dark:text-white">
            Access link is invalid or expired
          </h1>
          <p className="mt-3 text-sm text-gray-500 dark:text-neutral-400">
            The link you used is not recognised, has been revoked, or has passed
            its expiry date. Please contact your project manager to request a
            new one.
          </p>
        </div>
      </div>
    </div>
  );
}