interface SovereignBackdropProps {
  variant?: 'grid' | 'mesh' | 'nodes';
  className?: string;
}

const GOLD = '#D4A64A';
const BRONZE = '#8B6A3E';
const COPPER = '#C56B2C';

/** Decorative full-bleed backgrounds — pointer-events-none, aria-hidden. */
export function SovereignBackdrop({ variant = 'grid', className = '' }: SovereignBackdropProps) {
  if (variant === 'mesh') {
    return (
      <div className={`pointer-events-none absolute inset-0 overflow-hidden ${className}`} aria-hidden>
        <div className="absolute -left-1/4 top-0 h-[480px] w-[480px] rounded-full bg-sovereign-gold/8 blur-3xl" />
        <div className="absolute -right-1/4 bottom-0 h-[400px] w-[400px] rounded-full bg-sovereign-bronze/6 blur-3xl" />
        <svg className="absolute inset-0 h-full w-full opacity-[0.06]" xmlns="http://www.w3.org/2000/svg">
          <defs>
            <pattern id="mesh-dots" width="32" height="32" patternUnits="userSpaceOnUse">
              <circle cx="2" cy="2" r="1" fill={GOLD} />
            </pattern>
          </defs>
          <rect width="100%" height="100%" fill="url(#mesh-dots)" />
        </svg>
      </div>
    );
  }

  if (variant === 'nodes') {
    return (
      <div className={`pointer-events-none absolute inset-0 overflow-hidden ${className}`} aria-hidden>
        <svg
          className="absolute inset-0 h-full w-full opacity-20"
          viewBox="0 0 800 400"
          preserveAspectRatio="xMidYMid slice"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M80 200 Q200 80 320 200 T560 200 T720 120"
            fill="none"
            stroke={GOLD}
            strokeOpacity="0.4"
            strokeWidth="1"
          />
          <path
            d="M80 280 Q240 360 400 280 T720 320"
            fill="none"
            stroke={BRONZE}
            strokeOpacity="0.35"
            strokeWidth="0.75"
          />
          <circle cx="320" cy="200" r="6" fill={GOLD} opacity="0.7" />
          <circle cx="560" cy="200" r="4" fill={COPPER} opacity="0.6" />
          <circle cx="720" cy="120" r="5" fill={GOLD} opacity="0.65" />
        </svg>
      </div>
    );
  }

  return (
    <div className={`pointer-events-none absolute inset-0 overflow-hidden ${className}`} aria-hidden>
      <svg className="absolute inset-0 h-full w-full opacity-[0.04]" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <pattern id="sovereign-grid" width="48" height="48" patternUnits="userSpaceOnUse">
            <path d="M 48 0 L 0 0 0 48" fill="none" stroke={GOLD} strokeWidth="0.5" />
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#sovereign-grid)" />
      </svg>
    </div>
  );
}
