import ComponentsAuthLoginForm from '@/components/auth/components-auth-login-form';
import IconFacebookCircle from '@/components/icon/icon-facebook-circle';
import IconGoogle from '@/components/icon/icon-google';
import IconInstagram from '@/components/icon/icon-instagram';
import IconTwitter from '@/components/icon/icon-twitter';
import { Metadata } from 'next';
import Link from 'next/link';
import React from 'react';

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

const CoverLogin = () => {
    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,#006AE0_0%,#00B4DB_50%,#19D4FB_100%)]


                            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]">
                        
        
                {/*  Triple Logos  */}
   <div
  className="absolute top-6 left-1/2 z-10 -translate-x-1/2 
  flex flex-row flex-nowrap items-center justify-center 
  gap-3 sm:gap-5 md:gap-6 lg:gap-8 
  px-2 w-full max-w-[95%] sm:max-w-[90%] md:max-w-[85%] lg:max-w-[70%]
  overflow-hidden mb-6 sm:mb-8 ipad-fix"
>
  {/* Logo 1 */}
  <Link href="/" className="block flex-shrink-0">
    <img
      src="/assets/images/auth/turn14_logo.png"
      alt="Turn14"
      className="h-[16px] sm:h-[26px] md:h-[36px] lg:h-[48px] xl:h-[60px]
      w-auto object-contain opacity-90 hover:opacity-100 transition-opacity duration-300"
    />
  </Link>

  {/* Logo 2 */}
  <Link href="/" className="block flex-shrink-0">
    <img
      src="/assets/images/auth/data.webp"
      alt="Data4Autos"
      className="h-[20px] sm:h-[26px] md:h-[36px] lg:h-[48px] xl:h-[60px]
      w-auto object-contain opacity-90 hover:opacity-100 transition-opacity duration-300"
    />
  </Link>

  {/* Logo 3 */}
  <Link href="/" className="block flex-shrink-0">
    <img
      src="/assets/images/auth/ebay.webp"
      alt="eBay"
      className="h-[18px] sm:h-[26px] md:h-[36px] lg:h-[48px] xl:h-[60px]
      w-auto object-contain opacity-90 hover:opacity-100 transition-opacity duration-300"
    />
  </Link>
</div>





                        {/* Login Form Section */}
                        <div className="w-full max-w-[440px] mt-8 sm:mt-10 lg:mt-20">
                            <div className="mb-10">
                               <h1 className="text-3xl font-extrabold uppercase !leading-snug text-[#19d4fb] md:text-4xl">
                                    Sign In
                                </h1>

                                <p className="text-base font-bold leading-normal text-white-dark">
                                    Enter your email and password to login
                                </p>
                            </div>

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

                            {/* Divider */}
                            <div className="relative my-7 text-center md:mb-9">
                                <span className="absolute inset-x-0 top-1/2 h-px w-full -translate-y-1/2 bg-white-light dark:bg-white-dark"></span>
                                <span className="relative bg-white px-2 font-bold uppercase text-white-dark dark:bg-dark dark:text-white-light">
                                    or
                                </span>
                            </div>

                            {/* Social icons */}
                            <div className="mb-10 md:mb-[60px]">
                                <ul className="flex justify-center gap-3.5 text-white">
                                    <li>
                                       <Link
                                        href="#"
                                        className="inline-flex h-8 w-8 items-center justify-center rounded-full p-0 transition hover:scale-110"
                                        style={{
                                            background: 'linear-gradient(135deg, #0EA5E9 0%, #19D4FB 50%, #67E8F9 100%)'
                                        }}
                                        >
                                        <IconInstagram />
                                        </Link>

                                    </li>
                                    <li>
                                        <Link
                                            href="https://ebay.backend.data4autos.com/api/auth/facebook/"
                                            className="inline-flex h-8 w-8 items-center justify-center rounded-full p-0 transition hover:scale-110"
                                            style={{  background: 'linear-gradient(135deg, #0EA5E9 0%, #19D4FB 50%, #67E8F9 100%)' }}
                                        >
                                            <IconFacebookCircle />
                                        </Link>
                                    </li>
                                    {/* <li>
                                        <Link
                                            href="#"
                                            className="inline-flex h-8 w-8 items-center justify-center rounded-full p-0 transition hover:scale-110"
                                            style={{ background: 'linear-gradient(135deg, #1E3A8A 0%, #2563EB 50%, #00C6FF 100%)' }}
                                        >
                                            <IconTwitter fill={true} />
                                        </Link>
                                    </li> */}
                                    <li>
                                        <Link
                                            href="https://ebay.backend.data4autos.com/api/auth/google/"
                                            className="inline-flex h-8 w-8 items-center justify-center rounded-full p-0 transition hover:scale-110"
                                            style={{  background: 'linear-gradient(135deg, #0EA5E9 0%, #19D4FB 50%, #67E8F9 100%)' }}
                                        >
                                            <IconGoogle />
                                        </Link>
                                    </li>
                                </ul>
                            </div>

                            {/* Sign-up link */}
                            <div className="text-center dark:text-white">
                                Don&apos;t have an account?&nbsp;
                                <Link
                                    href="/signup"
                                    className="uppercase text-primary underline transition hover:text-black dark:hover:text-white"
                                >
                                    SIGN UP
                                </Link>
                            </div>
                        </div>

                        {/* Footer */}
                        <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 CoverLogin;