export default function Loading() {
  return (
    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-50 to-white dark:from-slate-900 dark:to-slate-800">
      <div className="text-center space-y-4">
        {/* Animated spinner */}
        <div className="relative w-16 h-16 mx-auto">
          <div className="absolute inset-0 border-4 border-brand-green/20 rounded-full" />
          <div className="absolute inset-0 border-4 border-brand-green border-t-transparent rounded-full animate-spin" />
        </div>

        {/* Loading text with fade animation */}
        <div className="space-y-2">
          <div className="h-4 w-32 bg-slate-200 dark:bg-slate-700 rounded mx-auto animate-pulse" />
          <div
            className="h-3 w-24 bg-slate-100 dark:bg-slate-800 rounded mx-auto animate-pulse"
            style={{ animationDelay: "150ms" }}
          />
        </div>
      </div>
    </div>
  );
}
