// src/app/(auth)/login/page.tsx
import { Suspense } from "react";
import LoginForm from "./LoginForm";

export const metadata = {
  title: "DesiCart.pk Admin Dashboard",
};

export default function LoginPage() {
  return (
    <div className="w-full px-4">
      <div
        className="rounded-3xl p-8 md:p-10"
        style={{
          background: "var(--color-surface)",
          boxShadow: "var(--shadow-card-xl)",
          border: "1px solid var(--color-border)",
        }}
      >
        {/* Logo / Brand */}
        <div className="mb-8 text-center">
          <div
            className="inline-flex items-center justify-center w-14 h-14 rounded-2xl mb-4"
            style={{
              background: "var(--color-cta)",
              boxShadow: "0 8px 24px rgba(217,119,6,0.35)",
            }}
          >
            <svg width="28" height="28" viewBox="0 0 24 24" fill="none">
              <path
                d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
                fill="white"
                fillOpacity="0.9"
              />
              <path
                d="M9 22V12h6v10"
                stroke="white"
                strokeWidth="1.5"
                strokeLinecap="round"
              />
            </svg>
          </div>
          <h1
            className="text-2xl font-bold tracking-tight"
            style={{ color: "var(--color-text)", fontFamily: "var(--font-sans)" }}
          >
            DesiCart.pk
          </h1>
          <p
            className="mt-1 text-sm"
            style={{ color: "var(--color-text-tertiary)" }}
          >
            Login to your account
          </p>
        </div>

        {/* Login Form with Suspense */}
        <Suspense
          fallback={
            <div className="flex justify-center py-8">
              <div className="animate-pulse text-sm" style={{ color: "var(--color-text-tertiary)" }}>
                Loading...
              </div>
            </div>
          }
        >
          <LoginForm />
        </Suspense>

        {/* Demo hint */}
        <div
          className="mt-6 p-3.5 rounded-xl text-xs text-center"
          style={{
            background: "rgba(217,119,6,0.1)",
            color: "var(--color-cta-dark)",
          }}
        >
          <strong>Demo:</strong> admin@mycompany.com / admin123
        </div>
      </div>
    </div>
  );
}