import React from "react";
import IconGoogle from "@/components/icon/icon-google";
import Link from "next/link";
import ComponentsAuthRegisterForm from "@/components/auth/components-auth-register-form";
export default function PremiumLoginPage() {
    return (
        <div className="min-h-screen w-full flex items-center justify-center bg-black relative overflow-hidden">
            {/* Background abstract neon lines */}
            {/* <div
                className="absolute inset-0 bg-cover bg-center opacity-60"
                style={{
                    backgroundImage:
                        "url('https://as2.ftcdn.net/jpg/03/43/34/57/1000_F_343345747_wJfBUpacjstgfxqK6XyH45jXXZTeHx44.jpg')",
                }}
            ></div> */}
             {/* 🔥 Background YouTube Video */}
            <div className="absolute inset-0 w-full h-full overflow-hidden">
                {/* <iframe
                    className="w-full h-full object-cover"
                    src="https://www.youtube.com/embed/g6qV2cQ2Fhw?autoplay=1&mute=1&controls=0&showinfo=0&rel=0&loop=1&playlist=g6qV2cQ2Fhw"
                    allow="autoplay; fullscreen"
                    allowFullScreen
                /> */}
                <video
                    className="w-full h-full object-cover"
                    autoPlay
                    loop
                    muted
                    playsInline
                >
                    <source src="/assets/images/auth/D4A_ebay_background-1.mp4" type="video/mp4" />
                </video>
            </div>
            {/* Glass card */}
            <div className="relative z-10 bg-white/10 backdrop-blur-xl border border-white/20 shadow-2xl rounded-2xl p-10 w-full max-w-lg text-white animate-fadeIn">
                {/* <h2 className="text-3xl font-semibold text-center mb-8">Login</h2> */}
                {/* Login Form Section */}
                <div className="w-full max-w-[440px] ">
                    <div className="mb-10">
                        <h1 className="text-3xl font-extrabold uppercase !leading-snug text-[#19d4fb] md:text-4xl">
                            Sign Up
                        </h1>

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

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

                    {/* <div className="text-center mt-4">
                            <a href="/forgot-password" className="text-sm text-blue-500 hover:underline">
                                Forgot Password?
                            </a>
                            </div> */}

                    {/* Divider */}
                    <div className="relative my-7">
                        <div className="absolute inset-0 flex items-center">
                            <span className="w-full border-t border-white/20"></span>
                        </div>
                        <div className="relative flex justify-center text-sm">
                            <span className="px-3 bg-black/40 backdrop-blur-md text-white/80">
                                OR
                            </span>
                        </div>
                    </div>

                    {/* Social icons */}
                    <div className="mb-10 md:mb-[20px]">
                        <ul className="flex justify-center gap-3.5 text-white">
                            {/* <li>
                                       <Link
                                        href="#"
                                        className="inline-flex h-10 w-10 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-10 w-10 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-10 w-10 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">
                        Already have an account?&nbsp;
                        <Link
                            href="/login"
                            className="uppercase text-[#19d4fb] underline transition hover:text-black dark:hover:text-white"
                        >
                            SIGN IN
                        </Link>
                    </div>
                </div>

            </div>
        </div>
    );
}