'use client';

import { Suspense } from 'react';
import { Flame, Lock } from 'lucide-react';
import AdminLoginForm from '@/components/admin/AdminLoginForm';

export default function AdminLoginPage() {
  return (
    <div className="min-h-screen bg-gray-950 flex items-center justify-center px-4">
      <div className="w-full max-w-sm">
        {/* Logo */}
        <div className="flex items-center justify-center gap-2 mb-8">
          <div className="w-9 h-9 bg-orange-500 rounded-xl flex items-center justify-center">
            <Flame className="w-5 h-5 text-white" />
          </div>
          <span className="text-white font-black text-xl tracking-tight">
            TechTan Admin
          </span>
        </div>

        <div className="bg-gray-900 border border-gray-800 rounded-2xl p-8">
          <div className="mb-6">
            <div className="w-12 h-12 bg-gray-800 rounded-xl flex items-center justify-center mb-4">
              <Lock className="w-6 h-6 text-orange-400" />
            </div>
            <h1 className="text-white font-bold text-xl">Admin Access</h1>
            <p className="text-gray-400 text-sm mt-1">
              Sign in with your admin credentials
            </p>
          </div>

          <Suspense fallback={<div className="text-gray-400 text-sm">Loading...</div>}>
            <AdminLoginForm />
          </Suspense>
        </div>

        <p className="text-center text-gray-600 text-xs mt-6">
          Ignite-100 Admin Panel · TechTan
        </p>
      </div>
    </div>
  );
}