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

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

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

            {/* ===== Background Glows (SAME AS LOGIN) ===== */}

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

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

            {/* Pink left */}
            <div className="absolute -left-[80px] bottom-[140px] w-[100px] h-[200px] bg-[#db21d9] blur-3xl opacity-90" />

            {/* Pink bottom */}
            <div className="absolute bottom-20 left-[440px] w-[60px] h-[60px] bg-[#db21d9] rounded-full blur-xl opacity-80" />

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

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

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

            {/* Yellow */}
            <div className="absolute top-[280px] -right-[20px] w-[160px] h-[160px] bg-[#f1b74d] rounded-full blur-2xl opacity-90" />

            {/* ===== CARD ===== */}
            <div
                className="relative z-10 w-full max-w-[500px] p-8 rounded-3xl
                bg-white/10 backdrop-blur-xl border border-white/20 shadow-2xl"
            >
                {/* Logo */}
                <div className="flex flex-col items-center mb-6">
                    <img
                        src="/assets/images/logo_sb.png"
                        alt="SocialBuddy Logo"
                        className="h-[120px] w-[120px]"
                    />

                    {/* User info */}
                    <div className="flex items-center gap-4 mt-4">
                        <div>
                            <h1 className="text-lg text-white font-semibold">
                                Change password
                            </h1> 
                        </div>
                    </div>
                </div>

                {/* Unlock Form (UNCHANGED) */}
                <ComponentsAuthUnlockForm />

                {/* Footer */}
                <div className="mt-6 text-center text-sm text-gray-400">
                    Not you?{' '}
                    <Link href="/login" className="text-blue-400 hover:underline">
                        Switch account
                    </Link>
                </div>
            </div>
        </div>
    );
}