// Cinematic AI loaders — grid scans, particle systems, glowing rings
// Variants: radar | gridscan | particles | mesh | dots
const Loader = ({ variant = 'radar', size = 180, label, sublabel }) => {
  const Wrap = ({ children }) => (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 18 }}>
      <div style={{ width: size, height: size, position: 'relative' }}>{children}</div>
      {label && (
        <div style={{ textAlign: 'center', maxWidth: 280 }}>
          <div style={{ color: Z.text, fontSize: 15, fontWeight: 600, letterSpacing: -0.2 }}>{label}</div>
          {sublabel && <div style={{ color: Z.text3, fontSize: 12, marginTop: 4 }}>{sublabel}</div>}
        </div>
      )}
    </div>
  );

  if (variant === 'radar') return (
    <Wrap>
      {/* concentric rings */}
      {[0.4, 0.7, 1].map((s, i) => (
        <div key={i} style={{
          position: 'absolute', inset: 0,
          border: `1px solid ${Z.borderStrong}`, borderRadius: '50%',
          transform: `scale(${s})`,
          animation: `radarPulse 2.4s ${i * 0.4}s infinite cubic-bezier(.22,1,.36,1)`,
        }} />
      ))}
      {/* sweep */}
      <div style={{
        position: 'absolute', inset: '8%', borderRadius: '50%',
        background: `conic-gradient(from 0deg, transparent 0deg, ${Z.brand} 60deg, transparent 90deg)`,
        animation: 'radarSweep 2.4s linear infinite',
        opacity: 0.6, maskImage: 'radial-gradient(circle, transparent 30%, black 31%, black 100%)',
        WebkitMaskImage: 'radial-gradient(circle, transparent 30%, black 31%, black 100%)',
      }} />
      {/* core */}
      <div style={{
        position: 'absolute', top: '50%', left: '50%', width: 14, height: 14,
        marginLeft: -7, marginTop: -7, borderRadius: '50%',
        background: Z.gradient, boxShadow: `0 0 24px ${Z.brand}, 0 0 48px ${Z.brand}88`,
        animation: 'radarCore 1.2s infinite ease-in-out',
      }} />
      {/* blips */}
      {[
        { x: 0.7, y: 0.35, d: 0 }, { x: 0.3, y: 0.65, d: 0.6 }, { x: 0.78, y: 0.7, d: 1.2 },
      ].map((b, i) => (
        <div key={i} style={{
          position: 'absolute', left: `${b.x * 100}%`, top: `${b.y * 100}%`,
          width: 6, height: 6, marginLeft: -3, marginTop: -3, borderRadius: '50%',
          background: Z.pink, boxShadow: `0 0 12px ${Z.pink}`,
          animation: `blipFade 2.4s ${b.d}s infinite`,
        }} />
      ))}
    </Wrap>
  );

  if (variant === 'gridscan') return (
    <Wrap>
      {/* grid */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `linear-gradient(${Z.border} 1px, transparent 1px), linear-gradient(90deg, ${Z.border} 1px, transparent 1px)`,
        backgroundSize: '20px 20px',
        maskImage: 'radial-gradient(circle, black 30%, transparent 70%)',
        WebkitMaskImage: 'radial-gradient(circle, black 30%, transparent 70%)',
      }} />
      {/* horizontal scanline */}
      <div style={{
        position: 'absolute', left: 0, right: 0, height: 2,
        background: `linear-gradient(90deg, transparent, ${Z.cyan}, transparent)`,
        boxShadow: `0 0 16px ${Z.cyan}`,
        animation: 'scanLine 2.4s linear infinite',
      }} />
      {/* hub */}
      <div style={{
        position: 'absolute', top: '50%', left: '50%', width: 56, height: 56,
        marginLeft: -28, marginTop: -28, borderRadius: '50%',
        background: 'radial-gradient(circle, rgba(124,58,237,0.4), transparent 70%)',
        animation: 'hubBreath 2s infinite ease-in-out',
      }} />
      <div style={{
        position: 'absolute', top: '50%', left: '50%', width: 10, height: 10,
        marginLeft: -5, marginTop: -5, borderRadius: '50%', background: Z.gradient,
        boxShadow: `0 0 18px ${Z.brand}`,
      }} />
    </Wrap>
  );

  if (variant === 'particles') return (
    <Wrap>
      {Array.from({ length: 18 }).map((_, i) => {
        const angle = (i / 18) * Math.PI * 2;
        const r = 30 + (i % 3) * 20;
        const x = 50 + Math.cos(angle) * r / 1.8;
        const y = 50 + Math.sin(angle) * r / 1.8;
        return (
          <div key={i} style={{
            position: 'absolute', left: `${x}%`, top: `${y}%`,
            width: 4, height: 4, marginLeft: -2, marginTop: -2, borderRadius: '50%',
            background: i % 3 === 0 ? Z.pink : i % 3 === 1 ? Z.cyan : Z.brandLite,
            animation: `particleOrbit 2.6s ${i * 0.06}s infinite ease-in-out`,
            boxShadow: '0 0 8px currentColor', opacity: 0.9,
          }} />
        );
      })}
      <div style={{
        position: 'absolute', top: '50%', left: '50%', width: 18, height: 18,
        marginLeft: -9, marginTop: -9, borderRadius: '50%', background: Z.gradient,
        boxShadow: `0 0 30px ${Z.brand}`,
        animation: 'corePulse 1.6s infinite ease-in-out',
      }} />
    </Wrap>
  );

  if (variant === 'dots') return (
    <Wrap>
      <div style={{
        position: 'absolute', inset: 0, display: 'flex',
        alignItems: 'center', justifyContent: 'center', gap: 12,
      }}>
        {[0, 1, 2].map(i => (
          <div key={i} style={{
            width: 14, height: 14, borderRadius: '50%', background: Z.gradient,
            animation: `dotBounce 1.2s ${i * 0.15}s infinite ease-in-out`,
            boxShadow: `0 0 14px ${Z.brand}88`,
          }} />
        ))}
      </div>
    </Wrap>
  );

  return null;
};

window.Loader = Loader;