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

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


export default function SocialBuddyLogin() {


  return (
   <div className="min-h-screen bg-[#0a0b17] flex items-center justify-center p-4 relative overflow-hidden">

      {/* Background glows */}

      {/* blue left */}
    <div className="absolute top-[180px] left-52 w-[100px] h-[100px] bg-[#1d8be0] rounded-full blur-2xl opacity-[1.5] pointer-events-none"></div>

    {/* green left */}
    <div className="absolute top-10 left-0 w-[60px] h-[60px] bg-[#6cb655] rounded-full blur-2xl opacity-[1.5] pointer-events-none"></div>

    {/* pink left */}
    <div className="absolute -left-[80px] bottom-[140px] w-[100px] h-[200px] bg-[#db21d9] blur-3xl opacity-1 translate-x-1/2 translate-y-1/2"></div>
    
{/* pink - on card-small pink color bottom*/}
    <div className="absolute bottom-20 left-[440px] w-[60px] h-[60px] bg-[#db21d9] rounded-full filter blur-xl opacity-80 -translate-x-1/2 translate-y-1/2"></div>


{/* orange*/}
    <div className="absolute top-[100px] right-[260px] w-[100px] h-[100px] bg-[#f28f50] rounded-full filter blur-2xl opacity-80 -translate-x-1/2 translate-y-1/2"></div>

   {/* green right */}
    <div className="absolute top-10 right-0 w-[60px] h-[60px] bg-[#6cb655] rounded-full blur-2xl opacity-[1.5] pointer-events-none"></div>

{/* purple - right*/}
    <div className="absolute bottom-20 right-[180px] w-[80px] h-[80px] bg-[#783e8d] rounded-full filter blur-2xl opacity-80 -translate-x-1/2 translate-y-1/2"></div>


{/* yellow bottom right */}
    <div className="absolute top-[280px] -right-[20px] w-[160px] h-[160px] bg-[#f1b74d] rounded-full filter blur-2xl opacity-1 translate-x-1/2"></div>

      

      {/* Login Form */}
    <ComponentsAuthLoginForm />
    </div>
  );
}