import type { Metadata } from "next";
import { signIn } from "@/auth";
import RookLogo from "@/components/RookLogo";




export const metadata: Metadata = {
  title: "Staff Login | Rook Creative Preview Platform",
  description: "Secure staff access to the Rook Creative Preview Platform.",
};



function MicrosoftLogo() {
  return (
    <span
      aria-hidden="true"
      className="grid h-5 w-5 shrink-0 grid-cols-2 gap-[2px]"
    >
      <span className="bg-[#F25022]" />
      <span className="bg-[#7FBA00]" />
      <span className="bg-[#00A4EF]" />
      <span className="bg-[#FFB900]" />
    </span>
  );
}

function CheckIcon() {
  return (
    <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-[#309FC3]/15 text-[#79D4EF]">
      <svg
        aria-hidden="true"
        className="h-3.5 w-3.5"
        viewBox="0 0 20 20"
        fill="none"
      >
        <path
          d="m5 10 3 3 7-7"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
      </svg>
    </span>
  );
}

export default function LoginPage() {
  return (
    <main className="min-h-screen bg-[#071722] font-sans">
      <div className="grid min-h-screen lg:grid-cols-[1.08fr_0.92fr]">
        <section className="relative hidden overflow-hidden px-12 py-10 text-white lg:flex lg:flex-col xl:px-20 xl:py-14">
          <div
            aria-hidden="true"
            className="absolute inset-0 opacity-40"
            style={{
              backgroundImage:
                "linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px)",
              backgroundSize: "36px 36px",
            }}
          />

          <div
            aria-hidden="true"
            className="absolute -left-32 top-1/3 h-96 w-96 rounded-full bg-[#309FC3]/20 blur-[110px]"
          />

          <div
            aria-hidden="true"
            className="absolute -right-24 -top-24 h-80 w-80 rounded-full bg-[#79D4EF]/10 blur-[100px]"
          />

          <div
            aria-hidden="true"
            className="absolute bottom-0 right-0 h-72 w-72 rounded-full bg-[#309FC3]/10 blur-[100px]"
          />

          <div className="relative z-10">
            <RookLogo />
          </div>

          <div className="relative z-10 my-auto max-w-2xl py-16">
            <div className="mb-7 inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.06] px-4 py-2 backdrop-blur-md">
              <span className="h-2 w-2 rounded-full bg-[#79D4EF] shadow-[0_0_12px_rgba(121,212,239,0.8)]" />
              <span className="text-xs font-semibold tracking-[0.16em] text-[#BDECF8] uppercase">
                A Rook Digital Exclusive Platform 
              </span>
            </div>

            <h1 className="max-w-xl text-5xl leading-[1.08] font-semibold tracking-[-0.04em] xl:text-6xl">
              Creative reviews
              <span className="mt-2 block text-[#79D4EF]">
                With Rook
              </span>
            </h1>

            

            <div className="mt-12 max-w-xl rounded-3xl border border-white/10 bg-white/[0.055] p-6 shadow-2xl shadow-black/20 backdrop-blur-xl">
              <div className="grid gap-5 sm:grid-cols-3">
                <div className="flex items-start gap-3 sm:block">
                  <CheckIcon />
                  <p className="mt-0 text-sm leading-6 text-slate-200 sm:mt-3">
                    Create Client Previews
                  </p>
                </div>

                <div className="flex items-start gap-3 sm:block">
                  <CheckIcon />
                  <p className="mt-0 text-sm leading-6 text-slate-200 sm:mt-3">
                    Collect Client Decisions
                  </p>
                </div>

                <div className="flex items-start gap-3 sm:block">
                  <CheckIcon />
                  <p className="mt-0 text-sm leading-6 text-slate-200 sm:mt-3">
                    Track Client Feedback
                  </p>
                </div>
              </div>
            </div>
          </div>

          <div className="relative z-10 flex items-center justify-between border-t border-white/10 pt-6 text-xs text-slate-400">
            <span>Staff Portal</span>

            <span className="flex items-center gap-2">
              <span className="h-1.5 w-1.5 rounded-full bg-auto" />
              
            </span>
          </div>
        </section>

        <section className="relative flex min-h-screen items-center justify-center overflow-hidden bg-[#F3F8FA] px-5 py-10 sm:px-8 lg:rounded-l-[3rem] lg:px-12">
          <div
            aria-hidden="true"
            className="absolute -right-28 -top-28 h-80 w-80 rounded-full bg-[#309FC3]/10 blur-3xl"
          />

          <div
            aria-hidden="true"
            className="absolute -bottom-40 -left-32 h-96 w-96 rounded-full bg-[#309FC3]/10 blur-3xl"
          />

          <div className="relative z-10 w-full max-w-[460px]">
   <div className="mb-8 flex justify-center lg:hidden">
  <div className="rounded-2xl bg-[#071827] px-5 py-2 shadow-lg">
    <RookLogo />
  </div>
</div>

            <div className="rounded-[2rem] border border-white bg-white p-7 shadow-[0_24px_80px_rgba(14,51,67,0.12)] sm:p-10">
              <div className="mb-8">
                <div className="mb-6 inline-flex items-center gap-2 rounded-full border border-[#309FC3]/15 bg-[#309FC3]/[0.07] px-3.5 py-2">
                  <svg
                    aria-hidden="true"
                    className="h-4 w-4 text-[#309FC3]"
                    viewBox="0 0 20 20"
                    fill="none"
                  >
                    <rect
                      x="4"
                      y="8"
                      width="12"
                      height="9"
                      rx="2"
                      stroke="currentColor"
                      strokeWidth="1.7"
                    />
                    <path
                      d="M7 8V6a3 3 0 0 1 6 0v2"
                      stroke="currentColor"
                      strokeWidth="1.7"
                      strokeLinecap="round"
                    />
                  </svg>

                  <span className="text-xs font-semibold tracking-wide text-[#257F9D]">
                    SECURE STAFF ACCESS 
                  </span>
                </div>

                <h2 className="text-3xl font-semibold tracking-[-0.035em] text-[#071722] sm:text-4xl">
                  Welcome back 
                </h2>

                <p className="mt-3 text-[15px] leading-7 text-slate-500">
                  Sign in with your Rook Microsoft 365 account to access the
                  administration dashboard.
                </p>
              </div>

<form
  action={async () => {
    "use server";
    await signIn("microsoft-entra-id", {
  redirectTo: "/admin/previews/new",
});
  }}
>
              <button
                type="submit"
                className="group flex w-full items-center justify-between rounded-xl border border-slate-200 bg-white px-5 py-4 text-left shadow-sm transition-all duration-200 hover:-translate-y-0.5 hover:border-[#309FC3]/40 hover:shadow-lg hover:shadow-[#309FC3]/10 focus-visible:ring-4 focus-visible:ring-[#309FC3]/20 focus-visible:outline-none"
              >
                <span className="flex items-center gap-4">
                  <MicrosoftLogo />

                  <span className="text-sm font-semibold text-slate-800">
                    Continue with Microsoft
                  </span>
                </span>

                <svg
                  aria-hidden="true"
                  className="h-5 w-5 text-slate-400 transition-transform duration-200 group-hover:translate-x-1 group-hover:text-[#309FC3]"
                  viewBox="0 0 20 20"
                  fill="none"
                >
                  <path
                    d="M4 10h12m-5-5 5 5-5 5"
                    stroke="currentColor"
                    strokeWidth="1.7"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                </svg>
              </button>
              </form>

              <div className="mt-6 flex gap-3 rounded-2xl border border-[#309FC3]/15 bg-[#309FC3]/[0.055] p-4">
                <div className="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-white text-[#309FC3] shadow-sm">
                  <svg
                    aria-hidden="true"
                    className="h-4 w-4"
                    viewBox="0 0 20 20"
                    fill="none"
                  >
                    <path
                      d="M10 2.5 16 5v4.6c0 3.7-2.4 6.3-6 7.9-3.6-1.6-6-4.2-6-7.9V5l6-2.5Z"
                      stroke="currentColor"
                      strokeWidth="1.6"
                      strokeLinejoin="round"
                    />
                    <path
                      d="m7.5 10 1.7 1.7 3.4-3.6"
                      stroke="currentColor"
                      strokeWidth="1.6"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    />
                  </svg>
                </div>

                <div>
                  <p className="text-sm font-semibold text-[#123445]">
                    Authorised Rook staff only
                  </p>
                  <p className="mt-1 text-xs leading-5 text-slate-500">
                    Access will be verified securely through the company’s
                    Microsoft organisation.
                  </p>
                </div>
              </div>

              <div className="mt-8 border-t border-slate-100 pt-6 text-center">
                <p className="text-xs leading-5 text-slate-400">
                 
                </p>
              </div>
            </div>

            <div className="mt-7 flex items-center justify-center gap-2 text-center text-xs text-slate-400">
              <svg
                aria-hidden="true"
                className="h-3.5 w-3.5"
                viewBox="0 0 20 20"
                fill="none"
              >
                <rect
                  x="4"
                  y="8"
                  width="12"
                  height="9"
                  rx="2"
                  stroke="currentColor"
                  strokeWidth="1.7"
                />
                <path
                  d="M7 8V6a3 3 0 0 1 6 0v2"
                  stroke="currentColor"
                  strokeWidth="1.7"
                />
              </svg>

              <span>Protected access · Rook Digital</span>
            </div>
          </div>
        </section>
      </div>
    </main>
  );
}