import { signIn } from "@/auth";
import Image from "next/image";

export default function LoginPage() {
  return (
    <main className="ampelos-login min-h-screen overflow-hidden text-ampelos-parchment">
      <div className="ampelos-login__background" aria-hidden="true" />
      <section className="relative z-10 flex min-h-screen items-center px-6 py-12 md:px-12">
        <div className="max-w-2xl">
          {/* Intrinsic size is the source's own 320px square. The old 108 was
              below the rendered box on a retina screen, so the seal was being
              stretched rather than drawn. */}
          <Image
            src="/ampelos.png"
            alt="Ampelos"
            width={320}
            height={320}
            priority
            className="mb-8 h-28 w-28 rounded-full border border-ampelos-gold/35 bg-ampelos-ink/45 object-cover p-1 shadow-[0_18px_55px_rgba(0,0,0,0.45)] md:h-36 md:w-36"
          />
          <p className="text-xs font-semibold uppercase tracking-[0.42em] text-ampelos-gold">STICKNIFE</p>
          <h1 className="mt-4 max-w-xl font-serif text-5xl font-semibold leading-none text-ampelos-parchment md:text-7xl">
            Ampelos gathers the fruit of Dionysus.
          </h1>
          <p className="mt-6 max-w-xl text-base leading-7 text-ampelos-muted md:text-lg">
            A vineyard of entertainment, pressed from the Dionysus collection and poured into your Watch Now tray.
          </p>
          <form
            className="mt-9"
            action={async () => {
              "use server";
              await signIn("authentik", { redirectTo: "/" });
            }}
          >
            <button type="submit" className="ampelos-stone-button px-6 py-3 text-sm">
              Log in with Sticknife
            </button>
          </form>
        </div>
      </section>
    </main>
  );
}
