"use client";

export default function NavigationLoader() {
  return (
    <div
      className="nav-loader-overlay fixed inset-0 z-[9999] flex items-center justify-center"
      role="status"
      aria-busy="true"
      aria-label="Loading"
    >
      <div className="nav-loader-backdrop absolute inset-0 bg-white/55 dark:bg-gray-950/65 backdrop-blur-md" />

      <div className="nav-loader-progress absolute inset-x-0 top-0 h-1 overflow-hidden">
        <div className="nav-loader-progress-bar h-full w-full" />
      </div>

      <div className="nav-loader-orbit relative flex h-28 w-28 items-center justify-center">
        <span className="nav-loader-ring nav-loader-ring-1 absolute inset-0 rounded-full border-2 border-transparent" />
        <span className="nav-loader-ring nav-loader-ring-2 absolute inset-2 rounded-full border-2 border-transparent" />
        <span className="nav-loader-ring nav-loader-ring-3 absolute inset-4 rounded-full border-2 border-transparent" />
        <span className="nav-loader-dot nav-loader-dot-1 absolute left-1/2 top-0 h-2.5 w-2.5 -translate-x-1/2 rounded-full bg-emerald-400 shadow-[0_0_12px_rgba(52,211,153,0.9)]" />
        <span className="nav-loader-dot nav-loader-dot-2 absolute bottom-1 right-2 h-2 w-2 rounded-full bg-cyan-400 shadow-[0_0_10px_rgba(34,211,238,0.85)]" />
        <span className="nav-loader-dot nav-loader-dot-3 absolute bottom-3 left-2 h-1.5 w-1.5 rounded-full bg-[#ff7a45] shadow-[0_0_8px_rgba(255,122,69,0.85)]" />
        <span className="nav-loader-core absolute h-10 w-10 rounded-full bg-gradient-to-br from-emerald-400 via-teal-500 to-cyan-500 shadow-[0_0_40px_rgba(20,184,166,0.45)]" />
      </div>
    </div>
  );
}