"use client";

export const dynamic = "force-dynamic";

import Image from "next/image";
import { RegistrationForm } from "@/components/RegistrationForm";
import { useEffect, useState } from "react";

export default function RegisterPage() {
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  return (
    <div className="grid min-h-screen bg-gradient-to-br from-white via-[#f4f8f5] to-white lg:grid-cols-2">
      <div className="flex flex-col gap-6 px-6 py-10 md:px-12 lg:px-16">
        <div
          className={`flex items-center justify-between select-none transition-all duration-700 ${
            mounted ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-4"
          }`}
        >
          <a href="/" className="flex items-center gap-2 transition-transform hover:scale-105">
            <Image
              src="/assets/logooxy.png"
              alt="Oxyfinz Logo"
              width={200}
              height={40}
              priority
            />
          </a>
        </div>

        <div className="flex flex-1 items-center justify-center">
          <div
            className={`w-full max-w-sm rounded-lg border border-white/60 bg-white/90 p-8 shadow-xl backdrop-blur transition-all duration-700 delay-200 ${
              mounted ? "opacity-100 translate-y-0 scale-100" : "opacity-0 translate-y-8 scale-95"
            }`}
          >
            <div
              className={`space-y-2 text-center transition-all duration-700 delay-300 ${
                mounted ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"
              }`}
            >
              <h1 className="text-2xl font-semibold text-slate-800">Create your account</h1>
              <p className="text-sm text-slate-500">
                Register to access dashboards and manage your portfolio with Oxyfinz.
              </p>
            </div>
            <div
              className={`mt-8 space-y-3 transition-all duration-700 delay-400 ${
                mounted ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"
              }`}
            >
              <RegistrationForm />
            </div>
            <p
              className={`mt-6 text-center text-xs text-slate-500 transition-all duration-700 delay-500 ${
                mounted ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"
              }`}
            >
              Need assistance?{" "}
              <a
                href="mailto:support@oxyfinz.com"
                className="font-semibold text-[#428B4D] hover:underline transition-colors"
              >
                support@oxyfinz.com
              </a>
            </p>
          </div>
        </div>
      </div>

      <div
        className={`relative hidden lg:block transition-all duration-1000 delay-300 ${
          mounted ? "opacity-100 scale-100" : "opacity-0 scale-105"
        }`}
      >
        <Image
          src="/assets/Signin_1.png"
          alt="Register background"
          fill
          sizes="50vw"
          priority
          className="object-cover object-center"
        />
      </div>
    </div>
  );
}