frontend/components/BrandLoader.tsx

"use client";

export default function BrandLoader() {
  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-navy/90 backdrop-blur-xl animate-in fade-in duration-500">
      <div className="relative flex flex-col items-center">
        {/* Outer Glowing Ring */}
        <div className="absolute h-64 w-64 rounded-full border-2 border-cyan/20 animate-ping opacity-20" />
        
        {/* Rotating Spiral / Radar */}
        <div className="relative h-48 w-48">
          {/* Main Ring */}
          <div className="absolute inset-0 rounded-full border-[3px] border-t-cyan border-r-transparent border-b-sky/30 border-l-transparent animate-spin duration-[1.5s]" />
          
          {/* Inner Fast Ring */}
          <div className="absolute inset-4 rounded-full border border-dashed border-cyan/40 animate-spin-reverse duration-[3s]" />
          
          {/* The "Mountain" Brand Shape (SVG) */}
          <div className="absolute inset-0 flex items-center justify-center">
            <svg width="60" height="60" viewBox="0 0 100 100" className="drop-shadow-[0_0_15px_rgba(6,182,212,0.8)]">
              <path 
                d="M50 15 L90 85 L10 85 Z" 
                fill="none" 
                stroke="currentColor" 
                strokeWidth="4" 
                className="text-cyan animate-pulse"
              />
              <path 
                d="M50 35 L75 85 L25 85 Z" 
                fill="none" 
                stroke="currentColor" 
                strokeWidth="3" 
                className="text-sky/60"
              />
            </svg>
          </div>

          {/* Scanning Line */}
          <div className="absolute inset-0 rounded-full bg-gradient-to-t from-cyan/20 to-transparent animate-pulse h-1/2 top-0 origin-bottom" />
        </div>

        {/* Text Status */}
        <div className="mt-12 text-center space-y-2">
          <h3 className="text-xl font-bold tracking-[0.2em] text-white uppercase italic">
            Neural Syncing
          </h3>
          <div className="flex items-center gap-1 justify-center">
            <span className="h-1 w-1 bg-cyan rounded-full animate-bounce delay-75" />
            <span className="h-1 w-1 bg-cyan rounded-full animate-bounce delay-150" />
            <span className="h-1 w-1 bg-cyan rounded-full animate-bounce delay-300" />
          </div>
          <p className="text-[10px] text-slate-500 uppercase tracking-widest mt-4">
            Connecting to Mercado Público Real-Time API...
          </p>
        </div>
      </div>

      <style jsx>{`
        @keyframes spin-reverse {
          from { transform: rotate(360deg); }
          to { transform: rotate(0deg); }
        }
        .animate-spin-reverse {
          animation: spin-reverse 3s linear infinite;
        }
      `}</style>
    </div>
  );
}