import LoginForm from '@/components/public/login-form';
import { Metadata } from 'next';

export const metadata: Metadata = {
    title: 'Login Pengurus | HMF FPMIPA UPI',
};

export default function LoginPage() {
    return (
        <div data-theme="dark" className="min-h-screen bg-[#07090f] flex flex-col font-sans selection:bg-[#2563EB] selection:text-white pb-24">
            <main className="w-full min-h-[100vh] pt-32 pb-32 bg-[#07090f] overflow-hidden relative flex flex-col items-center justify-center">
                {/* Background: bg-hero.png + dark overlay */}
                <div className="absolute inset-0 z-0">
                    {/* eslint-disable-next-line @next/next/no-img-element */}
                    <img src="/bg-hero.png" alt="Background Login" className="w-full h-full object-cover object-center opacity-80 mix-blend-luminosity" />
                    <div className="absolute inset-0 bg-[#07090f]/85"></div>
                </div>

                {/* Bottom Fade Gradient for blending */}
                <div className="absolute bottom-0 left-0 w-full h-40 bg-gradient-to-t from-[#07090f] to-transparent z-10 pointer-events-none"></div>

                {/* Subtle grid */}
                <div className="absolute inset-0 z-[1] pointer-events-none">
                    <div className="absolute inset-0 opacity-[0.04]" style={{backgroundImage: 'linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px)', backgroundSize: '60px 60px'}}></div>
                </div>

                <div className="relative z-20 w-full animate-in fade-in slide-in-from-bottom-10 duration-700 delay-150">
                    <LoginForm />
                </div>
            </main>
        </div>
    );
}