import Link from "next/link";
import Image from "next/image";

export default function RegisterPage() {
  return (
    <main className="grid min-h-screen grid-cols-1 bg-benell-bg md:grid-cols-2">
      <section className="flex items-center justify-center p-6 md:p-12">
        <div className="w-full max-w-md">
          <Image
            src="/brand/logo.webp"
            alt="Casa Benell"
            width={110}
            height={76}
            className="h-20 w-auto rounded-lg border border-benell-stroke object-contain object-center"
            priority
          />
          <h1 className="text-display mt-8 text-benell-text">Registro deshabilitado</h1>
          <div className="mt-7 rounded-benell border border-benell-stroke bg-benell-surface p-5 shadow-benell md:p-7">
            <p className="text-body text-benell-text-soft">
              El alta de cuentas se gestiona por invitación.
              Cuando un dueño o líder te invite, recibirás por correo el enlace para crear tu contraseña y activar tu acceso.
            </p>
            <div className="mt-4">
              <Link href="/login" className="text-label font-semibold text-benell-brown hover:underline">
                Volver a login
              </Link>
            </div>
          </div>
        </div>
      </section>
      <section className="relative hidden overflow-hidden bg-[#f2ece0] md:block">
        <Image
          src="/brand/mascot.png"
          alt="Mascota Casa Benell"
          width={500}
          height={500}
          className="absolute bottom-8 right-8 h-72 w-72 rounded-benell border border-benell-stroke object-contain object-bottom"
        />
      </section>
    </main>
  );
}
