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

export const metadata: Metadata = {
    title: 'Unlock Cover',
};

const CoverLockScreen = () => {
    return (
        <div>
                {/* Background */}
            <div className="absolute inset-0">
                <img
                    src="/assets/images/auth/bg-gradient.png"
                    alt="background"
                    className="h-full w-full object-cover"
                />
            </div>

            <div className="relative flex min-h-screen items-center justify-center bg-[url(/assets/images/auth/bg.png)] bg-cover bg-center bg-no-repeat px-6 py-10 dark:bg-[#060818] sm:px-16">
                {/* Decorative images */}
                <img
                    src="/assets/images/auth/coming-soon-object1.png"
                    alt="image"
                    className="absolute left-0 top-1/2 h-full max-h-[893px] -translate-y-1/2"
                />
                <img
                    src="/assets/images/auth/coming-soon-object2.png"
                    alt="image"
                    className="absolute left-24 top-0 h-40 md:left-[30%]"
                />
                <img
                    src="/assets/images/auth/coming-soon-object3.png"
                    alt="image"
                    className="absolute right-0 top-0 h-[300px]"
                />
                <img
                    src="/assets/images/auth/polygon-object.png"
                    alt="image"
                    className="absolute bottom-0 end-[28%]"
                />

                {/* Main container */}
                <div className="relative flex w-full max-w-[1502px] flex-col justify-between overflow-hidden rounded-md bg-white/60 backdrop-blur-lg dark:bg-black/50 lg:min-h-[758px] lg:flex-row lg:gap-10 xl:gap-0">
                    
                    {/* LEFT SIDE */}
                    <div
                        className="relative hidden w-full items-center justify-center
                            bg-[linear-gradient(135deg,#1E3A8A_40%,#2563EB_80%)]
                            p-5 lg:inline-flex lg:max-w-[835px]
                            xl:-ms-28 ltr:xl:skew-x-[14deg] rtl:xl:skew-x-[-14deg]"
                    >
                        <div className="absolute inset-y-0 w-8 from-primary/10 via-transparent to-transparent ltr:-right-10 ltr:bg-gradient-to-r rtl:-left-10 rtl:bg-gradient-to-l xl:w-16 ltr:xl:-right-20 rtl:xl:-left-20"></div>

                        {/* Centered Image */}
                        <div className="ltr:xl:-skew-x-[14deg] rtl:xl:skew-x-[14deg] flex items-center justify-center w-full">
                            <img
                                src="/assets/images/auth/sign-in.webp"
                                alt="Login Illustration"
                                className="max-w-[430px] w-full"
                            />
                        </div>
                    </div>
                    {/* RIGHT SIDE */}
                    <div className="relative flex w-full flex-col items-center justify-center gap-6 px-4 pb-16 pt-10 sm:px-6 lg:max-w-[667px]">
                        
                        {/* ✅ Top-right logo (responsive + transparent) */}
                        <div className="absolute right-4 top-0 sm:top-2 md:top-3 lg:top-0 z-10">
                            <Link href="/" className="block">
                                <img
                                    src="/assets/images/auth/logo_tri.png"
                                    alt="data4autos"
                                    className="h-[100px] sm:h-[120px] lg:h-[140px] w-auto max-w-none object-contain opacity-90 hover:opacity-100 transition-opacity duration-300"
                                />
                            </Link>
                        </div>
                       
                        <div className="w-full max-w-[440px] lg:mt-16">
                            <div className="mb-10 flex items-center">
                                <div className="flex h-16 w-16 items-end justify-center overflow-hidden rounded-full bg-[#00AB55] ltr:mr-4 rtl:ml-4">
                                    <img src="/assets/images/auth/user.png" className="w-full object-cover" alt="images" />
                                </div>
                                <div className="flex-1">
                                    <h4 className="text-2xl dark:text-white">Shaun Park</h4>
                                    <p className="text-white-dark">Enter your password to unlock your ID</p>
                                </div>
                            </div>
                            <ComponentsAuthUnlockForm />
                        </div>
                          <p className="absolute bottom-6 w-full text-center dark:text-white">
                            © {new Date().getFullYear()}. Data4Autos All Rights Reserved.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default CoverLockScreen;