import Link from 'next/link';
import { Metadata } from 'next';
import React from 'react';
import ComponentsAuthLoginForm from '@/components/auth/components-auth-login-form';

type Props = {}

const LoginPage = (props: Props) => {
    return (
        <div className="relative min-h-screen overflow-hidden bg-[#060818] text-white">
            {/* Background gradient layer */}
            <div className="absolute inset-0 -z-10">
                <img
                    src="/assets/images/auth/bg-gradient.png"
                    alt="background gradient"
                    className="h-full w-full object-cover"
                />
                <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" />
            </div>

            {/* Background decorative objects */}
            <img
                src="/assets/images/auth/coming-soon-object1.png"
                alt="left decor"
                className="absolute left-0 top-1/2 hidden h-full max-h-[893px] -translate-y-1/2 brightness-125 md:block"
            />
            <img
                src="/assets/images/auth/coming-soon-object3.png"
                alt="right decor"
                className="absolute right-0 top-0 hidden h-[300px] brightness-125 md:block"
            />

            {/* Centered card wrapper */}
            <div className="relative flex min-h-screen items-center justify-center px-6 py-10 sm:px-16">
                <div
                    className="relative w-full max-w-[870px] rounded-2xl p-1
                               bg-[linear-gradient(45deg,#fffbe6_0%,rgba(255,251,230,0)_25%,rgba(255,251,230,0)_75%,#fffbe6_100%)]
                               dark:bg-[linear-gradient(52.22deg,#facc15_0%,rgba(250,204,21,0)_20%,rgba(250,204,21,0)_80%,#facc15_100%)]"
                >
                    {/* Inner card (glassmorphic effect) */}
                    <div className="relative z-10 rounded-2xl bg-white/10 px-8 py-16 backdrop-blur-lg dark:bg-white/10 lg:min-h-[600px]">
                        <div className="mx-auto w-full max-w-[440px] text-center">
                            {/* Header */}
                            <h1 className="text-4xl font-extrabold uppercase tracking-wide text-yellow-400 mb-2">
                                Sign In
                            </h1>
                            <p className="text-base font-medium text-gray-200 dark:text-gray-300 mb-8">
                                Enter your email and password to access your account.
                            </p>

                            {/* Login form */}
                            <ComponentsAuthLoginForm />

                            {/* Footer link */}
                            <div className="mt-6 text-sm text-gray-200 dark:text-gray-300">
                                Don’t have an account?{" "}
                                <Link
                                    href="/register"
                                    className="text-yellow-400 font-semibold underline transition hover:text-white"
                                >
                                    SIGN UP
                                </Link>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};


export default LoginPage